Chapter 10 객제 리터럴

29 Jul 2024 in Frontend / Js / Javascript

Object Literals

1회독
2회독

1회독

10.1 객체란?

객체 = !원시값 인 모든 것
- 함수, 배열, 정규표현식, 날짜, 오류, 맵, 셋, …
object type aka reference type
메서드 method: 객체 프로퍼티에 함수 할당 (함수는 일급 객체이기 때문)
- 일반 함수와 구분하기 위해서, 메서드라고 부름
객체:
- 프로퍼티 (property): 객체의 상태를 나타내는 값 (data)
- 메서드 (method): 프로퍼티를 참조하고 조작할 수 있는 동작 (behavior)

10.2 객체 리터럴에 의한 객체 생성

클래스 기반 객체지향 프로그래밍 (Java, C++ .. using instance)
- 인스턴스: 메모리에 저장되어 실제로 존재하는 것
- 클래스: 인스턴스 (객체) 생성을 위한 템플릿
프로토타입 기반 객체지향 프로그래밍 (JavaScript)
- 클래스 없이 객체를 생성하고 객체 간 상속을 통해 객체를 확장
- 객체 생성 다양하게 가능 (리터럴, 생성자 함수, Object.create…etc)
객체 리터럴: literally creating object using {} (유연하고 강력함)
```
const person = {
  name: "Lee",
  sayHello() {
    console.log(`Hello! My name is ${this.name}.`);
  },
};
```
- 만들 때 프로터리 포함 가능
- 추후 동적으로도 프로퍼티 추가 가능

10.3 프로퍼티 property

property 식별자 네이밍 규칙 준수 (camelCase) 안하면 " "로 감싸서 사용 (for Js engine)
```
const obj = {
  firstName: "Gil Dong",
  "last-name": "Lee",
};
```
문자열 외 다른 타입 프로퍼티 이름 가능 (자동으로 문자열로 변환)
var, function 키워드 사용 가능 but ofc 권장 X
중복 프로퍼티 덮어씌워짐 (에러 발생 X)

10.4 메서드 method

Method: 객체에 묶여 있는 함수

this (객체 자신을 가리키는 참조 변수) 활용해 내부 프로퍼티 접근/조작

10.5 프로퍼티 접근

. (dot notation)
[] (bracket notation) 사용
- 반드시 "문자열"로 감싸진 프로퍼티 키만 접근 (else ReferenceError)
- (!문자열은) 식별자로만 해석되기 때문
⛔️ 단, 객체의 미존재 프로퍼티 접근 시 undefined 반환 (에러 X)
fun fact:
```
person.last - name;
```
1. person.last 평가 $\rightarrow$ undefined (undefined-name)
2. name이라는 식별자찾음 (not property key)
  - Node JS: ReferenceError: name is not defined
  - Browser: window.name 접근 (전역 객체 프로퍼티) -> $\rightarrow$ 기본값 "" $\rightarrow$ undefined-'' $\Rightarrow$ NaN

10.6, 7 프로퍼티 값 갱신, 동적생성

가능~!

10.8 프로퍼티 삭제

delete 연산자 사용 (프로퍼티 삭제)
- 미존재 프로퍼티 삭제 시 에러 없이 무시됨
- 삭제 시 undefined 반환 (프로퍼티 존재 X)
- 삭제 불가능한 프로퍼티: configurable: false (strict mode에서 에러)

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

property shorthand (프로퍼티 축약)
- 프로퍼티 값이 변수와 동일한 이름일 때, 변수 이름 생략 가능
- name: name $\Rightarrow$ name 자동생성됨
computed property name (계산된 프로퍼티 이름): uses []
- 프로퍼티 키를 동적으로 생성 가능
- ex: obj["x" + 1] = 1;
- 객체 리터럴 내부에서도 키 동적 생성 가능

method definition shorthand (메서드 축약)

메서드를 정의할 때 function 키워드 생략 가능

const obj = {
  foo1: function () {
    return "bar";
  },
  // function 키워드 생략
  foo2() {
    return "bar";
  },
};

2회독

JS 는 객체 기반의 프로그래밍 언어

원시값 제외 모든게 JS 에서는 객체
객체: Mutable, { properties, methods }
- 프로퍼티: [key, value]
  - key: string, symbol
  - value: any (primitive, object, function)…
- 메서드: 객체의 값으로 할당된 함수, this로 객체 자신의 프로퍼티 참조 가능
OOP: 객체 = [class, instance]
- 클래스: 템플릿 역할. 사전 정의
- 인스턴스: 사용 시 클래스에 의해 생성된, 실제로 메모리에 저장된 것
프로토타입 기반 OOP (JS) : 객체
- 객체 리터럴 또는 생성자 함수들 (a lot) 에 의해 객체 생성 가능
프로퍼티 특성들
- 동적 생성 가능
- 문자열이나 심벌 값 이외의 값들은 암묵적 타입 변환되어 문자열로 저장
- 중복 시 덮어씌워짐 (NO ERROR!)

⁉️ 동적 생성된 Prop의 value (method) 에서는 this 를 사용할 수 있는가?

const book = {
  title: "JS Deep Dive",
  page: 600,
};

book.getTitle = function () {
  console.log(`We are reading ${this.title}!`);
};

book.getTitle(); // "We are reading JS Deep Dive!"

book.getPage = () => {
  console.log(`We are reading ${this.page} pages!`);
};

book.getPage(); // "We are reading undefined pages!"

화살표 함수는 this 바인딩 X, window 바인딩 O,

만약 this.name이었다면 Undefined 대신 window.name (빈 문자열) 반환했을 것임
예:

const person = {
  "last-name": "Lee",
  1: 10,
};

person["last-name"]; // ✅ "Lee"
// ❌ (person.last, 산술연산자 -, window.name (빈 문자열)) => undefined - '' => 숫자로 type coercion => NaN
person.last-name; 
person[1]; // ✅ 10 (person['1'] 으로 type coercion 됨)
person["1"]; // ✅ 10

프로퍼티 삭제 (delete): 없으면 에러 없이 무시됨

1회독