Section 5. 자바스크립트 객체의 기본 사용법들

I. 객체 생성과 프로퍼티 접근

객체를 생성하는 방법과 접근하는 방법에 대해서 알아본적이 있다. 예시만 들어보겠다. 

const food1 = {
  name: '햄버거',
  price: 5000,
  vegan: false
};

console.log(food1);

console.log(
  food1.name, // 💡 마침표 프로퍼티 접근 연산자
  food1['price'] // 💡 대괄호 프로퍼티 접근 연산자
);

또 빈 객체를 생성하고 프로퍼티를 추가 또는 수정할 수도 있다. 

// 빈 객체 생성
const food2 = {};
console.log(food2);

// 프로터피 추가
food2.name = '샐러드';
food2.price = '6000';
food2['vegan'] = true;

console.log(food2);

// 프로터피 수정
food2['price'] = '6500';
food2.vegan = false;

console.log(food2);

 

식별자 명명 규칙에 벗어나는 키 이름 사용을 한다면?

즉, 변수명 등으로 사용할 수 없는 이름의 키인 경우면 일단 예시를 보자.

const obj = {
  1: '하나', // 숫자도 객체의 키로는 사용 가능
  'ab-cd': 'ABCD', // 문자 포함 시 키도 따옴표로 감싸야 함
  's p a c e': 'Space'
}

// 대괄호 프로퍼티 접근 연산자로만 가능
console.log(
  obj[1],
  obj['ab-cd'],
  obj['s p a c e']
);

// ⚠️ 오류 발생
// console.log(
//   obj.1,
//   obj.ab-cd,
//   obj.s p a c e
// );

키가 숫자일 경우는 그냥 써도 가능하나 숫자가 아닐 경우에는 ''를 써줘야하는 것을 알 수 있다. 그리고 프로퍼티에 접근을 할 때도 문자면 ''를 사용해야 한다는 것도 알 수 있다. 

 

표현식으로 키값 정의. [ ]를 사용한다.

표현식이란 어떤 값을 반환하는 코드를 말한다. 

let idx = 0;
const  obj = {
  ['key-' + ++idx]: `value-${idx}`,
  ['key-' + ++idx]: `value-${idx}`,
  ['key-' + ++idx]: `value-${idx}`,
  [idx ** idx]: 'POWER'
}

console.log(obj); //{27: 'POWER', key-1: 'value-1', key-2: 'value-2', key-3: 'value-3'}

표현식으로 이렇게 키와 값을 동적으로 생성할 수 있다는 것을 알 수 있다. 

 

*주의할점. 객체나 배열을 키값으로 사용해보자.

const objKey = { x: 1, y: 2 };
const arrKey = [1, 2, 3];

const obj = {
  [objKey]: '객체를 키값으로',
  [arrKey]: '배열을 키값으로'
}

console.log(
  obj[objKey], //객체를 키값으로 
  obj[arrKey] //배열을 키값으로
);

// ⚠️ ???????
console.log(
  obj[{ a: 1, b: 2, c: 3 }], //객체를 키값으로
  obj['1,2,3'] // 문자열. 출력은 이렇다. 배열을 키값으로
);

// 로그를 펼쳐 키값을 볼 것 - 💡 문자열임
// 객체와 배열이 그 자체가 아니라 문자열로 치환되어 키가 되는 것
console.log(obj);

console.log(
  obj['[object Object]']
);

우선 처음 출력문을 보면 객체와 배열을 키로 사용해도 문제가 없어 보인다. 하지만 착각이다. 

두번째 출력문을 보면 전혀 다른 객체와 배열을 사용해서 접근했는데 같은 값이 출력되는 것을 볼 수 있다. 우리가 의도한 대로 작동하지 않는다는 말이다. 이유는 다음과 같다.

obj[objKey]를 하면 실제로는 objKey값 자체가 obj의 키값이 되는 것이 아니라 객체를 단순히 문자열로 치환한 값인 object가 값이 된다는 것이다. 즉, [object Object] : 객체를 키값으로 가 된다는 것. 

다시 정리해서 말하자면 객체에다가 무언가를 선언하거나 접근할때 어떤 객체를 넣어버리면 문자열로 치환한 값이 넣어진다는 것이다. 그러니까 다른 엉뚱한 객체를 넣어도 모두 같은 문자열로 치환한 값으로 들어가기 때문에 같은 값이 나온 것이다. 

배열도 마찬가지다. 어떤 배열에 접근하기 위해 배열을 넣어버리면 그 내용을 쉼표로 이어붙인 문자열이 키값으로 들어가게 된다. 즉, 1,2,3 : 배열을 키값으로 가 되는 것이다. 1,2,3은 문자열이다. 

 

이렇게 실제로 해당 객체나 배열의 내용이나 참조값이 키가 되는 것이 아님을 알고 넘어가자.

 

II. 프로퍼티 삭제 - delete 연산자

const person1 = {
  name: '홍길동',
  age: 24,
  school: '한국대',
  major: '컴퓨터공학'
};

console.log(person1);

delete person1.age;
console.log(person1); //age 프로퍼티가 지워졌다

delete person1['major'];
console.log(person1); //major 프로퍼티가 지워졌다

// 💡 오류가 발생하지는 않음
delete person1.hobby;
console.log(person1);{name: '홍길동', school: '한국대'}

delete 연산자를 써서 객체의 프로퍼티를 지우는 모습을 볼 수 있다. 

여기서 생성한 객체에는 없는 프로퍼티를 지우려고 해도 오류가 발생하지는 않는다는 점을 짚고 넘어가자. 단순히 아무 효과도 일어나지 않는다.

 

III. 키의 동적 사용

const product1 = {
  name: '노트북',
  color: 'gray',
  price: 800000
}

function addModifyProperty (obj, key, value) {
  // obj.key = value; // ⚠️ 의도와 다른 작업 수행
  obj[key] = value;
}
function deleteProperty (obj, key) {
  // delete obj.key // ⚠️ 의도와 다른 작업 수행
  delete obj[key]; //{name: '노트북', price: 750000, inch: 16}
}

addModifyProperty (product1, 'inch', 16);
console.log(product1); //{name: '노트북', color: 'gray', price: 800000, inch: 16}

product1이라는 객체를 생성했다. 여기서 함수  addModifyProperty는 인자 obj, key, value를 받고 obj[key] = value; 를 실행하게 된다. 

이런 상태에서 addModifiedProperty(product1, 'inch', 16); 을 하면 'inch'가 해당 함수에서 key값 인자로 들어가게 된다. 

따라서 obj[inch] = 16 (값도 마찬가지로 함수의 값 인자로 들어가게 된다) 이 되어 product1의 객체에 프로퍼티가 추가된 것을 볼 수 있다. 즉, 함수에서 인자 key에서 문자열 inch를 받아서 실행이 되게 된다. 

마침표 . 를 사용해서 접근하게 되면 인자에서 받는 값이 아니라 "key"라는 이름의 키의 값에 접근하겠다는 뜻이 되어 원하는 결과가 나오지 않게 된다는 점을 알고 넘어가자.

결과적으로 예시처럼 키를 동적으로 사용할 때는 대괄호 [ ] 프로퍼티 안에 해당 변수나 상수 같은 것을 넣어주는 식으로 사용하면 된다. 

예시에서는 inch라는 프로퍼티가 없었기 때문에 추가가 된 것을 알 수 있었다. 그렇다면 프로퍼티가 있을 때는 어떨까?

addModifyProperty (product1, 'price', 750000);
console.log(product1); //{name: '노트북', color: 'gray', price: 750000, inch: 16}

이처럼 price 프로퍼티가 수정된 것을 알 수 있다. 

 

deleteProperty 함수 같은 경우 키 값만 넣어주면 해당 객체의 프로퍼티를 삭제할 수 있다는 것을 확인할 수 있다. 

 

IV. ES6 추가 문법

1. 객체 선언 시 프로퍼티 키와 대입할 상수/변수명이 동일할 시 단축 표현

const x = 1, y = 2;

const obj1 = { 
  x: x,
  y: y
}

console.log(obj1);

const obj2 = { x, y } //{x: 1, y: 2}

console.log(obj2); //{x: 1, y: 2}

const obj2를 보면 매우 단순해 지는 것을 볼 수 있다. 

 

2. 메서드 method

객체에 축약표현으로 정의된 함수 프로퍼티다. 

// 일반 함수 프로퍼티 정의
const person = {
  name: '홍길동',

  salutate: function (formal) {
    return formal
    ? `안녕하십니까, ${this.name}입니다.`
    : `안녕하세요, ${this.name}이에요.`;
  }
}
console.log(person.salutate(true));

// ⭐️ 메서드 정의
const person = {
  name: '홍길동',
  
  salutate (formal) {
    return formal
    ? `안녕하십니까, ${this.name}입니다.`
    : `안녕하세요, ${this.name}이에요.`;
  }
}
console.log(person.salutate(true)); //안녕하십니까, 홍길동입니다.

두개의 예시를 비교해 보자. 일반 함수에서 프로퍼티를 정의할 때는 function을 사용하는 것을 볼 수 있는데 메서드 정의 함수는 사용하지 않는 것을 볼 수 있다.

지금은 이런 형식으로 쓸 수 있구나~ 정도로 보고 넘어가자.