JavaScript 객체 타입(Object)

---

객체 타입(Object)

객체란 뭘까?

-객체는 0개 이상의 프로퍼티로 구성된 집합이다.
-여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이라고 할 수 있다.

var person = {
  name: 'Lee',
  age: 20
}

위의 코드에서 name: 'Lee'와 age: 20을 각각 프로퍼티라고 볼 수 있으며 name과 age를 프로퍼티 키, 'Lee'와 20을 프로퍼티 값으로 볼 수 있다.

자바스크립트는 객체 기반의 프로그래밍 언어이다. 자바스크립트에서 원시 값(숫자 타입, 문자열 타입, 불리언 타입, undefined 타입, null 타입, symbol 타입)을 제외한 나머지 값은 모두 객체라고 본다. 원시 타입은 변경 불가능 한 값immutable value이지만 객체는 변경 가능한 값mutable value이란 차이가 있다.

자바스크립트에서 사용하는 모든 값은 프로퍼티 값으로 사용될 수 있다. 심지어 함수도 프로퍼티 값으로 사용될 수 있다. 이 때 함수가 프로퍼티 값으로 사용 될 경우 일반 함수와 구분하기 위해 메서드라 부른다.

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

var counter = {
  num : 0,                    // -> 프로퍼티
  increase : function() {        // -> 메서드
    this.num++;
  }
}

객체 생성

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

객체 생성 방식 중 가장 일반적이고 간단한 방식은 객체 리터럴을 사용하는 방법이다. 리터럴^literal은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해서 값을 생성하는 표기법이다.

중괄호{ ... }내에 0개 이상의 프로퍼티를 정의하면 된다.

var person = {
  name: 'Lee',
  age: 20
};

만약 프로퍼티를 정의하지 않으면 빈 객체가 생성된다.

var empty = {}; // 빈 객체
console.log(typeof empty); // object

프로퍼티

프로퍼티에 접근하는 방법은 두 가지가 있다.

마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
대괄포 프로퍼티 접근 연산자([ ... ])를 사용하는 대괄호 표기법

var person = {
  name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name);
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']);                   

만약 존재하지 않는 프로퍼티에 값을 할당하게 되면 어떻게 될까? 그러면 프로퍼티가 동적으로 생성되어 추가되고 값이 자동으로 할당된다. 다른 프로그래밍 고급 언어에 비해 확실히 유연한 편이다. 하지만 그 만큼 코드를 꼼꼼하게 체크해야한다는 의미이기도 하다.

var person = {
  name: 'Lee'
};

person.age = 20;
console.log(person); // { name: 'Lee', age: 20 }

delete 연산자로 프로퍼티를 삭제할 수도 있다.

var person = {
  name: 'Lee'
  age: 20
};

delete person.age;

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

ES6 추가 객체 리터럴 확장 기능

프로퍼티 축약 표현

객체에서 변수 이름과 프로퍼티 키 값이 동일한 경우 프로퍼티 키를 생략할 수 있다.

//ES5
var x = 1, y = 2;
var objES5 = {
  x: x,
  y: y
};
console.log(objES5); // {x:1, y:2}

//ES6
const objES6 = {
      x,
      y
};
console.log(objES6); // {x:1, y:2}

``를 활용한 객체 리터럴 내부 동적 키 생성

예시를 먼저 보자

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

obj 객체 리터럴 안에서 바로 prefix+'-'+ ++i : i 를 넣을 수 없었다. 다시 말해 동적으로 키를 만들어서 넣는 게 불가능 했다. 하지만 ES6에서는 이를 개선해서 바로 객체 안에 동적으로 키를 넣을 수 있도록 만들었다.

// ES6
const prefix = 'prop';
let i = 0;
var obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

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

메서드 축약 표현

마찬가지로 예시만 봐도 쉽게 알 수 있다. ES6에서는 메서드를 정의할 때 function키워드를 생략할 수 있다.

// ES5
var obj = {
    name: 'Lee',
    sayHi: function(){
        console.log('Hi'+ this.name);
    }
};

obj.sayHi(); // Hi Lee

// ES6
var obj = {
    name: 'Lee',
    sayHi(){
        console.log('Hi'+ this.name);
    }
};

obj.sayHi(); // Hi Lee

객체의 특징

• 객체는 변수이지만 여러 개의 값이 포함될 수 있다.
• 객체는 각각의 key/value로 정보를 나열한다.
• Key는 문자열 또는 기호여야 하지만 value는 모든 유형이 될 수 있다(함수도 가능)
• 한 쌍의 key/value를 Properties라 부르고, 각 Properties는 쉼표로 구분한다.
• 객체 변수를 복사하면 참조가 복사되고 객체가 복사되지 않는다. (얕은 복사)

---