1. 객체란?
자바스크립트엔 여덟가지 자료형이 있다. 이 중 일곱개는 오직 하나의 데이터(문자열,숫자 등)만 담을 수 있는 '원시형(primitive type)'이다.
이와 달리 key로 구분된 데이터 집합이나 복잡한 객체(entity)를 저장하는 객체는 다양한 데이터를 담을 수 있다.
객체를 만드는 방법은 '객체 생성자'문법과 '객체 리터럴'문법 두가지가 있다.
2. 리터럴과 프로퍼티
중괄호 {...}를 이용해 객체를 선언하는 것을 객체 리터럴(object literal)이라고 부른다. 객체를 선언할 땐 주로 이 방밥을 사용한다.
const user = {
name: "john",
age: 30,
};
이런식으로 '콜론(:)'을 기준으로 왼쪽에는 key가 오른쪽엔 value가 위치한다. 프로퍼티 key는 프로퍼티 '이름' 혹은 '식별자' 라고도 부른다. 프로퍼티를 이용한 다양한 동작은 다음과 같다.
//프로퍼티 값 얻기
console.log(user.name);
//프로퍼티 값 삭제하기
delete user.age;
//프로퍼티 값 추가하기
user.address = "seoul"
** const 로 선언된 객체는 수정될 수 있다.
위의 객체 user에서 user.name = "pete" 라고 객체 value를 수정하면 객체의 내용이 수정된다.
오류를 일으킬 것 같지만, const는 user의 값을 고정하고, 그 내용을 고정하진 않기 때문에 value값이 수정되는 것이다.
즉, const는 user = ..를 전체적으로 설정하려고 할 때만 오류가 발생한다.
** 여러 단어를 조함해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다.
user에 'like birds':true 라는 프로퍼티를 추가할 때, 점 표기법을 이용해서
user.like birds = true
라고 프로퍼티를 추가하면 문법 에러가 난다.
'점' 은 키가 '유효한 번수 식별자' 인 경우에만 사용할 수 있는데, 식별자에 공백이나$ 혹은 _와같은 특수문자가 있는 경우에는 유효하지 않기 때문이다.
이때는 user["like birds"] = true 와 같은 대괄호 표기법을 사용해주어야 한다.
● 계산된 프로퍼티
객체를 만들 때 객체 리터럴 안의 프로퍼티 key가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property)라고 한다.
let fruit = prompt("which fruit?", "apple"
let bag = {
[fruit]:5,
};
console.log(bag.apple); // 5가 출력된다.
위 코드에서 [fruit]는 프로퍼티 이름을 변수 fruit 에서 가져오겠다는 것을 의미한다.
3. 객체와 'for...in'반복문
for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다.
let user = {
name: 'john',
age: 30,
isAdmin: true;
};
for (let key in user) {
console.log(key); // name, age, isAdmin
console.log(user[key]); // john, 30m true
};
for...in 반복문에서는 반복변수(loopint variable)를 선언한다.
4. 객체 정렬 방식
깨체는 '특별한 방식으로 정렬'된다.
정수 property는 자동으로 정렬되고, 그 외의 property는 객쳉 추가한 순서 그대로 정렬된다.
let codes = {
'49':'독일',
'41':'스위스',
...
'1':'한국'
}
for (let code in codes) {
console.log(code);
}
// 1,...,41,49
이런식으로, 정수property는 순서가 달라도, for 문을 이요해서 출력될 때에는 자동으로 정렬되어 출력된다. 한편, 그 외 프로퍼티는 추가한 순서 그대로 정렬되어 출력된다.
5. 이외의 자바스크립트 내 객체들..
위에 정리한 객체는 '순수 객체(plain object)'라 불리는 일반객체들이지만, 자바스크립트 내에는 여러 종류의 객체가 존재한다.
- Array - 정렬된 데이터 컬렉션을 저장할 때 쓰임
- Date - 날짜와 시간 정보를 저장할 때 쓰임
- Error - 에러 정보를 저장할 때 쓰임
'Front-end > JavaScript' 카테고리의 다른 글
[JavaScript] 재귀와 스택 (recursion & stack) (0) | 2022.05.08 |
---|---|
[JavaScript] 재귀함수 호출 예시 (0) | 2022.05.08 |
[React] 리액트의 등장배경 (총정리) (0) | 2022.04.24 |
[Javascript] 참조에 의한 객체 복사 (0) | 2022.04.18 |
[Javascript] querySelectorAll 에 addEventListener 적용하기 (0) | 2022.04.15 |