5.26 Dev.Feedback(객체)

객체 기초

배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는 지 이해할 수 있다.

 

배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)

 

배열은 순서를 가지고 있지만, 각 인덱스에 정확한 정보가 부여되지 않은 객체의 한 종류이다.

let arr = []
typeof arr = "object";

객체는 순서에 상관 없이 각 인덱스에 정확한 정보 혹은 의미를 부여할 수 있기에, 하나의 변수에 다양한 데이터를 처리해야하는 경우(ex 주소록)에 사용하는 것이 좋다.

 

객체의 구조 

let user = {
firstName(key): 'Justin'(value),
lastName: 'Choi',
email: 'happydrum819@gmail.com',
city : 'Seoul'
};

객체는 키(key, 속성)와 값(value) 쌍으로 구성되어 있다.

키와 값의 구분은 콜론(:)을 통해 한다.

컬리 브라켓({})을 통해 객체를 시작하고, 키와 값의 쌍은 콤마(,)로 구분한다.

 

객체를 조회하는 방법

 

방법 1. Dot notation

let user = {
firstName(key): 'Justin'(value),
lastName: 'Choi',
email: 'happydrum819@gmail.com',
city : 'Seoul'
};

user.firstName; //'Justin'//
user.city; //'Seoul'//

 

방법 2. Bracket(square bracket) notation

let user = {
firstName(key): 'Justin'(value),
lastName: 'Choi',
email: 'happydrum819@gmail.com',
city : 'Seoul'
};

user['firstName']; //'Justin'//
user['city']; //'Seoul'//

Bracket notation을 사용할 때, 정해진 key(속성)를 불러오고 싶다면 문자열을 내부에 적어줘야 한다.

user.firstName === user['firstName']
user.firstName !== user[firstName]

만일 문자열로 적어주지 않을 경우 firstName을 변수로 취급하기에 원하는 값이 나오지 않고, 아래 결과 값이 나온다.

let user = {
firstName: 'Justin',
lastName: 'Choi',
email: 'happydrum819@gmail.com',
city : 'Seoul'
};

user[firstName]; 
VM283:8 Uncaught ReferenceError: firstName is not defined
    at <anonymous>:8:6

즉 firstName을 변수로 인식한 것이고, 그 변수에 어떤 값도 할당되지 않았기에 이런 결과가 나오는 것이다.

 

*** 키값이 변경이 되는 상황일 때, Bracket notation을 사용해야 한다!

 

객체에 속성과 키를 추가하는 방법

let user = {
firstName: 'Justin',
lastName: 'Choi',
email: 'happydrum819@gmail.com',
city : 'Seoul'
};

user['hobby'] = '독서';
user.male = true;
user.tags = ['#수영', '#개발자'];

console.log(user)

user = {
firstName: "Justin", 
lastName: "Choi", 
email: "happydrum819@gmail.com",
city: "Seoul"
email: "happydrum819@gmail.com"
firstName: "Justin"
hobby: "독서"
lastName: "Choi"
male: true
tags: (2) ["#수영", "#개발자"]
}

Dot notation 혹은 Bracket notation을 통해 객체에 새로운 키와 값을 할당하면, 추가가 된다.

 

객체에 속성과 키를 삭제하는 방법

user = {
firstName: "Justin", 
lastName: "Choi", 
email: "happydrum819@gmail.com",
city: "Seoul"
email: "happydrum819@gmail.com"
firstName: "Justin"
hobby: "독서"
lastName: "Choi"
male: true
tags: (2) ["#수영", "#개발자"]
}

delete user.male

user = {
firstName: "Justin", 
lastName: "Choi", 
email: "happydrum819@gmail.com",
city: "Seoul"
email: "happydrum819@gmail.com"
firstName: "Justin"
hobby: "독서"
lastName: "Choi"
tags: (2) ["#수영", "#개발자"]
}

delete 메소드를 사용하여 키를 삭제하면 지워진다.

 

객체에서 키가 있는지 여부를 확인하는 방법

user = {
firstName: "Justin", 
lastName: "Choi", 
email: "happydrum819@gmail.com",
city: "Seoul"
email: "happydrum819@gmail.com"
firstName: "Justin"
hobby: "독서"
lastName: "Choi"
tags: (2) ["#수영", "#개발자"]
}

'hobby' in user; //true//
'male' in user; //false//

in 연산자를 통해 확인할 수 있다. return 값은 boolean