[Javascript][Lecture][드림코딩]자바스크립트 기초 강의(ES5+)(7/13)

7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

// Object
// one of the JavaScript's data types.
// a collection of related data and/or functionality.
// Nearly all objects in JavaScript are instance of Object
// objeft = { key : value}

// 1. Literals and properties
const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax

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
ellie.hasJob = true; // 비추천!
console.log(ellie.hasJob);

// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);

// 2. Computed properties
// key should be always string
console.log(ellie.name); // coding하는 그 순간 key에 해당하는 value를 받아오고 싶을 때 사용한다.
console.log(ellie["name"]); // 정확히 어떤 key가 필요한지 모를 때(즉, runtime에서 결정될 때) 사용한다.
ellie["hasJob"] = true;
console.log(ellie.hasJob);

function printValue(obj, key) {
  //   console.log(obj.key);
  console.log(obj[key]); // ['key']가 아니라 [key]를 사용 했다. 변수로 접근
}

printValue(ellie, "name");
printValue(ellie, "age");

// 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);
const person4 = new Person("ellie", 30);
console.log(person4);
// function makePerson(name, age) {
//   return {
//     name: name,
//     age, // key와 value의 이름이 동일하다면 생략 가능
//   };
// }

// 4. Constructor Function
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); // 해당하는 object안에 key가 있는지 확인
console.log("age" in ellie);
console.log("random" in ellie);
console.log(ellie.random);
console.log(ellie.name);
console.log(ellie["name"]);

// 6. for..in vs for..of
// for (key in obj)
console.clear(); // 이전 log들 삭제
for (key in ellie) {
  console.log(key);
}

// for (value of iterable)
const array = [1, 2, 4, 5];
// for (let i = 0; i < array.length; i++) {
//   console.log(array[i]);
// }

for (value of array) {
  console.log(value);
}

// 7. Fun cloning
// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: "ellie", age: 20 };
const user2 = user;
// user2.name = "coder";
console.log(user);

// old way
const user3 = {};
for (key in user) {
  user3[key] = user[key];
}
console.clear();
console.log(user3);

// new way 1
const user4 = {};
Object.assign(user4, user);
console.log(user4);

// new way 2
const user5 = Object.assign({}, user);
console.log(user5);

// another example
const fruit1 = { color: "red" };
const fruit2 = { color: "blue", size: "big" };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed["color"]);
console.log(mixed.color);