객체란?
✔️ 객체는 프로퍼티로 구성되어있다.
✔️ 프로퍼티는 키와 값으로 구성되어있다.
✔️ 프로퍼티늬 값에서는 모든 자료형이 허용된다.
빈 객체(빈 서랍장)을 만드는 방법
//객체 생성자 문법
let user = new Object();
//객체 리터럴 문법
let user = {};
리터럴과 프로퍼티
객체 리터럴 기본형
let user = {
name : 'John',
age : 12
}
객체 호출
console.log(user.name) //joy
console.log(user.age) //27
객체 추가
user.isAdmin = true;
console.log(user.isAdmin); //true
객체 삭제
delete user.age;
console.log(user.age); //undefined
표기법(점 표기법, 대괄호 표기법)
✔️ 프로퍼티 키의 이름을 여러 단어를 조합해서 만들 때
✔️ 변수를 프로퍼티 키로 사용하고 싶을 때
// 점 표기법
obj.property
//대괄호 표기법
obj["property"]
// 여러단어를 조합해서 프로퍼티 키의 이름을 지정할 때
let user = {};
user["likes birds"] = true;
console.log(user["likes birds"]); //true
//변수를 키로 사용할 때
let key = 'likes birds';
user[key] = true;
단축 프로퍼티
function makeUser(name, age){
return{
name: name,
age:age,
}
}
let user = makeUser('joy', 27);
console.log(user.name); //joy
console.log(user.age); //27
//단축 프로퍼티
function makeUser(name, age){
return{
name,
age,
}
}
'in' 연산자로 프로퍼티 존재 여부 확인하기
✔️ 자바스크립트 객체의 특징 중 하나는 존재하지 않는 객체를 입력해도 오류가 나지 않는다는 것.
✔️ 존재하지 않는 객체를 호출 시 undefined를 반환.
✔️ 이것을 이용해 프로퍼티 존재 여부를 알 수 있음.
✔️ undefined로 프로퍼티 존재 여부를 확인할 수 없는 경우에는 in 연산자를 사용.
//undefined로 존재여부 확인하기
let user = {};
console.log(user.age === undefined); //true
//'in'연산자로 존재여부 확인하기
let user = {name:'joy', age:27};
console.log('age' in user); //true
console.log('blabla' in user); //false
for in 반복문
✔️ 객체의 모든 키를 순회할 수 있다.
let user = {
name : 'joy',
age:27,
isAdmin:true
}
for(let key in user){
alert(key); // name, age, isAdmin
alert(user[key]) //joy, 27, true
}
Reference
반응형
'Frontend > JavaScript' 카테고리의 다른 글
[Javascript] 프로퍼티 getter 와 setter (0) | 2021.12.28 |
---|---|
[Javascript] Object - new 연산자와 생성자 함수 (0) | 2021.12.28 |
[Javascript] for in / for of 차이 (0) | 2021.12.27 |
[javascript] resize 이벤트 (0) | 2021.11.29 |
[javascript] scroll event (0) | 2021.11.29 |