Skip to content

Latest commit

 

History

History
94 lines (56 loc) · 4.3 KB

File metadata and controls

94 lines (56 loc) · 4.3 KB

10 객체 리터럴

10.1 객체란?

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것이 객체이다.

원시타입은 단 하나의 값만 나타내지만 객체타입은 다양한 타입의 값( 원시값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시 값은 변경이 불가능하지만 객체는 변경 가능한 값이다.

{% hint style="info" %} 프로퍼티는 속성이라는 뜻으로, 자바스크립트에서는 객체 내부의 속성을 의미. (ex. 객체 안의 key와 값들)

함수도 객체이기 때문에 프로퍼티를 가지게 된다. (ex. arguments, caller, length, name, prototype ) {% endhint %}

[프로퍼티] Property (string이나 symbol)와 (원시함수, 메서드, 객체 참조)으로 구성되어 있으며, 프로퍼티 값에 함수도 들어갈 수 있는데 이것을 그렇지 않은 프로퍼티와 구분하기 위해서 메서드라고 부른다.

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

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

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

객체 생성 방법중 가장 일반적이고 간단한 방법은 객체 리터럴( { } ) 을 사용하는 방법이다.

[인스턴스] : 클래스에 의해 생성되어 메모리에 저장된 실체를 말함 객체지향 프로그래밍에서 객체는 클래스와 인스턴스를 포함한 개념이다. 클래스는 인스턴스를 생성하기 위한 템플릿의 역할

10.3 프로퍼티

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

식별자 네이밍 규칙을 따르지 않는 프로퍼티 키에는 반드시 따옴표를 붙여야 한다.

이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 키가 덮어씌워지며 에러가 발생하지 않는다.

10.4 메서드

프로퍼티 값이 함수인 경우 일반 함수와 구분하기 위해서 메서드method 라고 부른다.

객체 내부에서 [this] : 객체 자신을 가리키는 참조변수이다.

10.5 프로퍼티 접근

프로퍼티 접근방법은 마침표 표기법 , 대괄호 표기법 두 가지가 있다.

대괄호 프로퍼티 접근 연산자 내부 프로퍼티 키는 반드시 따옴표로 감싸야 한다.

10.8 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다. 이 때 없는 프로퍼티를 삭제하면 에러 없이 무시된다.

var person = {
  name: 'Lee'
};

// 프로퍼티 동적 생성
person.age = 20;

// person 객체에 age 프로퍼티가 존재한다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
delete person.age;

// person 객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete person.address;

console.log(person); // {name: "Lee"}

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

10.9.2 계산된 프로퍼티 이름

프로퍼티 키를 동적으로 생성할수도 있다. 단, 프로퍼티 키로 사용할 표현식을 대괄호([...])로 묶어야 한다. 이를 계산된 프로퍼티 이름 coputed property name 이라고 한다.

// 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}