개발자/JS

[자바스크립트] 7. object

엘리씨 2021. 1. 18. 00:08

1. literals and properties

const name = 'ellie';

const age = 4;

print(name, age);

function print(name, age){

   console.log(name);

   console.log(age);

}

 

->인자가 많을 경우 객체를 사용한다. (key와 value의 집합체)

const ellie = {name: 'ellie', age: 4};

print(ellie);

function print(ellie){

   console.log(ellie.name);

   console.log(ellie.age);

}

 

*object 만드는 법

const obj1 ={}; //object literal

const obj2 = new Object(); //object constructor

 

ellie.hasJob= true; //js는 동적이라서 나중에 추가도 가능함. but, 유지보수에는 안좋으니 피하기.

delete ellie.hasJob; //삭제도 가능. ->undefined.

 

2.computed properties 계산된 속성

the key should be always string.

 

console.log(ellie.name); //ellie 코딩하는 순간 받아오고싶을때.

console.log(ellie['name']); //ellie //runtime에서 결정될때 쓰는 거. 정확히 어떤키를 쓸지 모를때.

ellie['hasJob'] = true;

 

function printValue(obj, key){

   console.log(obj.key); 

}

printValue(ellie,'name'); //obj에 key라는 property가 들어있지 않으므로 undefined.

 

function printValue(obj, key){

   console.log(obj[key]); 

}

printValue(ellie,'name'); //ellie

 

3.property value shorthand

const person1 = {name: 'bob' , age: 2};

const person2 = {name: 'steve' , age: 3};

const person3 = {name: 'dave' , age: 4};

const person4 = makePerson('ellie', 30);

 

function makePerson(name, age){

   return {

      name, // name:name이면 생략가능.

      age,

   };

}

 

constructor function

object를 생성하는함수

function Person(name, age){

   //this = {};

   this.name = name;

   this.age = age;

   //return this;

}

 

 

5. in operator: property existence check (key in obj)

console.log('name' in ellie); //true 키가 있는지 없는지

console.log('random' in ellie); //false

console.log(ellie.random); //undefined

 

6. for.. in  vs  for.. of

 

//key in object

for (key in ellie){

   console.log(key);

}

 

//value of iterable

const array = [1,2,3,4];

for (value of array){

   console.log(value);

}

 

7.cloning

const user =  {name: 'ellie', age: '20'};

const user2 = user;

user2.name = 'coder';

console.log(user); //{name: "coder", age: "20"}

 

//old way

const user3 = {};

for(key in user){

   user3[key] = user[key];

}

console.log(user3);

 

//object assign

const user4 = {};

Object.assign(user4, user);

혹은

const user4 = Object.object({},user);

console.log(user4); //{name: 'ellie', age: '20'}

 

//another sample.

const fruit1 = {color:'red'};

const fruit2 = {color:'blue', size:'big'};

const mixed = Object.assign({}, fruit1, fruit2);

console.log(mixed.color);//blue 뒤에나오는 아이가 앞에 있는 값을 덮어씀.

console.log(mixed.size);//big

 

 

'개발자 > JS' 카테고리의 다른 글

[자바스크립트] 별점 제이쿼리  (0) 2021.02.18
[자바스크립트] 8.배열  (0) 2021.01.19
6. class vs objec  (0) 2021.01.10
5. Arrow Function 함수의 선언과 표현  (0) 2021.01.04
자바스크립트 4. operator, if, for loop  (0) 2021.01.03