강좌 : 유튜브 드림코딩 by 엘리

5. Object

📄 Objects

• object = { key : value };
• console.clear(); : 이전에 출력된 log를 지운다

✍️Literals and properties

// 예시 1
const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax

• can add properties later

// 예시 2
object name.key = value;

• can delete properties later

// 예시 3
delete object name.key;

---

✍️Computed properties

• key는 string타입으로 해야한다
• 배열에서 데이터를 받아오는 것처럼 괄호와 쿼터([''])를 이용해서 object안의 property에 접근이 가능
• 정확하게 어떤key가 필요한지 모를때, 실시간으로 원하는 key의 값을 받아오고 싶을때 사용

// 예시
console.log(hxxjxx.name);
console.log(hxxjxx['name']);// 코딩할때는 그냥 . 을사용하면 된다

function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(hxxjxx, 'name');

---

✍️Property value shorthand

• key와 value의 이름이 동일하면 생략가능

// 예시
const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
const person4 = new Person('hxxjxx', 20);

// 이전 class가 없을때 사용한 방법
// 현재는 아래 예시와 같이 constructor 함수를 이용해서 사용
function makePerson(name, age) {
  return {
    name,
    age,
  };
}

Constructor Function

• 다른 계산을 하지 않고 순수하게 object를 생성하는 함수는 대문자로 시작

// 예시
function Person(name, age) {
  // this = {};  // 생략
  this.name = name;
  this.age = age;
  // return this;  // 생략
}

---

✍️In operator

• 해당하는 object 안에 key가 있는지 확인

// 예시
console.log('name' in hxxjxx);  // true 반환
console.log('random' in hxxjxx);  // 정의되지 않은 key를 사용하면 false를 반환
console.log(ellie.random);  // 출력해보면 undefinded 나온다

---

✍️for..in & for..of

for (key in obj)

• 모든 key들을 받아와서 일을 처리하고 싶을 때 사용

// 예시
for (let key in hxxjxx) {
  console.log(key);
}

for (value of iterable)

• array의 모든 값들이 value에 할당
• 블럭안에서 순차적으로 값을 출력하거나 계산할 수 있다

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

---

✍️Cloning

• object 복제

// 예시 1
const user = { name: 'hxxjxx', age: '20' };
const user2 = user;  // user와 user2는 같은 reference를 가르킨다
user2.name = 'coder';
console.log(user);  // 복제 된게 아니기 때문에 name의 값이 coder로 변경되어 출력

// 예시 2
// old way
const user3 = {};  // 텅텅 비어있는 object를 생성
for (let key in user) {  // for 루프를 돌면서 user의 값을 user3에 복사
  user3[key] = user[key];
}

Object.assign(dest, [obj1, obj2, obj3...])

• assing(target, source); : 복사하고자 하는 target과 복사를 하려고 하는 source를 같이 전달
• source값은 여러개를 가질 수 있다
• 뒤에 나오는 source값들이 앞에 있는 값을 덮어 씌운다

// 예시
const user4 = Object.assign({}, user);

📖 연습해보기

const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);  // 2개의 source값
// 앞에 fruit1의 color값이 뒤에 fruit2의 color값으로 덮어진다
console.log(mixed.color);  // blue
console.log(mixed.size);  // big