Chapter2. 객체
Chapter2. 객체
항목은 모두 같지만, 입력하는 정보는 사용자마다 다르다.
입력해야 하는 데이터 종류가 동일하지만 각자 다른 값을 가지는 경우 객체를 사용한다.
학습목표
- 배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.
- 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
- 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
- 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.
📌 객체
객체의 좋은 예제 - 회원 주소록 만든다고 가정
let userFirstName = 'Steve';
let userLastName = 'Lee';
let userCity = 'Seoul;
-> 한 사람에 대한 정보에 변수 여러개가 필요하다. 만약 또 다른 사람을 추가하게 된다면
let user2FirstName = 'Jason';
let userLastName = 'Lee';
-> 이런식으로 여러개의 변수를 선언해줘야 한다.-> 배열을 써보면?
let user = [
'Steve',
'Lee',
'Seoul'
};
let user2 = [
'Jason'
...
];
각 값이 하나의 변수로 묶여있지만, 가독성이 떨어진다. -> 객체를 쓰면
let user = {
firstName: 'Steve',
lastName: 'Lee',
city: 'Seoul'
}; - 객체는 키와 값 쌍(key-value pair)으로 이루어져 있다.
- 키, 값 사이는 콜론(:)으로 구분한다
- 콜론(:) 전은 키(key), 뒤는 값(value)
- 중괄호를 이용해 객체를 만든다.
- 키-값 쌍은 쉼표로 구분해준다.
.
.
.
객체의 값을 사용하는 방법
1. Dot notation
- 온점(.)을 이용해 객체의 속성을 가져온다.
user.firstName; // 'Steve'
user.city; // 'Seoul'2. Square Bracket notation
- 대괄호를 넣어
- key를 따옴표(
'',""), 또는 백틱(`)으로 감싸준다.
---> 문자열 형식으로 넣지않고 있는 그대로 넣는경우엔 변수로 취급된다. ReferenceError
그러므로 bracket 안쪽의 내용은 문자열 형식으로 넣거나 변하는 변수를 넣어야함.
user['firstName']; // 'Steve'
user['city']; // 'Seoul'Dot notation vs Bracket notation
1) Dot notation
- 동적인 변수를 담을 수 없음.
- 정해진 key 이름이 있을때만 사용 가능.
2) Bracket notation
- Key값이 동적으로 변할 때, 변수일 때 사용.
dot/bracket notation을 이용해 값을 추가할 수 있음
Delete키워드를 이용해 삭제도 가능
delete tweet.createdAt;
in 연산자를 이용해 해당하는 키가 있는지 확인 가능
let tweet = {
writer: 'stevelee',
createdAt: '2020-02-20 20:20:22',
};
'writer' in tweet; // true
'content' in tweet; // false객체의 모든 key를 콘솔에 출력하려면
for ~ in 문을 통해 객체의 모든 Key에 접근, 출력할 수 있음
function allKeys(obj) {
for (let key in obj) {
console.log(key)
}
} for of 문은 string과 array, 유사 배열에서 사용하는 반복문.
배열의 요소에 순서대로 반복적으로 접근하기 위한 방법이다. 객체에선 사용X
for (let ele of arr) = for (let i = 0; i < arr.length; i +=1) 과 같다고 생각하면 쉬움.
배열과 객체의 차이점?
-> 순서 정보의 유무.
배열은 요소에 0부터 순차적으로 접근가능
객체는 속성에 순서대로 접근하지 않고, Key를 통해 value에 접근함
블로그 이사했습니다 🧳