객체
: 키(key)와 값(value) 쌍으로 이루어진 자료 구조
let user1 = {
firstName: 'Jieun',
lastName: 'Chun',
email: 'jieun@gmail.com',
city: 'Seoul'
};객체의 값에 접근하는 법
1. Dot notation
객체명.key
user1.firstName; // 'Jieun'
user1.city; // 'Seoul'2. Bracket notation
객체명["key"]
: key를 문자열 형식으로 전달해야 한다.
user1['firstName']; // 'Jieun'
user1[`city`]; // 'Seoul'객체에 존재하지 않는 key를 참조하면 undefined를 반환한다.
user1.isStudent; // undefined user1["isAdult"]; // undefined객체에는 .length 프로퍼티가 없으므로, undefined를 반환한다.
user1.length; // undefined
매개변수로 객체의 키(property)와 값(value)을 입력받을 때
변수를 입력받아서 그 변수명으로 속성을 만들고 싶으면 반드시 문자열이 아닌 Bracket notation을 사용해야 한다. ➡️ [변수명]
let user1 = {};
function addPropertyAndValue(obj, property, value) {
obj[property] = value; // obj['property'] X, obj.property X
}
addPropertyAndValue(user1, 'isStudent', true);- 만약
obj['property']나obj.property라고 입력한다면, 매개변수로 입력받은 변수 property를 사용하는 것이 아니라, 그냥 문자열 'property'를 사용하는 것이다.
객체에 값을 추가하는 법
객체의 값에 접근할 때와 동일하게 Dot notation과 Bracket notation을 사용한다.
user1.isStudent = true;
user1['puppies'] = ['GG', 'Bella']; // 값에 배열이 들어갈 수도 있다.isStudent, puppies 키와 값이 추가된 것을 확인할 수 있다.
객체의 값을 삭제하는 법
delete
delete 키워드를 이용해 값을 삭제할 수 있다.
delete user.email; // email의 키-값 쌍을 지운다.
delete user['city']; // city의 키-값 쌍을 지운다.특정 키가 있는지 확인하는 법
in
in 연산자를 이용해 객체에 해당하는 키가 있는지 확인할 수 있으며, true false를 반환한다.
"key" in 객체명
"firstName" in user1; // true
"nationality" in user1; // falsethis
: 자기가 속한 객체를 가리키는 자기 참조 변수(self-reference variable)
let user1 = {
firstName: 'Jieun',
lastName: 'Chun',
email: 'jieun@gmail.com',
city: 'Seoul',
func: function() {
return this;
}
};
console.log(user1.func());
this는 메소드를 호출하는 시점에 결정된다.
user1.firstName = "GG"; // user1.firstName을 변경하고 호출하면,
console.log(user1.func());
// {firstName: 'GG', lastName: 'Chun', email: 'jieun@gmail.com', city: 'Seoul', func: ƒ}객체 단축 문법 (property shorthand)
: 이미 정의된 변수가 있을 때, 객체 리터럴에서 변수명을 그대로 사용하면 변수에 담겨진 값이 할당되며 값의 할당을 생략할 수 있다.
const name = 'Jieun';
const age = 26;
const obj = {
name,
age,
isStudent: true,
};
console.log(obj); // {name: 'Jieun', age: 26, isStudent: true}객체의 메소드
Object.keys()
Object.keys(obj) : 객체의 모든 key를 배열 형태로 반환하는 메소드
Object.keys(user1);
// ['firstName', 'lastName', 'email', 'city']Object.values()
Object.values(obj) : 객체의 모든 value를 배열 형태로 반환하는 메소드
Object.values(user1);
// ['Jieun', 'Chun', 'jieun@gmail.com', 'Seoul']Object.entries()
Object.entries(obj) : 객체의 모든 속성을 key value 쌍의 배열 형태로 반환하는 메소드
let user1 = {
firstName: 'Jieun',
lastName: 'Chun',
email: 'jieun@gmail.com',
city: 'Seoul'
};
Object.entries(user1);
Object.assign()
Object.assign(target, source) : 객체의 모든 속성을 복사해 대상 객체(target)에 붙여넣고, 대상 객체를 반환하는 메소드
- 동일한 이름의 속성이 있다면, 값을 덮어쓴다.
const target = {name: 'Jieun', age: 26};
const source = {name: 'GG', isStudent: true};
Object.assign(target, source); // {name: 'GG', age: 26, isStudent: true}- 첫 번째 매개변수에 빈 객체
{}를 넣어 객체를 복사할 수 있다.
const copiedObj = Object.assign({}, obj);.hasOwnProperty()
obj.hasOwnProperty(prop) : 객체가 특정 프로퍼티를 가지고 있으면 true, 없으면 false를 반환하는 메소드
const obj = {};
obj.name = 'Jieun';
obj.hasOwnProperty('name'); // true
obj.hasOwnProperty('age'); // false반복문을 이용해 객체의 속성(property)을 순회하는 법
for...in 구문
for (let [variable] in [object]) : 객체의 속성 키(property key)에 대해 반복한다.
const user1 = { name: "jieun", age: 26, isStudent: true };
for (let prop in user1) {
console.log(prop + " : " + user1[prop]);
}
// name : jieun
// age : 26
// isStudent : true가 차례대로 출력된다.for 구문을 사용할 수 없는 이유
for(let i = 0; i < n; i++)
: 객체의 key가 0, 1, 2, 3... 인 경우에만 사용할 수 있다.
for...of 구문을 사용할 수 없는 이유
:
for [variable] of iterable: iterable object에서만 사용할 수 있다.
- iterable (반복 가능한 객체) : Array, Map, Set, String, TypedArray, arguments 객체 등을 포함한다.
- 객체는 iterable이 아니다.
❔ 학습 후 궁금한 점
- 얕은 복사(shallow copy)와 깊은 복사(deep copy)는 무엇인지?
- apply, call, bind와 this?
