1. 객체
자바스크립트에서 사용할 수 있는 자료형은 두가지로 분류된다
- 원시형(primitive type) : 하나의 데이터만 담음
- 객체형 : 다양한, 복잡한 데이터를 담을 수 있음
형태 :
{ 키 : 값 } - 키(key) = property 이름, 식별자 : 문자형만 사용
- 값(value) : 모든 자료형 가능
- 프로퍼티(property) : 키와 값의 쌍
빈 객체 생성
- 객체 생성자 문법
let 변수명 = new Object(); - 객체 리터럴 문법
let 변수명 = {}; - 객체 리터럴 문법으로 객체 선언예시
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
};property 읽기, 추가, 삭제
점 표기법(dot notation) 사용하기!!
- 값 읽기 :
객체명.키
alert(user.age); // output -> 30- 추가 :
객체명.추가할 키 = 추가할 값;
user.isAdmin = true; // 값은 모든 자료형 가능 (boolean도)- 삭제 :
delete객체명.삭제할 키;
delete user.age;💡 const 객체는 수정될 수 있다!
보통const로 선언된 변수들은 수정이 불가능한 것으로 유명하지만,
객체는 수정, 즉 새로운 property를 추가 혹은 삭제하는 것이 가능하다!
여러 단어로 이루어진 키
키가 여러 단어로 이루어졌을 경우, 반드시 " 따옴표로 감싸주어야 한다.
let user = {
name: "John",
age: 30,
"likes birds": true
};💡 property는 쉼표로 끝날 수 있다!
{~:~, ~:~,}
이럴 때 사용하는 쉼표 : trailing / hanging 쉼표
대괄호 표기법
= square bracket notation
유효하지 않은 변수 식별자일 때 사용
앞서 점 표기법(객체명.키)으로 값을 읽는 법을 배웠다.
하지만 여러 단어로 구성된 키의 경우, 점표기법을 통해 값을 읽어올 수 없다.
user.likes birds = true; //error- 키 중간에 공백이 들어가거나
- 키가 숫자로 시작하거나
- $, _ 를 제외한 특수문자가 들어가면
해당 키는 '유효한 변수 식별자'가 아니고,
이럴 땐 대괄호 표기법을 사용해야 JS가 코드를 이해할 수 있다.
// 읽기(get)
alert(객체명["여러 단어 키"]);
// 추가(set)
객체명["여러 단어 키"] = 추가할 값;
// 삭제(delete)
delete 객체명["여러 단어 키"];키에 다양한 표현식 사용 가능
- 대문자 표기법을 사용하면, 문자열 뿐만 아니라 변수도 키로 사용할 수 있다.
- 점 표기법에서는 정확한 키값이 아니면 절대 사용할 수 없다!!
let 변수명 = "여러 단어 키";
//추가 (set)
객체명[변수명] = 값;이런 형태는 키값을 사용자에게 입력받을 때와 같은 경우 유연하고, 유용하게 사용할 수 있다!
계산된 property
객체 리터럴에 [키]가 쓰여서 객체를 생성할 경우를 말한다.
- 객체를 생성할 때 키를 대괄호로 감싸서 사용할 경우, 해당 키를 유연하게 다룰 수 있다.
예시를 보며 이해해보자. 다음과 같은 경우들이 가능해진다.
1. 객체 생성 시, 키를 사용자의 입력에 따라 받아올 수 있다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};
alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.- 키 자리에 복잡한 표현식을 사용할 수 있다.
let fruit = 'blueberry';
let bag = {
[fruit + 'Yogurt']: 5 // bag.blueberryYogurt = 5
};단축 Property
보통 실무에서 property의 값은 변수로 받는다.
특히 키와 변수명 모두 같은 값을 가리키고,의미하는 이름이기 때문에 동일하게 설정될 때가 많다.
이렇게 키와 값의 변수명이 동일할 때 사용할 수 있는 것이 바로 shorthand property!
예시 :
function makeUser(name, age) {
return {
name: name,
age: age,
// ...등등
};
}
let user = makeUser("John", 30);
alert(user.name); // John위의 예시에서
- 키(name, age)
- 값을 담는 변수(name, age)
가 동일한 것을 볼 수 있다.
이럴 때, 아래와 같이 property를 단축할 수 있다.
function makeUser(name, age) {
return {
name, // name: name 과 같음
age, // age: age 와 같음
// ...
};
}쉽게 말해,
어떤 프로퍼티의 키가 A, 값이 123, 값을 담는 변수명이 A일 때
- 일반 property :
A : 123,A : A - 단축 property :
AA : A와 같은 역할을 한다.
일반 property와 단축 property를 혼용하는 것도 가능하다.
function makeUser(name, age) {
return {
name,
age : 24
};
}property 이름(키) 제약사항
일반 변수명에 주어지는 제약사항과 달리,
Property 이름, 즉 키에는 제약사항이 거의 없다.
- 예약어 사용 가능 (for, let 등)
- 문자형과 심볼형이 아닌 값이 와도됨 (문자열로 변환됨)
- 예를들어 숫자 0 -> 문자열 "0"
- 하지만
__proto__는 키로 사용할 수 없다.
'in' 연산자
in 연산자는 property의 존재여부를 확인하는 데에 쓰인다.
💡js의 특징이자 장점! 존재하지 않는 property에 접근하면 에러가 발생하지 않고, undefined 가 반환된다.
따라서 객체명.키 === undefined 의 참거짓을 따져보면 존재여부를 판단하기가 쉽다
이 외에 존재여부를 판단하는 더 간단한 연산자가 바로 in이다.
- 형태 :
"키" in 객체명
예시 :
let user = { age: 30 };
let key = "age";
alert( "key" in user ); // true
//변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인합니다.-
이때 주의할 점은, in 좌측의 키 자리에
"따옴표를 붙이지 않는다면, 코드 내에 같은 이름의 변수에 접근하는 의도치않는 프로세스가 실행하기 때문에 존재 여부 판별이 어렵다. -
property의 값이
undefine일 수도 있기 때문에, undefined와의 동일 비교보다 in을 사용한 존재여부 판단이 더 정확하다!
'for...in' 반복문
객체 내 모든 키를 순회할 때 사용한다.
- 형태 :
for (변수명 in 객체명) { ... ]
변수에 매 회차마다 각 키가 담기게 된다.
다음의 예제처럼 모든 키를 뽑아서 출력할 수 있다.
let user = {
name: "John",
age: 30,
isAdmin: true
};
for (let key in user) {
alert( key ); // name, age, isAdmin
}또, 이를 활용해서 모든 값을 뽑아서 출력할 수도 있다.
for (let key in user) {
alert( user[key] ); // John, 30, true
}💡위의 예시에서 볼 수 있듯이, 우리에게 익숙한
for(반복변수 초기화;조건;증감)을 사용할 때처럼 반복변수는 for문 내에서 let으로 선언해서 사용한다.
객체 정렬 방식
- 정수 property는 자동 정렬 (정수의 오름차순으로)
- 그 외의 property는 추가한 순서대로 정렬
💡 여기서 정수 property란, 정수형<->문자형 변환 시 형태를 유지하는 정수를 말한다. 즉,
42: 정수 property (O)+42: (X)1.2: (X)
🙉 오늘의 TL;DR
- 객체의 기본 형태는
{프로퍼티, 프로퍼티}이며, 프로퍼티의 기본 형태는키:값이다. - 점 표기법을 사용하다가, 키가 복잡해질 경우 대괄호 표기법으로 바꾸자
- 단축 property, in연산자, for in 반복문을 활용하면 객체를 편리하게 사용할 수 있다.
