본문 바로가기
Frontend/JavaScript

[Javascript] Object

by joy_95 2021. 12. 27.

객체란?

✔️ 객체는 프로퍼티로 구성되어있다.

✔️ 프로퍼티는 키와 값으로 구성되어있다.

✔️ 프로퍼티늬 값에서는 모든 자료형이 허용된다.

 

빈 객체(빈 서랍장)을 만드는 방법

//객체 생성자 문법
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

 

 

 

 

반응형