모던 자바스크립트 Deep Dive #10. 객체 리터럴

epiphany·2024년 1월 24일
post-thumbnail

10.1 객체란?

객체: 변경 가능한 값(mutable value)

  • 0개 이상의 프로퍼티로 구성된 집합
    • 프로퍼티: 객체의 상태를 나타내는 값으로 키, 값으로 구성됨 -> {key: value}
    • 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작으로 프로퍼티 값이 함수일 경우 메서드라고 함

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

객체 생성 방법 중 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법임

  • 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성
var user = { // user라는 객체의 상태를 나타내는 값
    name: 'John',
    age: 30,
    email: 'john@example.com'
};

10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성

  • 프로퍼티 키 값은 네이밍 규칙을 따르지 않아도 되며, 네이밍 규칙을 따르지 않는 경우 따옴표를 사용
  • 네이밍 규칙을 준수하는 프로퍼티 키 사용을 권장
  • 빈 문자열도 키 값으로 사용 가능, 다만 키로서의 의미를 갖지 못함
  • 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로터피를 덮어씀 (에러 발생X)
var person = {
    firstName: 'Ung-mo',
    'last-name': 'Lee',
  	'': '',
  	firstName: 'Hello'
};

10.5 프로퍼티 접근

  • 마침표 표기법
person.firstName
  • 대괄호 표기법
person[firstName]

객체에 존재하지 않는 프로퍼티에 접근시 undefined 반환
-> 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 값이 할당됨

var person = {
    name: 'Lee'
};
person.age = 20;
// {name: 'Lee', age: 20}

10.8 프로퍼티 삭제

var person = {
    name: 'Lee',
  	age: 20
};
delete person.age;

// {name: 'Lee'}

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

프로퍼티 축약 표현

let x = 1, y = 2;

const obj = { x, y };
// {x:1, y:2}

계산된 프로퍼티 이름

  • 대괄호 표기법 사용
const prefix = 'prop';
let i = 0;

const obj = {
	[`${prefix}-${++i}`]: i,
  	[`${prefix}-${++i}`]: i,
  	[`${prefix}-${++i}`]: i
};
// {prop-1: 1, prop-2: 2, prop-3: 3}

메서드 축약 표현

const obj = {
	name: 'Lee',
	sayHi() {
    	console.log('Hi! ' + this.name);
    }
};

obj.sayHi();
// Hi! Lee
profile
iamda.tistory.com 이사 중

0개의 댓글