ko.javascript.info - 객체: 기본
1. 객체
객체는 프로퍼티들의 집합
프로퍼티는 키와 값으로 구성됨
키는 문자형, 값은 모든 자료형 허용
객체는 생성자 문법, 리터럴 문법 두 가지 방법으로 선언 가능
user 객체의 프로퍼티 접근: user.name;
user 객체에 프로퍼티 추가: user.name = 'John';
user 객체에서 프로퍼티 삭제: delete user.name;
동적으로 user 객체의 프로퍼티에 접근하는 법: user[dynamicKey]
객체 안에 특정 프로퍼티가 존재하는지 검사하는 법: 'name' in user;
객체 안에 프로퍼티를 순회하는 법: for (key in user) { ... }
객체 프로퍼티의 이름(key)으로는 예약어 사용 가능
객체의 프로퍼티의 이름으로 숫자형을 사용하더라도 자동으로 문자형으로 변환됨
객체 프로퍼티를 순회하는 순서는 정수형일 땐 숫자 순서대로, 정수형이 아닐 땐 입력된 순서대로
+ 연산자를 단독으로 사용하는 경우, 피연산자를 숫자형으로 변환(가능하다면)
-연산자를 단독으로 사용하는 경우, 피연산자에 -1을 곱한다(가능하다면)
2. 참조에 의한 객체 복사
변수에 객체를 저장할 시 객체의 값이 저장되는게 아니라 객체가 저장된 곳의 위치가 저장된다.(원시 값들은 값 자체가 저장됨)
그래서 할당 연산자로 객체를 다른 변수에 할당하거나 함수에 매개변수로 전달하는 경우, 의도치 않게 원본 객체를 수정하는 일이 발생할 수 있다.
이런 일을 방지하기 위해 참조에 의한 복사를 하기 보단 얕은 복사를 통해 객체를 복사해야한다.
얕은 복사는 전개 연산자 혹은 Object.assign 연산자를 통해 이뤄질 수 있다.
그런데 복사해야할 객체가 중첩 객체라면 깊은 복사를 통해 객체를 복사해야한다.(lodash의 cloneDeep 등 활용)
3. 메서드와 this
객체 프로퍼티에 함수를 할당할 수 있으며 이를 '메서드'라고 부른다.
메서드에서 this 키워드를 통해 객체에 접근할 수 있다.
화살표 함수는 내부적으로 this 를 생성하지 않고 외부 컨텍스트의 this를 가지고 와서 사용한다.
this는 런타임 환경에서 결정된다. 즉, 함수가 선언된 구조보다 함수가 어떻게 호출되었는지가 this를 결정짓는 요소가 된다.
4. new 연산자와 생성자 함수
생성자 함수로 객체 생성 시, 암묵적으로 진행되는 프로세스 두 가지.
1. this에 빈객체가 할당된다.
2. this가 return 된다.
즉, new User();의 평가 결과는 {}이다.
5. 옵셔널 체이닝 '?.'
객체에 중첩 프로퍼티를 통해 접근해야하는 상황에서 중간 프로퍼티가 undefined or null이라면 "Cannot read property 'N' of undefined" 에러가 발생한다. undefined, null 가능성이 있는 프로퍼티 오른쪽 옆에 '?.'를 붙여주면 그 오른쪽에 이어져있는 코드들은 평가되지 않은 채로 해당 코드의 평가가 완료된다(단락 평가)
프로퍼티가 메소드인데 조건적으로 호출해야한다거나, 동적으로 프로퍼티명을 알아내서 객체 프로퍼티에 접근해야하는 경우에도 '?.'를 활용할 수 있다.
객체의 프로퍼티를 제거해야할 때도 옵셔널 체이닝을 활용할 수 있다.(예: delete person.school?.name)
6. 객체를 원시형으로 변환하기
객체끼리의 숫자 연산, 부등호 연산을 하거나 객체를 alert의 매개변수로 전달할 시 원시형으로의 자동 형변환이 발생한다.
이 과정에서 어떤 연산이었는지에 따라 형변환에 사용되는 'hint'라는 값이 결정되고 그에 따라 다른 로직을 수행할 수 있다.
hint엔 string, number, default가 존재하는데, 보통 Date를 제외하곤 string과 number+default, 두 가지 케이스만 핸들링한다.
커스텀 형변환 로직을 구현하는 방법으로는 Symbol.toPrimitive, toString, valueOf 세 가지가 있는데 보통은 toString이 많이 활용된다.
주의할 점으로는, 형변환의 반환 값은 항상 원시형이어야한다는 것이다.
*형변환은 로깅, 디버깅 용도로 활용된다.