객체(Object)
자바스크립트(javascript)는 객체지향 언어이다. 그러므로 객체(object)는 잘 알아둘것.
- 객체는 이름(key)과 값(value)으로 구성된 데이터의 집합이라고 할 수 있다.
- 객체는 배열과 달리 순서가 없다.
let car = {
// 프로퍼티 이름(key) : 프로퍼티 값(value)
name : '벤츠', // 프로퍼티(property)
price : 20000,
color : ['검은색', '회색', '하얀색']
}- property이름은 중복될 수 없다.
- property이름과 property값 사이에 :(콜론)으로 구분한다.
- property를 추가할 때는 ,(쉼표)를 붙여준다.
- property 값에는 어느 type이나 가능하다. (string, number, array, object, function..)
객체의 property 접근하기
let hamburger = {
menu1 : '통새우 와퍼',
menu2 : '불고기 와퍼',
menu3 : '치즈 와퍼'
}
console.log(hamburger['menu1']);
// ['key']로 접근하려면 따옴표로 감싸서 작성해야한다.
// 변수명으로 접근하려면 항상 대괄호를 사용해야한다. 이때는 따옴표 X
// 숫자로 된 키는 대괄호로 접근해야 한다.
let likeMenu = 'menu1';
console.log(hamburger.menu1);
// 변수명.key 로 접근
// 이때 key를 변수에 담아서 작성(hamburger.likeMenu)은 불가하다.객체에 property 추가, 수정하기
property 수정하기
let target = 'menu1';
hamburger[target] = ['불고기롱치킨', '감자튀김'];
console.log(hamburger.menu1);
// ['불고기롱치킨', '감자튀김'] 배열 출력menu1의 값이었던 '통새우 와퍼'를 배열 ['불고기롱치킨', '감자튀김']으로 수정하였다.
property 추가하기
var cart = {};
cart.상품명 = '노트북';
cart.코드번호 = 'A1234';
cart.사이즈 = '250mm x 450mm';
console.log(cart);
// {상품명 : '노트북', 코드번호 : 'A1234', 사이즈 : '250mm x 450mm'} 출력객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)된다.
이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가 된다.
const와 객체
const로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만, 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능하다.
const mutableObj = {
name: '객체'
};
mutableObj.name = '수정';
// 프로퍼티에 접근해서 내용을 수정하거나 추가하는것은 에러가 나지 않는다.메서드(Method)
객체에 저장된 값이 함수일 때, 메서드라고 부른다.
let methodObj = {
do : function() { // 객체에 do라는 메서드를 정의
console.log('메서드 정의는 이렇게');
}
}
methodObj.do(); // 호출객체는 reference로 저장된다.
객체를 변수에 저장하면 객체 리터럴 자체가 저장되는 것이 아니라 reference가 저장된다.
const hiObj = {
name: '안녕'
};
const helloObj = {
name: '안녕'
};
console.log(hiObj === helloObj); // false 출력위 코드에서 객체의 데이터가 똑같지만 false라고 출력된다. 그 이유는 객체는 변수에 저장할 때, 객체 자체를 그대로 저장하는 것이 아니고 객체가 담긴 어느 메모리의 reference를 저장하기 때문이다.
hiObj가 갖고 있는 진짜 값은 메모리 주소인 reference이다. 하지만 hiObj를 불러올 때 메모리 주소를 반환하는 것이 아니라, 해당 메모리에 저장된 데이터를 반환해 준다.
그래서 눈에 보이는 데이터는 똑같지만, hiObj와 helloObj가 갖고 있는 진짜 값은 다른 것이다.
HHJ velog 🍔