[모던자바스크립트 딥다이브] 10장 객체 리터럴

객체란

자바스크립트 : 객체 기반 프로그래밍 언어

• 원시값
  • 6개 (숫자, 문자열, 불리언, null, undefined, symbol)
  • 변경 불가능
• 객체
  • 원시값을 제외한 나머지 모두
  • 다양한 타입을 하나의 단위로 구성한 자료구조
  • 변경 가능
  • 0개 이상의 프로퍼티나 메서드의 집합
    • 프로퍼티 : 키, 값으로 구성됨.
      • 객체의 상태를 나타내는 값
      • num
    • 메서드
      • 프로퍼티를 참조, 조작하는 동작
      • increase

  •    var counter = { 
          num : 0,
          increase : function () { this.num++; } 
       }

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

인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체

클래스 : 클래스와 인스턴스를 포함, 틀이며 생성자이자 실체

객체 생성 방법

1. 객체 리터럴 : 중괄호, {…}
2. Object 생성자 함수
3. 생성자 함수
4. Object.create 멤서드
5. 클래스(ES6)

프로퍼티

키, 값으로 구성

• 키 : 빈 문자열을 포함하는 모든 문자열, 심벌
  • 문자열이나 심벌외의 다른 값을 사용하면 암묵적으로 형변환이 된다.
  • 이미 있는 키를 중복 선언하면 덮어씌워진다.
• 값 : 자바스크립트에서 사용할 수 있는 모든 값

메서드

프로퍼티 값이 함수(일급객체)일 경우 구분하기 위해 메서드 라고 부른다.

프로퍼티 접근

• 마침표 표기법
  • obj.name
• 대괄호 표기법
  • obj[’name’]

존재하지 않는 프로퍼티에 접근하면 undefined를 반환

프로퍼티 갱신

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

프로퍼티 동적 생성

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

프로퍼티 삭제

delete 연산자를 사용해서 객체의 프로퍼티를 삭제한다.

delete obj.name

존재하지 않는 프로퍼티를 삭제하더라도 에러가 발생하지 않는다.

ES6 객체 리터럴 확장

• 축약표현
  • 프로퍼티 키 값과 값의 변수이름이 같으면 축약해서 표현이 가능하다.

  • var name = '김말순'
    var obj = { name : name } 
    var name = '김유저' var obj = { name }

  • 메서드정의시 function 키워드를 생략하여 사용할 수 있다.

  • var obj = { num : 0, increase() { this.num+1 } }

• 계산된 프로퍼티 명
  • 객체 리터럴 내부에서도 프로퍼티 명을 계산해서 동적 생성할 수 있다.

  • var prefix = 'test_' 
    let i = 0
    var obj = {
        [`${prefix}${++i}`] : i,
        [`${prefix}${++i}`] : i,
        [`${prefix}${++i}`] : i, 
    }