자바스크립트 딥다이브 10장. 객체 리터럴

10.1 객체란? ⭐

• 자바스크립트는 객체 기반 프로그래밍 언어이며, 원시 값을 제외하고 자바스크립트를 구성하는 모든 것이 '객체'

• 객체: 0개 이상의 프로퍼티로 구성된 집합.

• 프로퍼티

  • 키와 값으로 구성됨
  • 여기서, 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.
  • 프로퍼티 값이 함수면 일반 함수와 구분하기 위해 메서드라 부른다.

• 따라서, 객체는 프로퍼티와 메서드로 구성된 집합체

  • 프로퍼티: 객체의 상태를 나타내는 값(data)
  • 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

객체는 프로퍼티와 메서드를 통해 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다
1) 객체의 상태를 나타내는 값인 프로퍼티
2) 이 프로퍼티를 참조하고 조작할 수 있는 메서드

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

객체 생성 방식

• 클래스 기반 객체지향 언어 (C++, 자바)
  • 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출, 인스턴스를 생성한다
    (클래스 - 인스턴스를 생성하기 위한 템플릿 역할, 인스턴스 - 클래스에 의해 생성되어 메모리에 저장된 실체)
• 프로토타입 기반 객체지향 언어 (자바스크립트)
  • 클래스 기반 객체지향 언어와 달리 다양한 객체 생성 방법을 지원함

    1. 객체 리터럴
    2. Object 생성자 함수
    3. 생성자 함수
    4. Object.create 메서드
    5. 클래스(ES6)

객체 리터럴

• 가장 간단하고 일반적인 생성 방법
• 중괄호 ({...}) 내 0개 이상의 프로퍼티 정의

let person = {
	name: 'kim',
    sayHello: function() {
    	console.log(`안녕, 나는 ${this.name}`);
     }
};

❗ 객체 리터릴의 중괄호는 코드 블럭을 의미하지 않는다

• 코드블럭의 닫는 중괄호 뒤에는 세미콜론 X, 객체 리터럴은 값이기 때문에 세미콜론 O

• 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식이다. (클래스 기반이면 클래스 정의 -> new 연산자와 함께 생성자 호출 해야 됨)

객체 리터럴 외의 객체 생성 방식

• 모두 함수를 사용해 객체를 생성

10.3 프로퍼티

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

사용 가능한 값

• 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 or 심벌
• 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키

• 역할: 프로퍼티 값에 접근할 수 있는 이름. 식별자 역할
• 식별자 네이밍 규칙
  • 규칙 준수하는 키: 따옴표 생략 가능
  • 규칙 준수 X 키: 따옴표 사용해야 함
• 특징
  • 자동 형변환: 프로퍼티 키에 숫자 등 문자열, 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 됨
  • 덮어쓰기: 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티 덮어씀

		var foo = {
			0: 1,
    		1: 2,
    		2: 3,
            0: 4, // 0: 1 덮어씀
            function: '' // 예약어를 프로퍼티 키로 사용해도 에러 발생 X, 그러나 권장하지 않음
		};

10.4 메서드

• 정의: 객체에 묶여 있는 함수. 프로퍼티 값으로 사용된 함수.
• 메서드 내부에서 사용하는 this 키워드는 객체 자신을 가리키는 참조변수 (22장)

var circle = {
	radius: 5, // < 프로퍼티
    
    //원의 지름
    getDiameter: function() { //메서드
    	return 2 & this.radius; //this는 circle을 가리킨다.
    }
};

console.log(circle.getDiameter()); // 10

10.5 프로퍼티 접근

접근 방법

1. 마침표 표기법
   • 식별자 네이밍 준수하지 않는 프로퍼티 키는 사용 불가능
2. 대괄호 표기법
   • 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이여야 함
   • 그렇지 않으면? 자바스크립트 엔진이 식별자로 해석함

실행결과

• Node.js 환경에서 person.last-name을 실행하면?
  1. 자바스크립트 엔진이 person.last를 평가 -> undefined
  2. 자바스크립트 엔진이 'undefined - name'을 계산하기 위해 name이라는 식별자를 찾는다
  • Node.js에는 name 식별자 선언이 없으므로 ReferenceError 발생
  • 브라우저 환경에서는 name이라는 전역변수(전역 객체 window의 프로퍼티)가 암묵적 존재하기 때문에 undefined - "" 가 되어 NaN 출력됨

프로퍼티 값 변경

var person = {
	name: 'Lee'
}

• 10.6 프로퍼티 값 갱신

person.name = 'Kim';
console.log(person) // {name: 'Kim'}

• 10.7 프로퍼티 동적 생성
  • 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 값 할당됨

person.age = 20;

console.log(person) // {name: 'Kim', age: 20}

• 10.8 프로퍼티 삭제
  • delete 연산자는 객체의 프로퍼티를 삭제한다. (존재하지 않는 프로퍼티 삭제하면 에러없이 무시됨)

delete person.age

console.log(person) // {name: 'Kim'}

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

프로퍼티 축약 표현

• 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있음

let x = 1, y = 2;

const obj = { x, y };

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

계산된 프로퍼티 이름

• 문자열 or 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있음
• 단, 프로퍼티 키로 사용할 표현식을 대괄호([...])로 묶어야 함 <- 이를 계산된 프로퍼티 이름이라고 함

//ES5
var prefix = 'prop';
var i = 0;
var obj = {};

// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성 obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
console . log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

• ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.

// ES6 const prefix = 'prop';
let i = 0;

// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성
const obj = { 
	[`${prefix}-${++i}`]: i ,
	[`${prefix}-${++i}`]: i ,
	[`${prefix}-${++i}`]: i 
};

console . log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

메서드 축약 표현

• ES6에서는 메서드를 정의할 때 function키워드 생략 가능

let person = {
	name: 'kim',
    sayHello: function() {
    	console.log(`안녕, 나는 ${this.name}`);
     }
};

let person = {
	name: 'kim',
    sayHello() {
    	console.log(`안녕, 나는 ${this.name}`);
     }
};