10장, 객체 리터럴

https://reeny404.tistory.com/7

6장, 데이터 타입

 

 

 자바스크립트가 제공하는 데이터 타입 7종류 중 단 하나 뿐인 객체 타입(object type)은, 원시타입과는 달리, 다양한 타입의 값을 하나의 단위로 구성한 복합적 자료구조(data structure)이다. 원시타입은 변경 불가능한(immutable value)이지만 객체는 변경 가능한 값(mutable value)이다.

 

 

 객체는 0개 이상의 프로퍼티(property)로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)로 구성된다.

프로퍼티 값이 함수일 경우, 이를 메서드(method)라고 부른다.

var person = {
    name : '떼굴펜',            // 프로퍼티 키는 name, 프로퍼티 값은 '떼굴펜'
    age : 5,                         // 프로퍼티 키는 age,   프로퍼티 값은 5
    write : function () {        // 프로퍼티 키는 write, 프로퍼티 값은 함수로 정의되어 있음
         console.log('글 쓰는 중');
     }
}

 

 

(1) 객체 리터럴

 자바스크립트는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원한다.

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

 

예시) 객체 리터럴을 사용해 생성하기

// 예시 1. 프로퍼티 정의하지 않으면 빈 객체가 생성된다.
var empty = {};
console.log(typeof empty);    // object
console.log(empty);                // {}

// 예시2.
var person = {
     name : '떼굴펜',
     sayHello : function () {
          console.log(`안녕! 내 이름은 ${this.name}이야!`); 
     }
};

console.log(typeof person);    // object
console.log(typeof person);    // { name : '떼굴펜', sayHello : f }

 

참고) this 키워드 : 객체 자기 자신, 본인을 가리키는 참조변수이다.

매개변수 혹은 인자로 동일한 이름이 사용될 때 헷갈리지 않기 위해, 내 프로퍼티 key값에 접근하겠다고, 명확히 표현하기 위해 사용한다.

 

 

(3) 프로퍼티

 프로퍼티는 키와 값으로 구성된다. 프로퍼티 키는 값에 접근할 수 있는 이름으로서, 식별자 역할을 한다.

프로퍼티 키는 문자열이며, 식별자 네이밍 규칙을 준수한다면 따옴표를 생략할 수 있다.

 

❗존재하는 프로퍼티 키를 중복 선언하면 에러가 나지 않고, 앞서 선언한 프로퍼티를 덮어쓴다.

 

 

(4) 프로퍼티 접근

 프로퍼티 값에 접근하는 방법은 아래와 같이 두 가지 이다.

• 마침표 표기법
• 대괄호 표기법

var person = { name : '떼굴펜' };

console.log(person.name);       // 마침표 표기법
console.log(person['name']);    // 대괄호 표기법

console.log(person[name]);     // ReferenceError 발생 (name을 변수 식별자로 인식해 에러 발생)
console.log(person.age);         // undefined (존재하지 않는 프로퍼티에 접근했을 때 undefined 반환)

 

 

(4) 프로퍼티 값 갱신

 이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신된다.

var person = { name : '떼굴펜' };
person.name = '티스토리';

console.log(person.name);    // "티스토리"

(4) 프로퍼티 동적 생성

 존재하지 않는 프로퍼티에 값을 할당하면, 동적으로 프로퍼티가 생성되어 추가 후 값이 할당된다. 

var person = { name : '떼굴펜' };
person.age = 20;

console.log(person);    // { name : '떼굴펜', age : 20 };

 

 

(4) 프로퍼티 삭제

 delete 연산자는 객체의 프로퍼티를 삭제한다. 만약 존재하지 않는 프로퍼티를 삭제하면 에러 없이 무시된다.

var person = { name : '떼굴펜' };
delete person.name;

console.log(person);    // { }