[CS] 객체 Day-13

각기 다른 값을 가지지만, 입력해야하는 데이터의 종류가 동일한 경우 객체를 사용하여 데이터를 쉽게 관리할 수 있습니다. 이렇게 공통적인 속성을 가지는 경우 객체를 사용합니다.

객체의 핵심 포인트

객체 속성(property)의 추가, 조회, 변경, 삭제를 자유롭게 할 수 있어야한다.
객체 속성 조회법 두 가지, dot notation 과 bracket notation의 차이를 이해해야 한다.
tweet.content와 tweet['content']의 차이를 알아야한다.
dot donation을 이용한 할당 방식을 자유롭게 사용할 수 있어야 한다.

//ex)
obj.name = 'KJ'

객체 속성 삭제를 위한 delete 키워드를 사용할 수 있어야 한다.
객체를 위한 for문 for ... in문을 이해하고 다룰 수 있어야 한다.

=> 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

객체

let user = {
    firstName: 'KJ',
    lastName: 'Lee',
    email: 'test@test.com',
    city: 'Seoul'
}
// 객체는 키와 값  (키값)으로 구성된다.
// 키(key) : firstName, lastName, email, city
// 값(value) : 'KJ', 'Lee', 'test@test.com', 'Seoul'

객체의 사용 방법 1번 (Dot notation)

let user = {
    firstName: 'KJ',
    lastName: 'Lee',
    email: 'test@test.com',
    city: 'Seoul'
}
// 객체는 키와 값  (키값)으로 구성된다.
// 키(key) : firstName, lastName, email, city
// 값(value) : 'KJ', 'Lee', 'test@test.com', 'Seoul'

user.city;
user.firstName;

객체에 .을 찍고 키이름을 적어주면 값을 가져올 수 있습니다.

객체의 사용 방법 2번 (Bracket notation)

let user = {
    firstName: 'KJ',
    lastName: 'Lee',
    email: 'test@test.com',
    city: 'Seoul'
}
// 객체는 키와 값  (키값)으로 구성된다.
// 키(key) : firstName, lastName, email, city
// 값(value) : 'KJ', 'Lee', 'test@test.com', 'Seoul'

user['city'];
user['email'];

객체에 대괄호를 열고 따옴표안에 키값을 넣어주면 값을 가져올 수 있다.

Bracket notation 주의 사항

절대적으로 '', "" 넣어줘야 합니다.

없을 경우 Error를 발생시킵니다.
ex)
Uncaught ReferenceError: content is not defined

Dot notation 과 Bracket notation의 차이

취향 차이가 아닙니다.
Bracket notation은 동적일 때 사용합니다.
Dot notation에는 한계가 있습니다.
Key값이 변할 때는 Bracket notation을 사용합니다.

객체 값 추가하기

dot/bracket notation을 활용해 값을 추가할 수 있습니다.

let tweet = {
	writer: 'KJ',
    createdAt: '2021-10-18',
    content: '꿀잼'
};

tweet['category'] = 'notice';
tweet.isPublic = true;
tweet.tags = ['CS', 'Full'];

객체 값 삭제하기

let tweet = {
	writer: 'KJ',
    createdAt: '2021-10-18',
    content: '꿀잼'
};

delete tweet.createdAt;
// 키는 writer, content 만 남는다.

객체 키 확인하기

in을 사용해서 키 확인이 가능하다.

let tweet = {
	writer: 'KJ',
    createdAt: '2021-10-18',
    content: '꿀잼'
};

'content' in tweet; // true 반환
'findPlace' in tweet; // 키가 없기 때문에 false 반환