[JS] 자바스크립트 객체 생성, 속성 생성/변경/삭제(delete)

 자바스크립트에서 객체를 생성하고, 프로퍼티(속성)를 추가/수정/삭제하는 방법을 알아보겠습니다.

 

[ Contents ]

 

 

1. 객체 생성

let person = new Object();	// 객체 생성자 이용
let person = {};	// 객체 초기화

 new 키워드를 이용해서 객체(Object)를 생성할 수도 있고, 배열과 비슷하게 { }를 이용해서 초기화할 수도 있습니다.

 보통 중괄호를 이용한 초기화 방식을 많이 사용합니다.

 

 

2. 객체 속성 

let person = {
    name: "jangThang",
    phone: undefined,
    age: 26,
    etc: function () {
        console.log("star가 되기위해");
    }
};

 객체를 이루는 각 변수를 '속성(Property, 프로퍼티)'이라고 합니다.

 객체가 가지고 있는 정보를 '속성'에 저장한다고 생각하시면 됩니다. 예를 들어 사람의 인적사항에는 이름, 나이, 휴대전화번호 등등이 있을 수 있겠죠.

 각 속성은 다른 타입으로 지정할 수 있으며, 심지어 function도 가능합니다.

 

 

console.log(person.name);
console.log(person["age"]);

 속성값 접근은 객체.속성명이나 객체["속성명"]으로 할 수 있습니다.

 

 

반응형

 

3. 객체 속성 변경

1) 속성 추가

객체.속성명 = 속성값;
객체["속성명"] = 속성값; 

 객체.add()나 객체.append() 같은 함수가 아니라, 대입 연산자를 이용해서 새로운 속성을 초기화합니다.

 

let person = {
    name: "jangThang",
    age: 99
};

console.log(person);

person.height = 175;
person["url"] = "star7sss.tistory.com";

console.log(person);

 주로 첫번째 방법을 많이 이용합니다. [" "]보다는 .으로 간단히 추가하는 게 편하죠.

 

 

2) 속성 수정

객체.속성명 = 속성값;
객체["속성명"] = 속성값; 

 객체의 속성 수정도 추가와 동일합니다. 없던 속성을 초기화하면 '추가'가 되고, 있던 속성이면 속성값이 '변경'됩니다.

 

const person = {
    name: "jangThang",
    age: 25,
    pet: null
};
console.log(person);

person.age = 26;
person["pet"] = "cat";
console.log(person);

 재밌는 점은 const로 생성한 객체임에도 속성 변경이 가능하다는 점입니다.

 상수 객체는 속성이 고정이며, 속성값은 변할 수 있습니다.

 

const person = {
    name: "jangThang",
    age: 25,
    pet: null
};
console.log(person);

person = {
    name: "jangThang",
    age: 25,
};

 다만 속성 자체를 변경할 경우에는 에러가 뜹니다.

 

 

 

3) 속성 삭제

delete 객체.속성;
delete 객체["속성"];

 delete 키워드를 이용해서 객체의 속성을 삭제합니다.

 

const person = {
    name: "jangThang",
    age: 25,
    pet: null
};
console.log(person);

delete person.pet;
delete person["age"];
console.log(person);

 마치 SQL처럼.. delete를 사용해서 객체의 속성을 삭제합니다.