[JavaScript Deepdive] 10장 객체 리터럴

10장 객체 리터럴

---

10.01. 객체란?

객체란 0개 이상의 프로퍼티의 집합으로 자바스크립트는 객체 기반의 프로그래밍 언어로 원시값을 제외한 나머지 값 (함수, 배열, 정규 표현식 등) 은 모두 객체이다

또한,  원시 타입은 단 하나의 값만 나타내기 때문에 원시값은 변경 불가능한 값이지만 객체타입은 다양한 타입의 값을 구성한 복합적인 자료 구조 이기 때문에 변경 가능한 값이라고 할 수 있다.

ex )

// 원시타입
let str = "hello";
str = "world"; // 이전의 "hello" 값은 변경되지 않고 새로운 "world" 값으로 대체

// 객체타입
let obj = { name: 'John', age: 30 };
obj.name = 'Jane'; // 객체의 속성 값 변경
obj.city = 'New York'; // 객체에 새로운 속성 추가
delete obj.age; // 객체의 속성 삭제

✔ 프로퍼티란?

key와 value로 구성되며 자바스크립트에서 함수는 일급 객체이기 때문에 함수도 프로퍼티로 사용이 가능하다.
단, 프로퍼티 값이 함수일 경우 구분을 위해 메서드라 부른다.

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

ex )

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

---

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

*  객체를 생성하는 방법

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

* 객체 리터럴이란?

리터럴은 약속된 문자나 기호를 사용해 값을 생성하는 표기법으로 이러한 이유로 객체 생성 방법 중에서 일반적으로 객체 리터럴을 사용, 객체리터럴 외의 객체 생성 방식은 모두 함수를 사용

• 객체 리터럴은 중괄호({}) 내에 0개 이상의 프로퍼티를 정의
• 객체 리터럴의 중괄호는 코드 블록을 의미하는 것이 아니라 값으로 평가되는 표현식이기 때문에
  닫는 괄호 뒤에는 세미콜론(;)을 붙인다.

* 객체를 만드는 방법

ex)

  let user ={}, //객체 리터럴 문법
  let user = new Object(); //객체 생성자 함수
  --- ---
  let obj = Object.create(null , { x: { value: 100, enumerable: true },
  y: { value: 200, enumerable: true } }); //Object.creat 메서드
  // null은 새로 만든 객체의 프로토타입이어야 할 객체,
  / /Object.create()를 이용해 기존의 객체를 상속해 확장하는데 사용

---

10.03. 프로퍼티

• 객체는 프로퍼티 집합, 키와 값으로 구성
• 프로퍼티 키는 식별자 역할을 하지만 반드시 식별자 네이밍 규칙을 따르지 않아도 된다.
• 단 식별자 네이밍 규칙을 따르지 않는 이름은 반드시 따옴표를 사용
• 예약어로도 생성가능 하나 예상치 못한 에러가 발생할 수 있어서 권장하지 않는다.

- 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
- 프로퍼티 값 : 자바스크립트에서 사용할 수있는 모든 값

  let person = {
    firstName : 'jang', //식별자 네이밍준수
    'last-name' : 'han' //식별자 네이밍 준수하지 않는 프로퍼티 키
  };

  let foo = {
    '' : '' //빈 문자열도 프로퍼티 키로 사용가능
  }

 //키에 숫자리터럴 사용하면 내부적으로는 문자열로 변환
  let num = {
    0:1,
    1:2
  }
  console.log(num) // {0:1 , 1:2}

   // 프로퍼티 키를 중복선언하면 나중에 선언한 것으로 덮어씌워진다.
  let test = {
    name :'Lee',
    name :'Kim'

  }
  console.log(test) // {name:'Kim'}

  // 프로퍼티 축약표현

  let x  = 1, y = 2;
  let obj ={
    x:x,
    y:y
  }

  let obj ={x,y}

 

---

10.04. 메서드

자바스크립트의 함수는 객체라서 프로퍼티 값으로도 사용가능,
프로퍼티 값이 함수일 경우 일반함수와 구분하기 위해 메서드라고 한다.

// method
let circle = {
  radius: 5, // 프로퍼티

  getDiameter: function() { // 메서드
    return 2 * this.radius; // this는 객체 자신(circle)을 참조
  }
};

console.log(circle.getDiameter());//10

---

10.05. 프로퍼티 접근

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

ex )

  let person =  {
    name: "Lee"
  }
  console.lof(person.name)
  console.lof(person["name"])
  // 대괄호 프로퍼티 사용시 반드시 따옴표를 감싼 문자열이여야 한다.
  감싸지 않으면 다른 변수의 값을 넣는것과 동일

---

10.06. 프로퍼티 동적 생성

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

let key = "age";
let obj = {};

obj[key] = 20
obj.name = 'JANG'
console.log(obj); {age : 20, name: JANG' }

let i = 0;
let prop = "prop";
let obj = {};

obj[prop + "-" + ++i] = i;
obj[prop + "-" + ++i] = i;
obj[prop + "-" + ++i] = i;

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

---

10.07. 프로퍼티 삭제

: delete 연산자 사용

ex )

delete obj.age;
console.log(obj); { name: JANG' }

---

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

10.08.01 프로퍼티 축약 표현

: 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다.

변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.

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

// ES6
let x = 1,
  y = 2;
// 프로퍼티 축약 표현
const obj = { x, y };
console.log(obj); // {x: 1, y: 2}

10.08.02 계산된 프로퍼티 이름

: 문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 대괄호[...]로 묶어 프로퍼티 키로 사용

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

// ES6
// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성
const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
};

---