객체 리터럴
객체 리터럴이 도대체 뭘까? 객체 리터럴이 뭐냐고 물어본다면, 쉽게 대답할 수 없을 것 같다. 객체와 객체 리터럴이 뭐가 다를까? 지금부터 하나씩 알아가보자.
객체
객체는 key와 value로 구성된 자료들의 집합이다. key는 value에 접근하기 위한 이름의 역할을 하고 value는 key라는 이름에 할당된 값을 말한다.
const person = {
name: 'Jay',
age: 100
};위의 예시를 보면 person이라는 객체 안에는 name이라는 key가 존재하고, name에 할당된 Jay라는 value값이 존재한다.
즉, 이렇게 객체는 key와 value 한 쌍으로 구성되어 있는데, 이를 프로퍼티라고 한다. 자바스크립트에 존재하는 모든 값이 프로퍼티로 활용될 수 있는데, 함수도 프로퍼티로 사용될 수 있다.
자바스크립트는 일급함수를 가졌다. 즉, 함수가 다른 함수의 파라미터로 사용될 수 있고, 함수의 결과값으로 함수를 반환할 수 도 있고, 함수를 변수에 할당할 수도 있다. 이렇게 함수를 다양한 곳에 사용할 수 있듯이, 객체에서도 value값으로 함수를 사용할 수 있다.
const person = {
move: function() {
console.log('moving...');
}
};일반 함수들과 다르게 객체 내에서 함수로 나타내는 것을 메서드라고 한다.
결국 객체는 프로퍼티와 메서드의 집합이라고 표현할 수도 있는데, 프로퍼티와 메서드를 어떻게 활용할 수 있을까?
const person = {
name: 'Jay',
age: 100,
move: function() {
console.log('moving...');
}
};위의 예시를 보면 person이라는 객체 안에는 name과 age라는 프로퍼티가 있고, move라는 메서드가 존재한다. 즉, 사람이라는 객체에 이름과 나이에 대한 정보가 있고, 사람을 행동하게 만드는 move라는 동작이 있다. 이렇게 프로퍼티는 객체의 상태를 나타내는 값으로 사용되고, 메서드는 프로퍼티를 참조하고 조작할 수 있는 동작으로 사용된다.
각각의 요소가 가지고 있는 특징과 상태, 그리고 이 요소를 관리하기 위한 동작들을 추상화하고 구현하는 방법을 객체지향 프로래밍이라고 한다.
리터럴
리터럴이 도대체 뭘까?
리터럴(literal)은 사람이 이해할 수 있는 문자나 약속된 기호를 사용해서 값을 생성하는 표현 방식이라고 말할 수 있다. 결국 리터럴은 표현하는 방식이기 때문에 여러 표현으로 사용될 수 있다.
name = 'Jay'에서 문자열 리터럴(String literal)은'Jay'age = 100에서 숫자 리터럴(Numeric literal)은100
예를 들어 name = 'Jay'를 프로그램에게 보내면 프로그램 입장에서는
'Jay'는 작은따옴표''로 둘러쌓여 있어서 문자열이구나.=기호가 있는 걸 보니name이라는 변수에'Jay'를 할당하면 되겠다.
라고 해석을 할 수 있을 것 같다. 결국, 우리와 프로그램 사이에서 약속된 문자와 기호를 사용해서 값을 만들어내는 표현 방식을 리터럴이라고 부른다.
이렇게 문자와 숫자를 리터럴로 표현할 수 있는 것 처럼, 자바스크립트는 객체를 리터럴로 표현할 수 있다.
const person = {
name: 'Jay',
age: 100,
move: function() {
console.log('moving...');
}
};위의 예시처럼, 중괄호{ }안에 0개 이상의 프로퍼티를 작성한다면 그게 바로 객체 리터럴이다. 이렇게 중괄호{ }로 표현된 방식을 자바스크립트 엔진이 해석해서 객체를 만든다. 중괄호{ }안에 아무것도 작성하지 않으면 자바스크립트는 빈 객체를 만들게 된다.
프로퍼티
프로퍼티는 위에서 설명 했듯이 key와 value로 이루어졌다. 프로퍼티의 구분은 쉼표,로 하고, key와 value로 올 수 있는 값은 아래와 같다.
key- 빈 문자열''을 포함하는 모든 문자열 또는 심볼(symbol)value- 자바스크립트에서 사용할 수 있는 모든 값
프로퍼티 접근 방법
프로퍼티 접근 방법에는 두 가지가 있다.
- 마침표 표기법(Dot notation)
const person = {
name: 'Jay',
age: 100,
move: function() {
console.log('moving...');
}
};
console.log(person.name); // Jay
console.log(person.age); // 100
console.log(person.move()); // moving...마침표 표기법은 위의 예시처럼, 마침표.를 사용해서 객체의 프로퍼티에 접근할 수 있다.
- 대괄호 표기법(bracket notation)
const person = {
name: 'Jay',
age: 100,
move: function() {
console.log('moving...');
}
};
console.log(person['name']); // Jay
console.log(person['age']); // age
console.log(person['move']()); // moving...대괄호 표기법은 대괄호[]를 사용해서 객체의 프로퍼티에 접근할 수 있다.
보통은 마침표 표기법을 많이 사용하지만, 마침표 표기법으로 접근할 수 없는 경우가 있다.
// nodeJS가 아닌 브라우저 환경에서 테스트
let animal = prompt('동물 종류를 입력하세요: dog 또는 cat');
let obj = {
cat: '야옹',
dog: '멍멍',
};
if (animal === 'cat' || animal === 'dog') {
let sound = obj[animal];
console.log(sound);
} else {
console.log('잘못된 값을 입력했습니다');
}위의 예시를 보면 사용자에게 dog또는cat을 입력 받는 animal변수가 있다. 만약 사용자가 cat을 입력했다면 obj[animal]은 결국 obj['cat'] 으로 객체에 접근해서 cat의 value값인 '야옹'을 sound변수에 할당해주고 console.log로 '야옹'을 출력하게 된다.
// nodeJS가 아닌 브라우저 환경에서 테스트
let animal = prompt('동물 종류를 입력하세요: dog 또는 cat');
let obj = {
cat: '야옹',
dog: '멍멍',
};
if (animal === 'cat' || animal === 'dog') {
let sound = obj.animal; //
console.log(sound);
} else {
console.log('잘못된 값을 입력했습니다');
}하지만 마침표 표기법으로 객체에 접근한다면 animal이라는 변수가 아닌, obj 객체 내에 animal이라는 프로퍼티 키가 있는 지 찾게 된다. obj객체 안에는 animal이라는 키가 없으므로 console.log로 undefined를 출력하게 된다.
이렇게 대괄호 표기법은 변수와 문자열을 구분해서 사용할 수 있기 때문에, 객체에서 활용하는 값이 다이나믹하게 변할 수 있는 경우라면 대괄호 표기법이 더 유용하다.
프로퍼티 값 추가/수정/삭제
const person = {
name: 'JJJJJJJJJJJJJJJJJJJay',
};
// 프로퍼티 값 수정
console.log(person); // { name: 'JJJJJJJJJJJJJJJJJJJay' }
person.name = 'Jay';
console.log(person); // { name: 'Jay' }
// 프로퍼티 추가
person.age = 100;
console.log(person); // { name: 'Jay', age: 100 }
// 프로퍼티 삭제
delete person.age;
console.log(person); // { name: 'Jay' }위의 예시처럼 만들어진 객체에 접근해서 값을 수정하고, 새로운 프로퍼티를 추가하고 삭제까지 할 수 있다.
