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

자바스크립트는 객체 지향 프로그래밍언어로 원시타입을 제외한 모든 값이 객체

✅ 원시타입

- 하나의 값만 나타냄

- 변경 불가능한 값(immutable value)

✅ 객체

- 다양한 타입의 값으로 구성된 자료구조

- 변경 가능한 값(mutable value)

객체는 0개 이상의 프로퍼티로 구성되는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성됨

단, 프로퍼티값이 함수인 경우 메서드(method)로 칭함

- 프로퍼티: 객체의 상태를 나타내는 값

- 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작

 

자바스크립트에서 객체 생성하는 다양한 방법

▪️ 객체 리터럴 ⇨ 객체 리터럴로 객체를 생성함으로써 프로퍼티를 동적으로 추가할 수도, 객체생성과 동시에 프로퍼티를 만들 수도 있는 자스의 유연함!

▪️ Object 생성자 함수

▪️ 생성자 함수

▪️ Object.create 메서드

▪️ 클래스(ES6)

 

// 프로퍼티 나열시 쉼표로 구분
let person={
  name:'ny',
  age:23,
  job:'student'
};

// 나중에 선언한 것이 앞에 것을 덮어씀
let person={
  age:22,
  age:23
} ;

person.age // 23

✔️ 오류가 생길 수도 있으므로 프로퍼티 키에 예약자 사용 X + 식별자 네이밍 규칙을 따라서 생성

❗️ 이미 존재하는 프로퍼티키를 중복 선언시 나중에 선언한 프로퍼티가 먼저 선언한 것을 에러없이 덮어씀

❗️ 위의 경우 값도 같이 갱신된다.

 

person['name'] // 'ny'
person.name // 'ny'

person.school // undefined

✔️ 마침표 표기법 / 대괄호 표기법으로 프로퍼티 값에 접근 가능

❗️ 존재하지 않는 프로퍼티에 접근시 ReferenceError가 아닌 undefined 반환

 

let person = {
  name:'ny',
  age: 23
}

person.job='student'

console.log(person); // {name:'ny', age: 23, job: 'student'}

delete person.job 
console.log(person); // {name:'ny', age: 23}

delete person.job // job 프로퍼티가 더이상 없음에도 에러 발생 X
console.log(person); // {name:'ny', age: 23}

✔️ 존재하지 않는 프로퍼티에 값을 할당하여 프로퍼티 동적 추가 가능

✔️ delete 연산자로 객체의 프로퍼티 삭제 ⇨ 존재하지 않는 프로퍼티를 delete해도 에러 발생 X

 

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

▪️ 프로퍼티 축약 표현

- 프로퍼티 값이 변수에 할당된 값(식별자 표현식)일 수 있음

- 변수이름과 프로퍼티키가 동일할 경우 프로퍼티키 생략 가능 → 프로퍼티키는 변수이름으로 자동생성

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

console.log(obj) // {x: 1, y: 2}

// (변수이름=프로퍼티키)일 경우 축약 가능
let obj={x,y}

console.log(obj) // {x: 1, y: 2}

▫️ 계산된 프로퍼티 이름(computed property name)

- 프로퍼티키를 동적으로 생성가능

- 프로퍼티키로 사용할 표현식을 대괄호로 묶어야 함

- ES5에선 프로퍼티키 동적 생성시 객체 리터럴 외부에서 대괄호 표기법을 사용해야 했지만, ES6에선 객체 리터럴 내부에서도 생성 가능

const num='num';
let i=0;

let obj={
  [`${num}${++i}`]:i,
  [`${num}${++i}`]:i,
  [`${num}${++i}`]:i,
}

console.log(obj); // {num1: 1, num2: 2, num3: 3}

▪️ 메서드 축약 표현

- ES6에선 메서드 정의시 function 키워드를 생략하고 축약표현 사용 가능

- 단, 메서드 축약표현으로 정의한 메서드는 프로퍼티에 정의한 함수와 다르게 동작한다

let obj={
  name:'ny',
  age:23,
  sayHi: function(){
  console.log('hi '+this.name);
  }
}

console.log(obj.sayHi()) // hi ny

// function 키워드 생략 가능 -> ES6
let obj={
  name:'ny',
  age:23,
  sayHi(){
  console.log('hi '+this.name);
  }
}

console.log(obj.sayHi()) // hi ny