[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자

자바스크립트에서는 총 8가지 자료형이 있다. 이중에서 7개는 하나의 데이터 (문자열,숫자만)담을 수 있기 때문에 원시형 (primitive type)이라고 부른다.

• 객체는 다양한 데이터를 담을 수 있다.
• 객체는 중괄호 {...}를 이용해서 만들 수 있다. 중괄호 안에는  ‘키(key): 값(value)’ 쌍으로 넣을 수 있는 프로퍼티(property)를 여러개 넣을 수 있다.
• 키에는 문자형, 값에는 모든 자료형이 허용된다.

let user = new Object(); // '객체생성자'
let user = {}; // '객체 리터럴'

 

리터럴과 프로퍼티

중괄호 {...}안에

는 '키:값' 쌍으로 구성된 프로퍼티가 들어간다. 
'콜론(:)'을 기준으로 하여 왼쪽에는 키가 오른쪽에는 값이 위치한다. 

let user = { // 객체
	name: "John", // 키 : "name", 값 : "John" 
	age: 30 // 키 : "age", 값 : 30
};

 

프로퍼티를 추가하고 삭제할 수 있다. 이는 점 표기법(dot notation)을 사용하게 되면 프로퍼티 값을 읽는 것이 가능해진다. 

// 프로퍼티 값 얻는 방법
console.log(user.name); // John
console.log(user.age); // 30

또한 프로퍼티 값에는 어떠한 자료형이 올 수 있다. 

user.isAdmin = true;

delete연산자를 사용하게 된다고 한다면 프로퍼티를 삭제하는 것도 가능해진다.

delete user.age;

단어를 조합해서 프로퍼티 이름을 만든 경우에는 따옴표로 묶는게 좋다.

let user = {
	name : "John",
    age : 30,
    "like candy": true // 복수의 단어는 따옴표로 묶어야 한다.
};

마지막 프로퍼티 끝은 쉼표로 끝낼 수 있다.

이런 쉼표를 가리켜 trailing(길게 늘어지는) 혹은 hanging(매달리는)쉼표라 하는데 이렇게 쉼표를 붙이게 된다고 한다면 프로퍼티를 추가하거나 삭제 그리고 이동하는 것이 쉬워진다.

상수 객체는 수정이 가능하다.

const로 선언된 객체는 수정이 가능하다. const는 user의 값을 고정하지만 내용을 고정하지 않는다. 

const user = {
	name : "John"
};

user.name = "Pete" // const는 값을 고정하지만 내용을 고정하지 않는다. 

console.log(user.name); // Pete

대괄호 표기법

여러 단어를 조합하여 프로퍼티 키를 만든 경우 점표기법을 사용해서 읽을 수 있다.

user.likes birds = true
// 문법 에러 발생

자바스크립트는 user.likes를 이해하지 못한다. 이는 예상치 못한 birds를 만나게 되기 때문이다. 점은 키가 유효한 변수 식별자인 경우에만 사용할 수 있다. 그리고 유효한 변수 식별자에는 공백이 없어야 하며 숫자로 시작하지 말아야 하고 $와 _를 제외한 특수 문자가 없어야 한다.

키가 유효한 변수 식별자가 아닌 경우에는 점 표기법 대신에 '대괄호 표기법(square bracket notation)'이라고 하는 방법을 사용할 수 있다. 이러한 대괄호 표기법은 키에 어떤 문자열이 있든지 동작한다.

let user = {};

// set
user["like birds"] = true;

// get
console.log(user["likes birds"]); // true

// delete
delete user["like birds"];

대괄호 표기법을 사용하게 된다고 한다면 변수를 키로 사용한 것과 같이 문자열 뿐만이 아니라 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.

let key = "like birds";

// user["likes birds"] = true;와 같다.

user[key] = true;

변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있으며 어떤 경우든지 평가가 끝난 이후의 결과가 프로퍼티 키로 사용된다. 이렇게 응용할 경우 코드를 유용하게 사용할 수 있다.

let user = {
	name : "John",
    age : 30
};

let key = prompt('사용자의 어떤 정보를 얻고 싶은가?', 'name');
let key = prompt('사용자의 어떤 정보를 얻고 싶은가?', 'age');

// 변수로 접근 
console.log(user[key]); // 프롬프트 창에 name을 입력하면 John
console.log(user[key]); // 프롬프트 창에 age을 입력하면 30

※ 모던자바스크립트 - 객체편 참조