카테고리 없음

모던 자바스크립트 Deep Dive - 제 10장

고인호 2023. 3. 8. 21:59
반응형

<모던 자바스크립트 Deep Dive - 제 10장>

2023. 03. 08

[객체 리터럴]

 

 

10.1 객체란?)

자바스크립트는 객체 기반의 프로그래밍 언어이다. 

원시 타입은 단 하나의 값만 나타내지만

객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다. 

 

원시 타입의 값은 변경이 불가능하지만

객체 타입의 값은 변경이 가능하다. 

 

객체는 0개 이상의 프로퍼티로 구성되어 있으며,

프로퍼티는 key 와 value로  구성된다. 

 

'함수'도 프로퍼티 값으로 사용할 수 있는데, 

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해서

이는 메서드 라고 부른다. 

const counter = {
  num: 0, // -> 프로퍼티
  increase: function () {
    // -> 메서드
    this.num++;
  },
};

 

 

객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 객체지향 프로그래밍이라고 한다. 

 


 

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

C++ 이나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고

필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성.

 

자바스크립트의 다양한 객체 생성 방법 중에서 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다. 

객체 리터럴 : 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의하는 것


 

10.3 프로퍼티)

객체는 프로퍼티의 집합,

프로퍼티 = 키, 값으로 구성된다. 

 

프로퍼티 키로 사용할 수 있는 값들 중 식별자 네이밍 규칙을 따른다면 따옴표 생략가능.

따르지 않는 이름에는 따옴표 필수

const person = {
  firstName : 'inho',   // 식별자 네이밍 규칙 준수
  'last-name' : 'Ko'    // 식별자 네이밍 규칙 준수X
}

위의 코드에서 firstName에는 따옴표가 생략가능하다.

하지만 last-name 에 따옴표를 생략하면 자바스크립트는 중간의 - 를 마이너스 연산자로 인식하게 된다. 

 

+ 프로퍼티의 키에 문자열이나 심벌 값 이외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. 

---> 프로퍼티 키로 0, 1 등의 숫자값을 사용해도 암묵적 타입 변환을 통해 문자열로 반환!

 

+ 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 것을 덮어쓴다. 

 


10.4 메서드)

X


10.5 프로퍼티 접근)

프로퍼티에 접근하는 방법은 아래 두 가지다. 

  • 마침표 표기법
  • 대괄호 표기법
const person = {
  name: "inho",
};

console.log(person.name);
console.log(person['name']);

 

대괄호 표기법을 사용하는 경우, 위처럼 프로퍼티 키는 반드시

따옴표로 감산 문자열이어야한다. 

 

※ 프로퍼티의 키가 네이밍 규칙을 준수하지 않는 이름이라면 반드시 대괄호 표기법을 사용해야한다. 


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

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고, 값이 할당된다. 

 


10.8) 프로퍼티 삭제

delete 연산자를 이용해 객체의 프로퍼티를 삭제할 수 있다. 

const person = {
  age : 20,
};

delete person.age;

 


https://link.coupang.com/a/F6ksK

 

모던 자바스크립트 Deep Dive:자바스크립트의 기본 개념과 동작 원리

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

반응형