객체
서로 연관있는 속성(데이터)과 행동(함수)을 묶어 주기 위해 객체(복합데이터)타입이 만들어졌다.
추가로, 원시타입과 다르게 객체는 Heap이라는 메모리 구조에 저장되며, 변수는 객체가 저장된 메모리 주소를 값으로 가지고 있다.
밀접하게 관련 있는 상태와 행동을 객체로 묶어나가는게 포인트다!!
const name = "한명수";
const age = 23;
const mbti = "ENTP";
// 밀접한 관련이 있네!
const person = {
name : "한명수",
age : 23,
mbti : "ENTP",
greet: function(){
console.log(`안녕하세요 ${this.name}입니다.`);
}
};
Ex] 한명수라는 사람을 객체로 표현하자면, 이름, 나이, mbti 의 속성과 greet라는 메서드를 가진 객체라고 할 수 있다.객체를 이해했다는 것은 자바스크립트를 이해했다는 것이다.
객체의 프로퍼티
객체는 프로퍼티의 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.
프로퍼티의 값에는 모든 데이터 타입이 들어갈 수 있으며, 키(key)에는 원시타입만 허용된다.
다만 키(key)에서는 심볼을 제외하고 모두 문자열로 전환되어 프로퍼티에 등록된다.
const person = {
0 : '첫번 째', // 0이라는 숫자를 집어넣어도, 문자열로 인식한다.
name : 'Han',
"last-dance" : true, // camelCase(네이밍 규칙)를 따르지 않는 Key의 경우 따옴표로 묶어줘야한다.
name : 'Kim', // 이미 존재하는 프로퍼티의 키를 중복선언하면, 덮어씌운다.
greet : function(){
console.log("Hi");
},
};객체는 프로퍼티의 집합이다. 즉 객체안에 들어있는 한줄 한줄은 모두 프로퍼티이지만,
객체의 동작을 나타내는 함수를 메서드라 부르고, 객체의 상태를 나타내는 값을 프로퍼티라 구분하기 시작했다.
추가로, 이미 존재하는 프로퍼티 키를 중복 선언해도 에러가 발생하지 않고, 먼저 선언한 프로퍼티를 덮어쓴다.
객체는 프로퍼티와 메서드로 구성된다.
객체에 접근하기
객체에 접근하기 위해 두가지 방법이 있다.
하나는, 마침표 프로퍼티 접근 연산자(.), 마침표 표기법이다.(dot notation)
다른 하나는, 대괄호 프로퍼티 접근 연산자([]), 대괄호 표기법이다.(bracket notation)
왜 접근하는 방식이 두 개나 만들어진 걸까?
const obj = {
name: '파인애플',
emoji: '🍍',
};
function getValue(obj, key) {
// return obj.key; -> key라는 문자열을 키로 가지는 프로퍼티가 존재해야한다.
return obj[key];
}
console.log(getValue(obj, "name"));
console.log(obj["name"]);마침표 표기법(.)은 코딩하는 시점에, 정적(이미 값이 정해져있음)으로 접근이 확정되야 사용이 가능한 표기법이다.
대괄호 표기법([])은 코딩하는 시점에, 동적(값이 정해져 있지 않은 상태)으로 속성에 접근하고 싶을 때 주로 사용한다.
다만, 대괄호 표기법을 정적으로 사용하기 위해서는, [] 대괄호 안에 따옴표로 감싸야 한다.
따옴표로 감싸지 않으면 위의 예시처럼 문자열이 아닌 식별자(변수)로 해석하기 때문이다.
