[JS] object 오브젝트

• (드림코딩 by 엘리) 자바스크립트 7. 강의를 보고 정리했습니다.
  
  

오브젝트 생성하기

const obj1 = {}; // 중괄호를 이용해 만들거나, (object literal syntax)
const obj2 = new Object(); // class를 이용해 만들수도 있다. (object constructor syntax)

참고로, 미리 정의해놓지 않은 property를 추가할 수 있고 심지어 삭제도 가능하다.

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

ellie.hasJob = true; // 갑자기 hasJob 을 추가
console.log(ellie.hasJob); // true

delete ellie.hasJob; // 이렇게 삭제도 가능
console.log(ellie.hasJob); // undefined

하지만! 이렇게 하면 빨리 빨리 하기엔 좋을지 몰라도 유지 보수하기에는 매우 안 좋으니, 되도록이면 이런 식으로 추가하거나 삭제하지 말자.

Computed properties

key는 항상 string이어야 한다.

console.log(ellie['name']); // 이렇게 쓰는게 computed properties

어떤 경우에 computed properties를 쓸까?

• 정확하게 어떤 key가 필요한지 모를때. 즉 runtime에서 결정될 때
• 실시간으로 (동적으로) 원하는 key 값을 받아오고 싶을 때
  
  

오브젝트 추가하기

const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};

위와 같은 오브젝트들이 있을 때, person4 = {name: 'ellie', age: 30} 이라는 오브젝트를 추가하려고 한다.
이 때 그냥 타이핑하면 굉장히 번거롭기 때문에 오브젝트를 생성하는 함수를 만드는 방법을 사용하면 편리하다.

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

function makePerson(name, age) {
  return {
    name: name,
    age: age,
  };
}

여기서, key와 value의 이름이 동일하다면 Property value shorthand라는 기능을 활용하여 하나를 생략할 수 있다.

function makePerson(name, age) {
  return {
    name,
    age,
  };
}

Constructor function

아하! 그러면 여기서 makePerson이라는 함수는 class와 같은 역할을 하는구나!

그래서 class가 등장하기 전에는 위와 같은 방법으로 오브젝트를 생성했다.
다른 계산 없이 순수하게 오브젝트를 생성하는 함수는 보통 대문자로 시작하도록 만들었고, return을 사용하지 않고 아래와 같이 class에서 보던 것처럼 작성한다. 호출할 때도 class에서 오브젝트 만드는 것처럼 한다.

const person4 = new Person('ellie', 30);

function Person(name, age) {
  this.name = name;
  this.age = age;
}

in operator

오브젝트 안에 key가 있는지 없는지 확인하는 방법

console.log('name' in ellie); // true
console.log('age' in ellie); // true
console.log('bbukku' in ellie); // false
console.log(ellie.bbukku); // undefined

for..in / for..of

1. for...in

// for (let elem in obj) 형태로 사용
for (let elem in ellie) {
  console.log(elem); // name age hasJob
}

ellie라는 오브젝트를 쭉 돌면서 지역변수 elem에 key값을 저장한다.
(강의에서는 지역변수가 elem이 아니라 key로 나왔는데 헷갈려서 elem이라고 바꿨다. 뭐라고 이름 붙이든 상관없다.)

2. for...of

배열처럼 iterable한 상황에서 쓴다.

const array = [1, 2, 4, 5];
for(let elem of array) {
  console.log(elem); // 1 2 4 5

오브젝트 복제하기

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

// old way
const user3 = {};
for (let key in user) {
  user3[key] = user[key];
} // 정말로 값을 하나씩 다 넣는 방법이다.

// assign 메소드 활용하기
const user4 = {};
Object.assign(user4, user);

// 혹은 아래와 같이 써도 같은 말
const user4 = Object.assign({}, user);

• assign 메소드에서 두 인자가 섞인 값이 리턴되므로 두 가지 방법 모두 쓸 수 있다.
• 자바스크립트의 모든 오브젝트는 자스에 기본적으로 탑재된Object를 상속한다는 것을 기억하기!

만약 중복된 property를 assign하면 어떻게 될까?

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

뒤에 나오는 property로 덮어씌워진다.