[JS 객체(Object)

object = {key : value};

 

1. Literals and properties

 

1-1. Object의 사용

보통 primitive타입은 변수 하나당 값을 하나만 할당할 수 있는데,

이 변수들을 출력하고자 함수를 정의해서 호출한다면

출력하고자 하는 변수들이 굉장히 많아질 수 있고 비효율적일 수 있는데

이럴 경우 객체(Object)를 활용하면 위의 문제점들을 개선할 수 있음

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

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

const ellie = { name: "ellie", age: 4 };
printObject(ellie);

 

1-2. Object 생성방법

//Object를 만드는밥
const obj1 = {}; // way1. 'object literal' syntax
const obj2 = new Object(); // way2. 'object contructor' syntax

 

 

2.Computed properties(계산된 프로퍼티)

'.'(dot)으로 사용하는 경우는 코딩하는 그 순간 그 key에 해당하는 값을 받아오고 싶을 때 사용

'[]'(computed properties)를 사용하는 경우는 우리가 정확하게 어떤 키가 필요한지 모를 때

즉, 런타임에서 결정될 때 사용하게 됨

console.log(ellie.name);
console.log(ellie["name"]);
ellie["hasjob"] = true;
console.log(ellie.hasjob);

 

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);
console.log(person4);
function makePerson(name, age) {
  return {
    //자바스크립트에서는 'roperty value shorthand'라는 기능이 있어서
    //key와 value의 이름이 동일하다면, 이것을 생략이 가능
    name, //name: name,
    age //age: age
  };
}

 

 

4. Constructor Function

//보통 Object생성할 때만 사용하는 함수는 아래와 같이 사용
const person5 = new Person("ellie", 30);
console.log(person5);
function Person(name, age) {
  //this = {}; //이게 생략되었다고 보면됨
  this.name = name;
  this.age = age;
  //return this; //이게 생략되었다고 보면됨
}

 

 

5. in operator : property existence check (key가 있는지 없는지 확인하는 키워드

console.log("name" in ellie); //true
console.log("age" in ellie); //true
console.log("hasJob" in ellie); //true
console.log("height" in ellie); //false
console.log(ellie.random); //undefined

 

 

6. for ..in vs for ..of

console.clear(); //이전 로그들 삭제
for (key in ellie) {
  console.log(key);
}
//for (value of iterable)
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}
for (value of array) {
  console.log(value);
}

 

 

7. cloning

const user = { name: "ellie", age: "20" };
const user2 = user;
for (i in user2) {
  console.log(i);
}
user2.name = "coder";
console.log(user.name);

//Object 복사방법
//way1(old)
const user3 = {};
for (key in user) {
  user3[key] = user[key];
}
console.clear();
console.log(user3);

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

//another example
//fruit1과 fruit2에 color라는 같은 key가 있으면 뒤에 있는 인자가 앞의 인자를 뒤집어 씀
const fruit1 = { color: "red" };
const fruit2 = { color: "blue", size: "big" };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color);
console.log(mixed.size);

 

 

 

 

참고 : 드림코딩 by 엘리 유튜브