객체(Object)

JavaScript 에서는 원시타입을 제외한 모든 데이터 타입은 객체(Object)입니다.
객체(Object)란 여러 속성을 하나의 변수에 저정할수 있도록 해주는 데이터 타입으로 키key와 값value으로 구성된 프로퍼티(Property)들의 집합니다.

• 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심볼 값이 들어갈 수 잇음
• 프로퍼티 값: 모든 값이 들어갈 수 있음

객체(Object)생성 방법

객체(Object)를 선언하는 방법은 세가지 정도가 있습니다.
기본object() 객체 생성자 함수 사용, 객체 리터럴 방식 사용, 생성자 함수 사용

Object() 객체 생성자 함수 사용

이 방법은 JavaScript에 내장되어 있는 Object() 생성자 함수를 사용하는 방법입니다.
new Object 를통해 빈 객체를 생성하고 객체에 프로퍼티를 할당하기

//빈 객체 생성
let person = new Object();

//person 객체의 프로퍼티 할당
person.name = "태양";
person.age = 25;
person.frontend = "True";

console.log(person);

//결과
{ name: '태양', age: 25, frontend: 'True' }

객체 리터럴 방식 사용

이 방법은 객체 리터럴 방식으로 {}를 사용하여 객체를 생성 할수 있습니다.

let person = {
  name: "태양",
  age: 25,
  frontend: "Yes"
};
console.log(peroson);

//결과
{ name: '태양', age: 25, frontend: 'Yes' }
  

생성자 함수 사용

이 방법은 함수를 통해서 객체를 생성하는 방식입니다.

function person (name, age, frontend) {
  this.name = name;
  this.age = age;
  this.frontend = frontend;
}
let person1 = new person("태양", 25, "Yes");
console.log(person1)

//결과
person = {
  name: "태양",
  age: 25,
  frontend: "Yes"
}

객체 프로퍼티

프로퍼티는 프로퍼티 키key와 프로퍼티 값value으로 구성되어 있습니다. 객체에서는 프로퍼티 키로 프로퍼티를 식별 합니다.

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심볼 값
• 프로퍼티 값 : 모든 값

이제 객체 프로퍼티 값에 접근하는 방법이나 값을 수정, 값을 삭제 하는 방법들을 알아보겠습니다

객체 프로퍼티 값 접근 방법

객체에 프로퍼티 값에 접근하는 방법은 두가지가 있습니다.
마침표 . (Dot notation)으로 접근하는 방법과 대괄호 [] (Braket notation)으로 접근 하는 방법이 있습니다.

마침표(Dot notation)

마침표 또는 닷 으로 불리는 (.) 으로 으로 프로퍼티에 접근하는 방법입니다.
Dot notation 에서의 key는 객체의 프로퍼티만 허용되기 때문에 변수를 통해 key값을 참조 할수 없습니다.

let person = {
  name: "태양",
  age: 25,
  frontend: "Yes"
};

//가능
console.log(person.name);        //"태양"
console.log(person.age);        // 25
console.log(person.frontend);   // "True"

//불가능
let keyName = "name";
console.log(person.keyName);   //underfined

대괄호(Braket notation)

Braket notation은 []사이에 key 값을 문자열로 넣어서 프로퍼티 접근 가능한 방법입니다.
변수를 통해 key값을 참조하는게 Dot notation에선 불가능이였지만 Braket notation 에선 가능합니다.

let person = {
  name: "태양",
  age: 25,
  frontend: "Yes"
};

console.log(person["name"]);          //"태양"
console.log(person["age"]);           // 25
console.log(person["frontend"]);       // "True"

//변수로 접근
let keyName = "age"
console.log(person[keyName])          // 25

프로퍼티 값 추가/수정/삭제

프로퍼티 값 추가

객체가 안에 없는 프로퍼티 키에 값을 할당해주면 주어진 키와 값으로 프로퍼티를 만들어 객체에 추가 할수 있습니다.

let person = {
  name: "태양",
  age: 25,
  frontend: "Yes"
};

person.MBTI = "ESFJ";
console.log(person);
// 위에 console.log 값
name: '태양',
  age: 25,
  frontend: 'Yes',
  MBTI: 'ESFJ'

프로퍼티 값 수정

객체 안에 있는 프로퍼티에 새로운 값을 할당하면 그 값으로 수정 됩니다.

let person = {
  name: "태양",
  age: 25,
  frontend: "Yes",
  MBTI: 'ESFJ'
};

person.name = "TaeYang";
console.log(person.name);    //"TeaYang"

프로퍼티 삭제

연산자 delete를 사용하여 프로퍼티를 삭제할수 있습니다. 이때 피연산자는 프로퍼티 키여야만 합니다!.

let person = {
  name: "태양",
  age: 25,
  frontend: "Yes",
  MBTI: 'ESFJ'
};

delete person.frontend;
console.log(person);
//위에 console.log 값
 name: "태양",
  age: 25,
  MBTI: 'ESFJ'

참고

Object 객체
MDN Web Docs Object