4-1 객체

• 객체형은 원시형과 다르게 다양한 데이터를 담을 수 있다.
• 프로퍼티(property) = 키(key): 값(value)
• 객체에서는 키를 이용해 프로퍼티를 쉽게 찾고 추가하거나 삭제할 수 있음
• 점 표기법(dot notation) => 프로퍼티의 값을 얻을 때 사용한다.
• delete 연산자

delete user.age;

• 계산된 프로퍼티 => 객체 리터럴 안의 프로퍼티 키를 대괄호로 둘러쌈으로써 프로퍼티 이름을 변수에서 가져오는 것.

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;

• in 연산자로 프로퍼티 존재 여부 확인하기

let user = { name: "John", age: 30 };

alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.
// === undifined 를 사용할 수도 있으나 에러가 있는 경우도 있어 in 연산자 사용 권장

• for in 반복문
  객체의 모든 키를 순환할 수 있다.

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

• 객체 정렬 방식
  정수 프로퍼티는 오름차순으로 자동 정렬되고, 그렇지 않은 경우 작성한 순서대로 정렬된다. 정수 프로퍼티를 작성한 순으로 정렬하고 싶다면 정수 앞에 + 를 붙여주자.

let codes = {
  "+49": "독일",
  "+41": "스위스",
  "+44": "영국",
  // ..,
  "+1": "미국"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}

4-2 참조에 의한 객체 복사

• 객체는 참조에 의해(by reference) 저장되고 복사된다.
• Object.assign
  기존에 있던 객체와 똑같으면서 독립적인 객체를 만들 때 사용한다.

Object.assign(dest, [src1, src2, src3...])

모든 객체의 프로퍼티가 dest 에 복사된다.

• 중첩 객체 복사
  객체 안의 프로퍼티가 원시값이 아닌 참조값일 경우 깊은 복사를 해야한다. 깊은 복사는 반복문이나 Structured cloning algorithm 또는 _.cloneDeep(obj) 메서드를 사용해 처리할 수 있다.

4-3 가비지 컬렉션

• 자바스크립트 엔진은 쓸모 없어진 메모리를 찾아내 삭제한다.
• 객체는 도달 가능한 상태일 때 메모리에 남는다.
• 도달할 수 없는 섬(참조된다고 해서 도달 가능한 것은 아니다. 서로 연결된 객체들도 도달 불가능할 수 있다.)

4-4 메서드와 this

• 객체 프로퍼티에 저장된 함수를 메서드라고 부른다.

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("안녕하세요!");
};

user.sayHi(); // 안녕하세요!

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

• 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.
• this 값은 런타임에 결정되므로 컨텍스트에 따라 달라진다.
• 화살표 함수 안에서 this 를 사용하면 외부에서 this 값을 가져오므로 주의하자.

4-5 new 연산자와 생성자 함수

• 생성자 함수는 유사한 객체를 여러 개 만들 때 유용하다.
• 생성자 함수(생성자)는 일반 함수이다. 다만, 일반 함수와 구분하기 위해 함수 이름 첫 글자를 대문자로 쓰고 반드시 new 연산자를 붙여 실행한다.
• 생성자 함수를 new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환됩니다.

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

• 생성자에는 보통 return 문을 쓰지 않는다.
• 생성자 내에서 this 를 이용해 메서드를 만들 수도 있다.

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let bora = new User("이보라");

bora.sayHi(); // 제 이름은 이보라입니다.

/*
bora = {
   name: "이보라",
   sayHi: function() { ... }
}
*/

4-6 옵셔널 체이닝 '?.'

• 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.(ex. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다.)

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.

• ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행한다.
• ?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.
• 대괄호를 이용해 프로퍼티에 접근하는 경우 obj?.[prop] 를 사용하고, obj?.method()를 통해 함수 존재 여부도 파악할 수 있다.

4-7 심볼형

• Symbol은 원시형 데이터로, 유일무이한 식별자를 만드는 데 사용된다.
• Symbol()을 호출하면 심볼을 만들 수 있다. 설명(이름)은 선택적으로 추가할 수 있다.

// 심볼 id에는 "id"라는 설명이 붙습니다.
let id = Symbol("id");

• 객체의 ‘숨김’ 프로퍼티 – 외부 스크립트나 라이브러리에 ‘속한’ 객체에 새로운 프로퍼티를 추가해 주고 싶다면 심볼을 만들고, 이를 프로퍼티 키로 사용하면 된다. 키가 심볼인 경우엔 for..in의 대상이 되지 않아서 의도치 않게 프로퍼티가 수정되는 것을 예방할 수 있다. (단 Object.assign 은 키가 심볼인 프로퍼티를 배제하지 않고 객체 내 모든 프로퍼티를 복사한다.) 외부 스크립트나 라이브러리는 심볼 정보를 갖고 있지 않아서 프로퍼티에 직접 접근하는 것도 불가능하다. 따라서 심볼형 키를 사용하면 프로퍼티가 우연히라도 사용되거나 덮어씌워 지는 걸 예방할 수 있다.

• 사실 심볼을 완전히 숨길 방법은 없다. 내장 메서드 Object.getOwnPropertySymbols(obj)를 사용하면 모든 심볼을 볼 수 있고, 메서드 Reflect.ownKeys(obj)는 심볼형 키를 포함한 객체의 모든 키를 반환해준다. 그런데 대부분의 라이브러리, 내장 함수 등은 이런 메서드를 사용하지 않는다.

4-8 객체를 원시형으로 반환하기

• 원시값을 기대하는 내장 함수나 연산자(+, - 등)를 사용할 때 객체-원시형으로의 형 변환이 자동으로 일어난다.

• 객체->원시형으로의 형 변환은 hint(목표로 하는 자료형)를 기준으로 세 종류로 구분할 수 있다.

  	- "string" (alert 같이 문자열을 필요로 하는 연산)
  	- "number" (수학 연산)
  	- "default" (드물게 발생함)(연산자가 기대하는 자료형이 ‘확실치 않을 때’)

• obj.toString()만 사용해도 '모든 변환’을 다 다룰 수 있기 때문에, 실무에선 obj.toString()만 구현해도 충분한 경우가 많다.