모던 JS 튜토리얼 정리 2

객체 만드는 법

let user = new Object(); // '객체 생성자' 문법

let user = {}; // '객체 리터럴' 문법

---

** 상수 객체는 수정될 수 있다!! **

const user = {
  name: "John"
};

user.name = "Pete"; // (*)OK

alert(user.name); // Pete

---

계산된 프로퍼티(computed property)(cf. 대괄호 표기법)

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력.

// 위 예시와 동일하게 동작
// 더 깔끔함
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};

// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5;

---

Object.assign(목표로 하는 객체, 복사하고자 하는 객체...) -> 얕은 복사

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// permissions1과 permissions2의 프로퍼티를 user로 복사한다.
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }

---

메서드와 this

let user = {
  name: "John",
  age: 30,
  sayHi() {
    // 'this'는 '현재 객체'를 나타낸다.
    alert(this.name);
  }
};

user.sayHi(); // John

동일한 함수라도 다른 객체에서 호출했다면 'this'가 참조하는 값이 달라진다.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

this가 없는 화살표 함수

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라