자바스크립트에서 객체가 무엇인지 알아보자.
객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key) 와 값(value) 로 구성된다. 결국 제일 쉽게 말하자면 객체는 프로퍼티 집합이며, 프로퍼티는 키와 값으로 구성 된다.
또한, 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 올 수있고, 따라서 함수도 프로퍼티 값으로 올 수 있다.
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method) 라고 부른다.
객체의 특징
객체 생성 방법
객체 리터럴을 이용한 방법
일반적이고 간단한 방법.
리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법.
const test = {
propertyKey1: value1,
propertyKey2: value2
};위처럼 먼저 객체는 {}(중괄호)로 묶어주고 :(콜론)으로 구분된 이름,값 쌍들이 분리된 목록의 형태. 또 주의할 점이 propertyKey의 이름은 중복이 되면 안된다.
그리고, 프로퍼티 키에는 식별자 네이밍 규칙을 따를 것을 권장한다.
let person = {
firstName: "plla", //식별자 네이밍 규칙을 준수하는 프로퍼티 키
"last-name": "Jeong" // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
};
console.log(person); // 위의 "last-name"처럼 규칙을 준수하지 않으면 따옴표를 생략할 수 없다.그럼 식별자 네이밍 규칙을 준수하지 않았는데 따옴표를 생략하면 어떻게 될까??
let person = {
firstName: "plla",
last-name: "Jeong" // SyntaxError: Unexpected token -위의 문법에러가 뜬다. 이유는 자바스크립트 엔진이 따옴표를 생략한 last-name을 - 연산자가 있는 표현식으로 해석하기 때문이다.
let foo = {
0: 1,
1: 2,
2: 3
};
console.log(foo); //{0: 1, 1: 2, 2: 3}
위처럼 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입변환을 통해 문자열이 된다.
메서드
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티의 값으로 사용할 수 있기 때문에 함수도 값으로 취급되어 프로퍼티 값으로 사용할 수 있다.
즉, 메서드는 객체에 묶여 있는 함수를 의미한다.
객체가 가진 메서드 종류에는
1. Object.keys()
Object.keys 메서드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메서드
const obj = {
name: 'melon',
weight: 4350,
price: 16500,
isFresh: true
}
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']2. Object.values()
Object.values 메서드는 객체의 키가 아닌 값으로 이루어진 배열을 리턴하는 메서드3. Object.entries()
Object.entries 메서드는 객체의 키와 값의 쌍으로 어루어진 길이 2짜리의 배열로 이루어진 배열을 리턴. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값const values= Object.values(obj)
// values === ['melon', 4350, 16500, true]
const entries = Object.entries(obj)
/*
entries === [
['name', 'melon'],
['weight', 4350],
['price', 16500],
['isFresh', true]
]
*/객체를 순회하는 방법
for-in 문
반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는 ES6에서 추가된 문법이다.for (let i in arr)위의 문법처럼 i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할 수 있게 만든 ES6 문법.
프로퍼티 접근
프로퍼티에 접근하는 방법은 두가지가 있다
프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름이면 마침표 표기법과, 대괄호 표기법 모두 사용가능
let person = {
name: "Jeong"
};
// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Jeong
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']; // Jeong🚨 주의해야 할점은 대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. 따옴표로 감싸지 않으면 식별자로 해석되기 때문이다.
let person = {
name: "Jeong"
};
console.log(person[name]); // ReferenceError: name is not defined위처럼 대괄호 연산자 내의 따옴표로 감싸지 않은 이름. 즉, 식별자 name을 평가하기 위해 선언된 name을 찾았지만 찾지 못했기 때문
프로퍼티 값 갱신
let person = {
name: "Jeong"
};
// person 객체에 name프로퍼티가 존재하므로 name프로퍼티의 값이 갱신된다.
person.name = "Kim";
console.log(person); // {name: "Kim"}위처럼 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신 된다.
만약, 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되고, 프로퍼티 값이 할당 된다.
ES6에서 추가된 객체 리터럴 확장기능
1. 프로퍼티 축약 표현
ES6 에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.
// ES5
var x = 1, y = 2;
var obj = {
x: x,
y: y
};
console.log(obj); // {x: 1, y: 2}// ES6
let x= 1, y= 2;
const obj = { x, y };
console.log(obj); // {x: 1, y: 2}2. 계산된 프로퍼티 이름
문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다.
ES5에서는 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호 표기법을 사용해야 했다.
// ES5
var prefix = 'prop';
var i = 0;
var obj = {};
// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
console.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }하지만 ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.
// ES6
const prefix = 'prop';
let i = 0;
// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i
};
console.log(obj); // { prop-1: 1, prop-2: 2, prop-3: 3 }3. 메서드 축약 표현
ES5 에서는 메서드를 정의하려면 프로퍼티 값으로 함수를 할당한다.
// ES5
var obj = {
name: "Jeong",
sayHi: function() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! JeongES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현이 가능
// ES6
const obj = {
name: "Jeong",
// 메서드 축약 표현
sayHi() {
console.log("Hi! " + this.name);
}
};
obj.sayHi(); // Hi! Jeong