[JS스터디] 객체 리터럴

객체

• 자바스크립트: 객체기반 프로그래밍 언어 (cf> 자바, C: 클래스 기반)
  • 원시값 외의 모든 값은 객체
  • 원시값은 변경 불가능, 객체는 변경 가능
• 객체: 프로퍼티로 구성된 집합
  • 객체를 생성하는 방법: 객체 리터럴 { } / 함수로 생성
• 프로퍼티: 키와 값으로 구성
  • 키는 <식별자 네이밍 규칙>을 따라야 한다. (따르지 않을 경우 따옴표로 감쌀 것)
  • 동일한 키를 중복 선언하면? 덮어씀.
  • 프로퍼티 값은 자바스크립트의 모든 값이 될 수 있음.
  • 메소드: 값이 함수인 경우 (일반 함수와 구분 위해 명칭)
• 프로퍼티 접근 방법: 1. dot연산자(.) 사용 / 2. 대괄호연산자([...]) 사용
  • !! 주의 !! 대괄호 안의 키값은 반드시 "따옴표"로 감싼 문자열 - 안 그러면 식별자로 해석
  • 객체에 존재하지 않는 프로퍼티 접근 시 -> undefined 반환 (ReferenceError X)

    여기서 ReferenceError가 아닌 undefined를 반환하는 이유?
    추측 상 객체의 프로퍼티가 동적으로 생성되면서 값을 할당하지 않은 상태라 undefined값이 자동 할당된 듯하다.

• 프로퍼티 동적 생성: 존재하지 않는 프로퍼티에 값을 할당 하면 동적으로 생성됨
• 프로퍼티 삭제: delete person.age delete person["age"]
  • 존재하지 않는 프로퍼티를 삭제해도 에러 X(ES6) 객체 리터럴 확장 기능

---

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

• 프로퍼티 축약 표현

    let x = 1, y = 2;
    const obj = { x, y }; // 프로퍼티 키 생략하고 값만으로 객체 생성 가능 !!

  위 두 코드는 모두 {x: 1, y: 2}라는 동일한 결과를 낸다. 변수 이름과 프로퍼티 값이 동일한 경우 ES6부터는 프로퍼티 키를 생략할 수 있다.
  var x = 1, y = 2; var obj = { x: x, y: y };
• 계산된 프로퍼티 이름
  • 문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식 을 사용해 프로퍼티 키 동적 생성 가능
  • 단, 이 경우 대괄호 [...] 사용

      var prefix = 'prop';
      var obj = {};
      obj[prefix + '-' + 0] = 0;

      const prefix = 'prop';
      let i = 0;
      const obj = {
          [`${prefix}-${++i}`]: i   //주목: 객체리터럴 {} 내부에서도 동적 생성 가능 with 대괄호 [...]
      };

    두 번째 ES6 코드에서 만약 객체 리터럴 내에서 대괄호 [...] 없이 시도할 경우 SyntaxError가 난다.
    

    

• 메서드 축약 표현
  • ES5: 메서드 정의하려면 프로퍼티 값에 함수를 할당

      var obj = {
          name: 'yul',
          sayHi: function() {
              ...
          }
      };

  • ES6: 메서드 정의할 때 function키워드 생략 가능

      const obj = {
          name: 'yul',
          sayHi() {
              ...
          }
      };

    • 이 경우 프로퍼티에 할당한 함수와 다르게 동작

---

* 스터디 교재: