객체 리터럴

객체란?

원시타입은 하나의 값만 나타내는 변경 불가능한 값 이지만 객체타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다. 즉 객체는 변경 가능한 값이다.

let person = {
   name: 'Lee', // 프로퍼티 
   age : 20    // 프로퍼티

// name, age 프로퍼티 키
// 'Lee', 20 프로퍼티 값 
}

let conter = {
   num : 0, //프로퍼티 
   increase : function (){  // 메서드
    this.num++; 
  }
}

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

C++ / Java 같은 경우 클래스를 사전에 정의한 뒤 생성자 함수와 new 연산자와 함께 사용해 인스턴스를 생성한다.

📄 인스턴스: 클래스에 의해 생성되어 메모리에 저장된 실체를 말함, 클래스와 인스턴스를 포함한 개념

• 객체 생성 방법

1. 객체 리터럴
2. Object 생성자 함수, new Object();
3. 생성자 함수
4. Object.create
5. 클래스

let person = {
name : 'Lee',
sayHello : function (){
  console.log(`Hello My name is ${this.name}.`)
}
};

console.log(typeof person); // object
console.log(person) // {name: "Lee", sayHello: f}

프로퍼티

객체는 프로퍼티 집합이며, 프로퍼티는 키와 값으로 구성됨

const person = {
  name: 'Lee', // 프로퍼티 키:name -> 빈 문자열을 포함하는 모든 문자열과 심벌 값 ,  프로퍼티 값:'Lee' -> 자바스크립트에서 사용할 수 있는 모든 값
};

❗프로퍼티 유의사항

• 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야한다.
• 프로퍼티 key 이름을 정할 때 네이밍 규칙을 준수해야한다.

const person = {
   firstName : 'Boa', // 규칙을 준수한 프로퍼티 키 
   'last-name': 'Lee' //  준수하지 않은 프로터티 키 -> `-` 는 연산자가 있는 표현식으로 인식한다. 
}

console.log(person); // {firstName : "Boa",  last-name: "Lee" }

var obj1 = {
  0: 1,
  1: 2,
  2: 3, // -> 키를 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 반환됨 
};

var obj2 = {
  var: "",
  function: "", // -> 예약어를 프로퍼티키로 사용해도 에러가 발생 X, 그러나 권장 X
};

var obj2 = {
  name : 'Lee',
  name : 'Kim' // -> 에러는 발생되지 않지만, 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 덮어씀, 권장 X
};

메서드

함수는 일급 객체로, 따라서 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용이 가능하다.

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

 getDiamater : function (){ //메서드
  return 2 * this.radius // this는 circle을 말함
 }
};

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

프로퍼티 접근

• 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법

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

let person ={
   name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee
// 대괄호 표기법에 의한 프로퍼티 접근 
console.log(person['name']); // Lee -> 대괄호 프로퍼터 접근 연산자의 내부 프로퍼티 키는 반드시 따옴표로 감싼 문자열이여야함! 

프로퍼티 값 갱신

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

var obj2 = {
  name : 'Lee',
};

obj2.name = 'kim'
console.log(obj2) // {name: "kim"}

프로퍼티 동적 생성

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

var obj2 = {
  name : 'Lee',
};

obj2.age = 20
console.log(obj2) // {name: "kim", age : 20}

프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다.

var obj2 = {
  name : 'Lee',
};

obj2.age = 20

delete.obj2.age; // -> age 프로퍼티가 존재하기때문에 삭제됨
delete.obj2.address; // ->  프로퍼티가 존재하지 않기때문에 에러가 발생되지 않고 무시됨

console.log(obj2) // {name: "kim"}

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

10.9.1 프로퍼티 축약 표현

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

let x =1, y =2

let obj2 = {
  x = 1,
  y = y
};

console.log(obj2) // { x: 1, y: 2}

let x =1, y =2

let obj3 = { x , y };

console.log(obj3) // { x: 1, y: 2}

계산된 프로퍼티 이름

• 문자열 또는 문자열로 타입 변환 가능 값으로 평가되는 표현식을 프로퍼티 키를 동적으로 생성 할 수도 있다.

let prefix = "prop";
let i = 0;

let obj = {};
// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성 
obj[prefix + "-" + ++i] = i; // obj["prop-1"] = 1;
obj[prefix + "-" + ++i] = i; // obj["prop-2"] = 2;
obj[prefix + "-" + ++i] = i; // obj["prop-3"] = 3;

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

매서드 축약 표현

• 객체 내 메서드를 정의할 때, function 키워드를 쓰지 않아도 된다.

const obj = {
    sayHi(): console.log(`Hi`);
}
obj.sayHi(); // Hi