목차
2. 빈 객체 만드는 법
3. 객체 표기법
4. 프로퍼티 값 얻기, 추가, 삭제하기
5. 계산된 프로퍼티
6. 'in' 연산자로 프로퍼티 존재 여부 확인하기
7. 'for....in' 반복문
8. 일반 객체의 메서드 (keys, values, entries)
객체
- 객체는 중괄호 {…}를 이용해 만들 수 있다.
- 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있다.
- 키엔 문자형, 값엔 모든 자료형이 허용된다. → 자료형 참고 https://dev-ini.tistory.com/36
- 프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부른다.
빈 객체 만드는 법
1. let user = new Object(); → '객체 생성자' 문법
2. let user = {}; → '객체 리터럴' 문법
객체 표기법
- 중괄호 {...} 안에는 ‘키: 값’ 쌍으로 구성된 프로퍼티가 들어간다.
- '콜론(:)'을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다.
- 프로퍼티 키는 프로퍼티 ‘이름’ 혹은 '식별자’라고도 부른다.
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
};
객체 user에는 프로퍼티가 두 개 있다.
- 첫 번째 프로퍼티 – "name"(이름)과 "John"(값)
- 두 번째 프로퍼티 – "age"(이름)과 30(값)
참고로, 여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 한다.
let user = {
name: "John",
age: 30,
"likes birds": true // 복수의 단어는 따옴표로 묶어야 합니다.
};
마지막 프로퍼티 끝은 쉼표로 끝날 수 있다.
let user = {
name: "John",
age: 30,
}
프로퍼티의 값 얻기, 프로퍼티를 추가하고 삭제하기
방법에는 "점 표기법"과 "대괄호 표기법" 2가지가 있다.
1. 점 표기법
- '점’은 키가 '유효한 변수 식별자’인 경우에만 사용할 수 있다.
- 유효한 변수 식별자엔 (1) 공백이 없어야 하고, (2) 숫자로 시작하지 않아야 하며, (3) $와 _를 제외한 특수 문자가 없어야 한다.
- 키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 '대괄호 표기법'이라 불리는 방법을 사용할 수 있다. (아래에 서술)
(1) 프로퍼티 값 얻기
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
};
// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30
(2) 프로퍼티 추가하기
let user = {
name: "John",
age: 30
};
// 프로퍼티 추가하기
user.isAdmin = true;
console.log(user); // {name: 'John', age: 30, isAdmin: true}
(3) 프로퍼티 삭제하기
let user = {
name: "John",
age: 30
};
// 프로퍼티 삭제하기
delete user.age;
console.log(user); // {name: 'John', isAdmin: true}
2. 대괄호 표기법
여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다.
let user = {
name: "John",
age: 30
};
user.likes birds = true // 오류 발생 (여러 단어 조합 시 '점 표기법'은 오류가 발생함)
- 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작한다.
- 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다는 점에 주의 해야한다. (따옴표의 종류는 상관없음)
let user = {
name: "John",
age: 30
};
// 프로퍼티 추가하기
user["likes birds"] = true;
console.log(user); // {name: 'John', age: 30, likes birds: true}
// 프로퍼티 값 얻기
console.log(user["likes birds"]); // true
// 프로퍼티 삭제하기
delete user["likes birds"];
console.log(user); // {name: 'John', age: 30}
대괄호 표기법을 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이 문자열뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.
let user = {
name: "John",
age: 30,
};
let key = "likes birds";
user[key] = true; // user["likes birds"] = true; 와 같다.
console.log(user); // {name: 'John', age: 30, likes birds: true}
변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용된다. 이를 응용하면 코드를 유연하게 작성할 수 있다.
let user = {
name: "John",
age: 30
};
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)
그런데 점 표기법은 이런 방식이 불가능하다.
let user = {
name: "John",
age: 30
};
let key = "name";
alert( user.key ) // undefined
(다른 예시)
let user = {
name: "John",
age: 30,
};
let key = "likes birds";
user.key = true; // 점표기법을 사용하면 그냥 {key: true}가 생성 돼버림
console.log(user); // {name: 'John', age: 30, key: true}
계산된 프로퍼티
객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property) 라고 부른다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "");
let bag = {
[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
};
alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력된다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "");
let bag = {
[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
};
alert( bag.banana); // fruit에 "banana"가 할당되었다면, 5가 출력된다.
'in' 연산자로 프로퍼티 존재 여부 확인하기
"key" in object
예시
let user = { name: "John", age: 30 };
alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.
- in 왼쪽엔 반드시 프로퍼티 키가 와야 한다. 프로퍼티 이름은 보통 따옴표로 감싼 문자열이다.
- 이때 따옴표를 생략하면 안된다.
'for...in' 반복문
for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다.
for (key in object) {
// 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}
아래 예시를 실행하면 객체 user의 모든 프로퍼티가 출력된다.
let user = {
name: "John",
age: 30,
isAdmin: true
};
for (let key in user) {
// 키
alert( key ); // name, age, isAdmin
// 키에 해당하는 값
alert( user[key] ); // John, 30, true
}
일반 객체의 메서드 (Object.keys, values, entries)
Object.keys(obj): 객체의 키만 담은 배열을 반환
Object.values(obj): 객체의 값만 담은 배열을 반환
Object.entries(obj): [키, 값] 쌍을 담은 배열을 반환 // [ [Array], [Array] ]
let user = {
name: "John",
age: 30
};
Object.keys(user); // ['name', 'age']
Object.values(user) // ["John", 30]
Object.entries(user) // [ ["name","John"], ["age",30] ]
for...of 를 사용하여 keys 순환하기
let user = {
name: "Geonil",
age: 28 ,
address: "Gangnam"
};
// 키를 순회합니다.
for (let key of Object.keys(user)) {
alert(key); // name, age, address 가 연속적으로 출력됨
}
for...of 를 사용하여 values 순환하기
let user = {
name: "Geonil",
age: 28 ,
address: "Gangnam"
};
// 값을 순회합니다.
for (let value of Object.values(user)) {
alert(value); // Geonil과 28과 Gangnam 이 연속적으로 출력됨
}
for...of 를 사용하여 entries 순환하기
let user = {
name: "Geonil",
age: 28 ,
address: "Gangnam"
};
// [키, 값] 쌍을 순회합니다.
for (let entries of Object.entries(user)) {
alert(entries);
}
// ['name', 'Geonil']
// ['age', 28]
// ['address', 'Gangnam']
참고 자료
