JS_기본 문법 (23)_ 객체 +

2022.02.10 - [🌌 | WEB DEV/Vanilla JS] - JS_기본문법 (3)_객체

기존에 다루었던 JS의 객체에 대해서 조금 더 알아보자!

 

1. 객체 생성 & 접근

예전 포스트에서 다루었던 대괄호 표기법은 다양한 방식으로 활용할 수 있다. 

 

1) 식별자 명명 규칙에서 벗어난 키 이름에 접근

const obj = {
  'ab-1' : 100,
  'c d' : 'Hello'
};

console.log(
  obj['ab-1'],
  obj['c d']
);

>>> 100
>>> 'Hello'

위처럼 명명 규칙을 어긴 경우에도 ' '(따옴표)를 이용하여 키 이름으로 설정하고

이를 대괄호 표기법으로 접근할 수 있다.

 

 

2) 표현식에 이용

연산을 하여 키값으로 설정을 할 경우에도 대괄호를 이용한다.

let idx = 0;
const obj = {
  ['user-' + ++idx] : `info-${idx}`,
  ['user-' + ++idx] : `info-${idx}`,
  ['user-' + ++idx] : `info-${idx}`,
}

console.log(obj);

>>> {user-1: 'info-1', user-2: 'info-2', user-3: 'info-3'}

 

 

3) 주의!! 객체나 배열을 키 값으로 사용??

객체나 배열을 키 값으로 사용하여 보자.

const obj = {x: 1, y: 2};
const arr = [0, 1, 2];

const result = {
  [obj] : '객체',
  [arr] : '배열'
};

console.log(
  result[obj],
  result[arr],
);

>>> 객체 배열

위의 결과로 보았을 때 문제가 없는 듯하다

 

하지만 다른 예시를 보자!

console.log(
  result[{}],
  result['0,1,2'],
);

>>> 객체 배열

이처럼 아예 다른 값들을 넣었음에도 불구하고 위와 같은 결과를 반환한다!

 

그 이유를 알아보면

console.log(
  result
);

>>> {[object Object]: '객체', 0,1,2: '배열'}

객체의 경우

객체를 단순히 문자열로 치환한 값( [object Object] ) 이 키값으로 저장되어 있다.

따라서 아무 객체를 넣어도 이 키값으로 접근이 된다.

 

배열의 경우

배열 내 원소를 쉼표로 이어붙인 문자열로 치환된다.

 

즉, 실제 객체나 배열이 키값이 되는 것이 아니다.

따라서 객체나 배열을 키값으로 활용해서는 안된다.

 

 

4) 키 동적 활용

매개변수를 통해 객체와 키값을 받고 그를 활용하는 함수를 만들어보자.

 

대괄호 표기법을 이용한 함수와 점 표기법을 사용한 함수를 비교하여 보자!

const obj = {
  name : 'Kassid',
  job : 'student',
  major : 'Computer Engineering',
  age : 25
};

function addProp1(prop, key, value){ //대괋호 표기법 사용
  prop[key] = value;
  console.log(prop);
}

function addProp2(prop, key, value){ //점 표기법 사용
  prop.key = value;
  console.log(prop);
}

 

1_ 대괄호 표기법 함수 사용시

addProp1(obj, grade, 3);

>>> {name: 'Kassid', job: 'student', major: 'Computer Engineering', age: 25, grade: 3}

의도한 대로 새로운 프로퍼티가 생성이 된 것을 알 수 있다.

 

2_ 점 표기법 함수 사용시

addProp2(obj, 'grade', 3);

>>> {name: 'Kassid', job: 'student', major: 'Computer Engineering', age: 25, key: 3}

의도한 것과 다르게 키의 이름이 grade가 아닌 key 라는 이름으로 생성 되었다.

 

따라서 동적으로 키를 사용할 때에는 꼭 대괄호를 활용해야한다!

(생성 뿐 아니라 업데이트, 삭제도 가능하다.)

 

 

---

2. ES6 문법

그동안 익스플로어로 인해 잘 사용하지 못했던 문법들에 대해서 알아보자.

 

1) 객체 생성 시 키이름과 값에 해당하는 변수/상수 이름이 같은 경우

먼저 일반적인 방법으로 구현을 해본다면 아래와 같다.

 

예시 1) 기존의 방법

let x = 1;
let y = 2;

const obj = {
  x : x,
  y : y
};

console.log(obj);

>>> {x: 1, y: 2}

 

 

예시 2) ES6 문법 활용

const obj2 = {x, y};

console.log(x, y);

>>> {x: 1, y: 2}

이처럼 대괄호 안에 변수/상수를 대입한다면

그 이름을 키로 갖는 객체를 생성한다.

 

 

예시 3) 함수로의 확장

function createObj(name, desc, price){
  return {name, desc, price};
}

const bread1 = createObj('튀김소보로', '대전 성심당', 1500);
console.log(bread1);

>>> {name: '튀김소보로', desc: '대전 성심당', price: 1500}

이를 이용한 함수를 만든다면 위와 같이 구현할 수 있다.

 

 

2) 메서드 (method)

객체에 축약된 표현으로 정의된 함수 프로퍼티를 메서드라고 칭한다.

 

이때 주의할 점은 일반 함수 프로퍼티와 메서드는 차이가 있다.

 

case_1 일반함수 프로퍼티

const obj = {
  say : function(isUser){
    return isUser
    ? '안녕하세요. 처음 오셨군요?'
    : '안녕하세요. 또 와주셨군요?'
  }
}

console.log(obj.say(true));

>>> 안녕하세요. 처음 오셨군요?

 

case_2 메서드

const obj = {
  say (isUser){
    return isUser
    ? '안녕하세요. 처음 오셨군요?'
    : '안녕하세요. 또 와주셨군요?'
  }
}

console.log(obj.say(true));

>>> 안녕하세요. 처음 오셨군요?

ES6 이후에는 이러한 방법 만을 메서드라고 칭한다.

일반 함수 프로퍼티와 메서드는 특성과 기능이 조금 다른데 이는 추후에 다뤄보도록 하겠다!