#6 객체(Object)

1. 생성

// 객체(object)의 선언
// 중괄호 내에 key: value 로 이루어진 속성(attribute)값들을 나열하여 선언
let sampleObject = {
    key1: value1,
    key2: value2,
    ...
}

• JavaScript의 객체는 속성(Attribute)값들의 집합
• 속성값은 key: value 쌍으로 구성
• 속성의 이름에 해당하는 key 값에는 symbol, string 타입의 값을 사용 가능
• 속성의 값에 해당하는 value에는 모든 타입의 값을 사용 가능

 

 

2. 참조

// name, std_id, class 속성을 가진 객체 student
let student = {
    name: 'David',
    std_id: 12345678,
    class: 'A'
}

// <객체>.<key> 혹은 <객체>["<key>"] 로 속성값 참조 가능 
console.log(student.name);
console.log(student["name"]);

• . 연산자 혹은 대괄호([ ]) 를 사용하여 객체의 속성값을 참조 가능
• 존재하지 않는 속성값을 참조할 경우 undefined 반환
• 단, 숫자를 키값으로 사용할 경우 .연산자를 사용한 참조는 불가능

 

 

3. 속성 추가/수정

let obj = {
    id: 123,
    name: "Jack"
}

// . 연산자로 속성 추가
obj.height = 170;
console.log(obj.height);

// 대괄호 표현으로 속성 추가
obj["weight"] = 60;
console.log(obj.weight);

• .연산자나 대괄호 표현으로 추가할 속성의 key를 명시한 뒤 값을 대입해주면 속성 추가 가능
• 이미 존재하는 속성에 값을 대입할 경우 값을 수정할 수 있음

 

 

4. 속성 삭제

let obj = {
    id: 1234,
    name: "Tom",
    height: 150,
    weight: 45
}

// delete 연산자를 사용하여 속성 삭제
delete obj.height;
delete obj["weight"];

// 속성이 삭제되었기 때문에 undefined 반환
console.log(obj.height);
console.log(obj.weight);

• delete 연산을 사용하여 속성을 삭제할 수 있음
• 제거할 속성값을 참조한뒤 그 앞에 delete 키워드를 붙여주기만 하면 간단하게 삭제 가능
• 배열또한 객체이기에 이 방법으로 element를 삭제할 수 있지만 배열에서 사용하는 것은 권장하지 않음

 

 

5. 빠른 생성

id = 123;
name = "David";
height = 157;


// 직접 key: value를 명시하여 생성
let obj1 = {
    "id": id,
    "name": name,
    "height": height
}

// 값을 저장한 변수의 이름을 그대로 key로 사용하여 빠른 생성
let obj2 = { id, name, height }

// 두 객체를 문자열화하여 출력시
// 둘 다 "{'id':123,'name':'David','height':157}" 로 같은 결과를 보임
console.log(JSON.stringify(obj1));
console.log(JSON.stringify(obj2));

• 객체 선언시 value로 사용할 값을 저장한 변수를 그대로 넣어줄 경우 자동으로 변수명을 key로 사용

 

 

6. 메소드

// 일반적인 속성처럼 메소드를 정의 
let obj = {
	name: "Jerry",
    introduce: function() {
    	return `My name is ${ this.name }.`;
    }
}
console.log(obj.introduce());

// 빠른 메소드 정의
let obj2 = {
	name: "Susie",
    introduce() {
    	return `My name is ${ this.name }.`;
    }
}
console.log(obj2.introduce());

• JavaScript의 객체는 함수를 값으로 가지는 속성인 메소드(method)를 가질 수 있음
• 메소드는 다른 속성처럼 key: value 형태로 정의할 수 있음
• key: value 형태대신 function키워드를 생략하고 함수를 정의하듯 정의할 수도 있음

 

 

7. 객체와 const

// 객체를 변경할 수 없도록 하기 위해 const키워드로 선언
const obj = {
    id: 123,
    name: "Jane"
}

// 속성값 변경 시도
obj.name = "Lina";

// 속성값이 변경되지 않았는지 확인하기 위해 출력
// 변경이 정상적으로 이루어졌음을 확인 가능
// 객체를 가리키는 변수를 const로 선언해도 const를 참조하여 
// 속성값을 변경하는 것은 막을 수 없음
console.log(obj.name);



// 객체의 변경을 제대로 방지하기 위해 Object.freeze 메소드 호출
Object.freeze(obj);

// 속성값 변경 시도
obj.name = "Jane";

// 속성값이 변경되지 않았는지 확인하기 위해 출력
// 이번에는 변경사항이 적용되지 않았음을 확인할 수 있음
console.log(obj.name);

• const 키워드는 해당 이름이 가리키는 값을 재정의할 수 없도록 하기위한 키워드
• const로 객체를 선언해도 그 변수에 다른 값을 대입할 수 없을 뿐 객체를 수정하는 것은 가능함
• 객체를 수정 불가능하도록 만들려면 Object.freeze(<객체>) 메소드를 호출해줘야함