[드림코딩 엘리] 자바스크립트 Object를 만드는 방법, key 사용법,

이번 편에서는 자바스크립트 Object를 알아볼 것이다. 오브젝트란 자바스크립트의 데이터 타입 중 하나이며 관련 데이터 및  기능의 모음이다. Javascript의 거의 모든 객체는 Object의 사례이다.

const name ='ellie';
const age = 4;
print(name, age);
function print(name, age) {
	console.log(name);
    console.log(age);
}

 

primitive 타입은 변수 하나당 값 하나를 담을 수 있고, 이름과 나이를 각각 parameter로 전달해줘야 한다. 만약에 위에처럼 코드를 작성하면 관리하기도 힘들고, logical 하게 골고루 생각할 수 없기 때문에 좋지 않다. 그래서 objet를 쓰는 것이다.

자바스크립트 오브젝트

1. Literals and Properties 

// 1. Literals and Properties 
// object = { key : value };
// object를 만드는 두 가지 방법
const obj1 = {}; // 'object literal' syntax - {}를 쓰는 방법이다.
const obj2 = new Object(); // 'object constructor' syntax - new를 쓰는 방법이다.

function print(person) {
  console.log(person.name);
  console.log(person.age);
}

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

// with JavaScript magic (dynamically typed language) 동적으로 타입이 결정되는 언어이다.
// can add properties later
// 뒤늦게 property 추가가 가능하다.
ellie.hasJob = true;
console.log(ellie.hasJob);

// can delete properties later
// 삭제도 가능하다
delete ellie.hasJob;
console.log(ellie.hasJob);

2. Object['key']

object는 key 와 value의 집합체이다. object는 우리가 접근할 수 있는 변수 property와 그 property가 가지고 있는 값을 말한다. 

// 2. Computed properties
// key should be always string. 문자열로 지정해서 받아와야한다.
// 우리가 object 안에 있는 데이터를 접근할 때, '.'을 이용해서 접근했다. 
// 하지만 Object['key'] 의 [ ] 대괄호를 이용해서 배열에서 데이터를 받아오는 것처럼 가능하다.
console.log(ellie.name); // . 을 쓸 때는 키에 해당하는 값을 받아오고 싶을 때 쓴다. 
console.log(ellie['name']); // [] 는 우리가 정확하게 어떤 키가 필요한지 모를 때 (runtime에서 결정 될 때) 쓴다. 
ellie['hasJob'] = true;
console.log(ellie.hasJob);

// 나중에 동적으로 key에 관련된 value를 받아와야 할 때 유용하게 쓰인다.
function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');

3. Property value shorthand & 4. Constructor Function

Object가 필요할 때 일일이 만들게되면 이렇게 버불가피하게 동일한 key 와 value를 반복해서 써야하는 문제점이 있지만, key 와 value가 동일하다면 이것을 생략해서 쓸 수 있다. 호출할 때도 class에서 object를 만드는 것처럼 new Person을 사용하면 된다.  

// 3. Property value shorthand
const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
const person4 = new Person('elile', 30);
console.log(person4); // 결과 {name: "ellie", age= 30}

// 4. Constructor Function
function Person(name, age) { 
// 다른 계산은 하지 않고 순수하게 object를 생성하는 함수들은 보통 대문자로 시작하도록 함수를 만든다.
  // this = {};
  this.name = name;
  this.age = age;
  // return this;
}

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

in 이라는 키워드를 이용해서 해당하는 key가 object 안에 있는지 확인할 수 있다.

// 5. in operator: property existence check (key in obj)
// in 이라는 키워드를 이용해서 해당하는 key가 object 안에 있는지 확인할 수 있다.
console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random);

6. for.. in  vs  for.. of

// 6. for..in vs for..of
// for (key in obj)
// ellie 가 가지고 있는 key들이 블럭을 돌 때마다 key라는 지역 변수에 할당이 되어진다. 
console.clear();
for (let key in ellie) {
  console.log(key);
}

// for (value of iterable)
const array = [1, 2, 4, 5];
for (let value of array) { 
// array에 있는 모든 값들이 value에 할당 되면서 이렇게 block 안에서 순차적으로 출력하거나 값을 개선할 수 있다
  console.log(value);
}

/* 
원래는 이거인데 위에 처럼 쉽게 할 수 있다.
for (let i = 0; i < 
    arrary.length ; i++){
    console.log(arrary[i]);
}
*/

7. Fun cloning

// 7. Fun cloning
// Object.assign(dest, [obj1, obj2, obj3...])
/* user라는 변수는 지금 memory를 가리키고 있는데 여기 memory에는 reference가 들어있다. 
이 reference는 name은 elline 이고, age는 20 이라는 object를 가리키고 있는 reference가 들어있다.  
user2의 변수는 user가 할당 되어졌다. 즉, user 안에 들어 있는 reference 값이 user2에도 동일하게 할당된다는 뜻이다.
user2 에도 동일한 reference가 들어있다. 
*/
const user = { name: 'ellie', age: '20' };
const user2 = user;
console.log(user);

// old way
const user3 = {};
for (let key in user) { //  user 안에 있는 이 key들을 빙긍빙글 돌면서 첫번 쨰 key는 name이 되고, 두 번쨰 key는 age가 된다. 
  user3[key] = user[key];
}
console.clear();
console.log(user3);

// 새로운 함수나 api를 쓸 때는 어떤 parameter를 전달해서 어떤 값이 return 되는 지를 꼭 확인하고 써라
// assign은 복사하고자 하는 target과 복사를 하려고 하는 그 source를 같이 전달해줘야 한다.
// return 값은 target과 복사하고자 하는 것이 통합된 아이가 return 된다.
const user4 = Object.assign({}, user);
console.log(user4);

// another example
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' }; // fruit1 과 2의 공통적인 property는 color 가 들어있고, size라는 새로운 property가 fruit2 에 들어있다. 
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); // 결과는 blue 이다.
console.log(mixed.size); // 결과는 big 이다.
// fruit3 에 color 가 black 인 아이를 섞으면 fruit 3이 fruit2에 나와있던 property를 계속 덮어씌우니까 color는 블랙이 된다.
// 나중에 TypeScript나 다른 언어를 공부할 떄는 객체지향 언어가 조금 중요한 개념이기 때문에 java 책을 하나 구입해서 보면 좋다.