JavaScript : 객체

JS의 객체는 게임 캐릭터에 비유할 수 있다. 사용자들의 캐릭터는 동일하게 직업과 능력을 가지고 있지만, 세부적인 내용은 다르다. 누군가는 A라는 아이디에 mage라는 직업을, 누군가는 B라는 ID에 rouge라는 직업을 가지고 있다. 이렇게 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다.

 

 

---

객체 기초

객체의 선언은 중괄호{}를 이용하며, 키(key)와 값(value)으로 구성되어 있다.

let user = {
	name : 'Alex',
	age : 35,
	email : 'alex@gmail.com'
}

• 여기서 name, age, email 등은 key(키)이다.
• 키에 속한 'Alex', 35, alx@gmail.com 등은 key(키)의 value(값)이다.
• key(키)와 value(값) 사이는 '콜론:'으로 구분한다.
• key-value pair는 '쉼표,'로 구분한다.

 

 

 

---

객체의 값을 가져오는 방법

📌 Dot notation

'객체이름.키 이름'을 통해 가져온다.

let user = {
	name : 'Alex',
	age : 35,
	email : 'alex@gmail.com'
}

user.name; // 'Alex'
user.age; // 35

 

📌 Bracket notation

'객체이름['키이름']'을 통해 가져온다. 키 이름(key name)은 문자열(string)이므로 꼭 따옴표''를 이용해 가져와야 한다. 따옴표 뿐 아니라 큰따옴표""와 백틱``도 사용 가능하다. Bracket notation은 직접적인 key를 입력하는 것 뿐 아니라, key value가 동적으로 변할 때, 즉 변수가 될때도 사용할 수 있다.

let user = {
	name : 'Alex',
	age : 35,
	email : 'alex@gmail.com'
}

user['name']; // 'Alex'
user["age"]; // 35
user[`email`]; // 'alex@gmail.com'

 

 

 

 

---

객체 다루기

 

📌 객체에 값 추가하기

Dot notation과 Bracket notation을 이용해서 객체에 값을 추가할 수 있다. 아래의 코드를 입력한 뒤, 콘솔을 이용해 객체 'user'를 불러보자. 객체 이름만 입력할 경우 객체 안의 데이터를 내열해 준다. 

let user = {
	name : 'Alex',
	age : 35,
	email : 'alex@gmail.com'
}

user.codename = 'Vanguard'; // string type
user['rogue'] = false; // boolean type
user["skill"] = ['Drone', 'Turret']; // array type

 

📌 객체에 값 삭제하기

delete object.key 를 이용해 key-value pair를 삭제할 수 있다.

let user = {
	name : 'Alex',
	age : 35,
	email : 'alex@gmail.com'
}

delete user.email;

 

 

📌 객체에 값 여부 확인하기

in 연산자를 이용해 선택한 객체에 해당 키가 있는지 확인할 수 있다. 출력은 true/false로 나온다.

let user = {
	name : 'Alex',
	age : 35,
	email : 'alex@gmail.com'
}

'name' in user; // true
'codename' in user; // false