객체 리터럴 (모던 자바스크립트 Deep Dive)

 

10.1 객체란?

• 자바스크립트는 객체 기반의 프로그래밍 언어
• 원시 값을 제외하고는 모두 객체이다.
• 객체
  • 프로퍼티의 집합

❓ 일반 함수? 메서드?

함수는 메서드를 포함한다. 함수가 객체의 프로퍼티로 저장되면 그것은 메서드이다. → 메서드는 객체가 없으면 없는 것 함수는 객체와 관계없이 독립적이다. 메서드는 객체에 종속적이다. 메서드를 수행하려면 반드시 객체를 통해서 수행하여야 한다. 메서드 동작의 주체는 해당 객체. 자바스크립트에서의 객체? 자바스크립트 내장 객체 : Built-in Object Global, Object, String, Number, Boolean, Data, Array, Math, RegExp, Error 등 브라우저 내장 객체 : Native Object 자바스크립트 엔진이 빌드될 때 생성되는 객체 브라우저 객체 모델(BOM), 문서객체모델(DOM) 등 사용자 정의 객체 : Host Object 사용자가 생성한 객체

❓ 브라우저 객체 모델 (BOM) : Browser Object Model
- window, location, navigator, history, screen 등 (링크 이미지 참조)

참조
- https://velog.io/@canonmj/함수와-메서드의-차이는-object-심화이해
- https://cbw1030.tistory.com/46

 

 

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

클래스 기반 객체지향 언어 (C++, Java) 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자 호출하여 인스턴스 생성

• 자바스크립트는 프로토타입 기반 객체지향 언어
  • 다양한 객체 생성 지원
    • 객체 리터럴 : {}
    • Object 생성자 함수
    • 생성자 함수
    • Object.create 메서드
    • 클래스(ES6)

 

10.3 프로퍼티

• 키와 값으로 구성
  • 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
  • 값 : 모든 값
• 프로퍼티 나열시 , 로 구분
• 프로퍼티 키는 식별자 네이밍 규칙을 따르지 않으면 따옴표로 감싸야한다.
• 동적 프로퍼티 키 생성시엔 [] 로 묶어주자
  • obj[key] = value;
• 객체 안에 중복되는 프로퍼티 키 선언시 에러 발생하지 않고, 덮어 씌우는 것에 주의!

 

10.5 프로퍼티 접근

• 마침표 표기법
  • object.key
• 대괄호 표기법
  • object['key']
• 객체에 존재하지 않는 프로퍼티 접근시 undefined 반환, 참조 에러 미발생..

 

10.8 프로퍼티 삭제

• delete 연산자 이용
  • delete object.key;
• 존재하지 않는 프로퍼티를 삭제해도 에러는 나지 않는다.

 

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

// 프로퍼티 축약 표현
let x = 1, y = 2;
const obj = { x, y };
console.log(obj); // {x: 1, y: 2}

// 계산된 프로퍼티 이름, 동적 프로퍼티 키
const test = 'jiyeon';
let i = 0;
const obj = {
	[`${test}-${i++}`]: i,
	[`${test}-${i++}`]: i,
	[`${test}-${i++}`]: i
};
console.log(obj); // {jiyeon-0: 1, jiyeon-1: 2, jiyeon-2: 3}

// 메서드 축약 표현
const one = {
	test() {
		console.log('yeeeeeah!');	
	}
};

one.test(); // 'yeeeeeah!'