js 중급 기본 정리 (with 앙마코딩) 생성자 함수(new) 객체 메서드, 계산된 프로퍼티, 심볼 Symbol

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)

문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

생성자 함수

function Item(name, price){

  /*this = {};*/
  this.name = name;
  this.price = price;
  /*return this;*/
}

const item1 = new Item('사과', 5000);
const item2 = new Item('배', 7000);

console.log(item1 , item2); /*값 :Item {name : '사과', price : 5000} , Item {name: '배', price : 7000) */

new 뒤에 함수를 붙이게 되면 주석처리된 this와 return이 자동으로 실행되게 된다. 만약 new가 없다면 return값이 없기 때문에 console.log(item1)은 undefinded가 될 것이다.

나는 new 함수에 학습할 때 this가 무엇인지 갈피를 못잡았었다. 이 강의를 통해 `this`라는 빈 객체를 만드는 과정이 생략된 것을 알았고, 객체에 기본 내용에 대해 한 번더 학습하면서 위 소스에 대한 이해도가 올라갔다.

---

객체 메서드 , Computed property

Computed property

- 계산된 프로퍼티

let a = 'age;
const user = {
  name : 'Btae',
  age : 27,
}
/* age 대신 [a] 사용가능*/

계산된 프로퍼티에서는 대괄호([])를 통해 할당된 변수를 이용하여 키값을 입력할 수 있고 `[1+2]` or `['안녕'+'하세요']` 와 같은 식을 이용하여 키값을 입력 할 수 있다.

객체 메서드

/* Object.assign() 객체 복제 */
const user = { name : 'Btae', age : 27, }

/*const cloneUser = user ; 잘못된 복제*/
const cloneUser = Object.assign({}, user);

객체를 할당한 변수는 링크와 느낌이 비슷하기 때문에, 잘못된 복제 방법으로 복제했을 경우 오류는 나타나지 않지만, cloneUser나 user 객체 중 하나라도 변경할 경우 두 객체 모두 변하게 된다. ( 링크가 연결한 페이지는 같기 때문 ) 따라서 `assign()` 메서드를 사용하여 객체를 새로 복제해야한다. 첫 번째 매개변수(?)인 중괄호는 초깃값(빈 객체)를 의미하고 두 번째 매개변수는 첫 번째 인수에 들어갈 객체를 의미한다. 첫 번째 새로운 빈 객체를 만들고 존재하던 객체를 그 안에 포함하여 새로운 객체지만 똑같은 객체를 만들 수 있다.

인수를 늘려 여러 객체를 합쳐 복제하는 방법도 있다.

변형

초깃값에 값이 입력되어 있을 경우 합쳐진다.

const cloneUser = Obeject.assign({ gender : 'male'} , user);
cloneUser = {
    gender : 'male' 
    name : 'Btae' 
    age : 27,
}

매개 변수에서 키값이 동일하다면 덮어쓴다.

const cloneUser = Obeject.assign({ name : 'Tom'} , user);

cloneUser = { name : 'Btae' age : 27,}
/*name : 'Tom'은 사라진다.*/ 

/* Object.keys() , Object.values() 키, 값을 배열로 반환*/

const user = { name : 'Btae', age : 27, }

Object.keys(user); /* ['name', 'age']*/  
Object.values(user); /*['Btae', 27]*/

객체에 키나 값을 배열로 반환하기 위한 메서드이다. 값이 배열로 반환되기 때문에 Object.keys(user)[0]의 값은 'name'이 된다.

/*Object.entries() , Object.fromEntries() 키/값을 같이 배열로 반환, 배열을 객체로 반환*/
const user = {
  name : 'Btae',
  age : 27,
}
const arr = 
      [
        ['name','Btae'],
        ['age', 27]
      ];


Object.entries(user); /*       [ ['name','Btae'], ['age', 27] ]; */
Object.fromEntries(arr); /*    { name : 'Btae', age : 27,}*/

객체를 배열로, 배열을 객체로 반환할 때 사용한다.

객체에 대한 이해도가 조금씩 높아지는 것 같다. 사실 객체를 어떻게 사용해야 하는지 어떤 부분에서 필요한지 잘 몰랐으나, 메서드를 활용하는 방법을 학습하면서 입력 받은 값을 객체로 저장을 하고 필요에 따라서 그 키값에 값을 가져오거나 변형해야 하는 상황에서 사용할 수 있다고 어림잡아 생각하고 있고, 만약 그 생각이 맞다면 매우 중요한 부분이 될 것 같다고 생각이 든다.

---

Symbol (심볼)

객체에 키는 문자열을 사용을 했다.

const a = {
  true : 'hi',
  66 : 66,
}
Object.keys(a); /* ['true' , '66']*/

/* 숫자나 불린 값을 입력해도 문자열로 반환된다.*/

키 값을 사용할 수 있는 다른 방법은 심볼이다.
심볼을 사용하는 경우는 객체를 이용하여 사용한 메서드 등에 영향을 끼치지 않고 객체에 내용을 추가할 때 사용한다.
(다른 개발자가 작성한 코드에 내 코드를 끼워 넣을 때 기존 반환 값에 영향을 미칠 수 있을 때 사용한다.)

따라서 Symbal(심볼)은 유일성을 보장한다. 유일한 식별자

const a = Symbol(); /* 심볼을 선언할 때 new를 붙이지 않는다. */
const b = Symbol();

console.log(a) /* Symbol()*/
console.log(b) /* Symbol()*/

a == b /* false*/

위 예시에서 변수 a, b의 값은 같게 표시되지만 실제로는 다르다. 이는 심볼이 유일한 식별자이기 때문에 이름이 같더라도 다른 개념이다. 따라서 전체 코드 중에 단 한개만 있는 것이다.

js const a = Symbol('name'); 후에 디버깅 등과 같이 관리하기 위해 설명을 괄호안에 적어 작성하는 것이 좋다. 설명이 같더라도 마찬가지로 심볼은 다른 하나의 존재이다.

심볼을 키로 사용할 때

const id = Symbol('id'); const user = { name : 'Btae', age : 27, \[id\] : 'Btae96' }

user /* = { name : 'Btae', age: 27, Symbol(id): 'Btae96'}*/  
user[id] /* 'Btea96'*/

Object.keys(user); /* ['name', 'age'] */

심볼을 키로 사용할 경우 다른 객체와 동일하게 나타나지만, 메서드를 이용하여 키 값을 배열로 반환했을 때는 나타나지 않는다.
심볼을 키로 사용한 값은 메서드 처리과정에서 건너뛰게 된다. 이는 keys, values, entries, fromEntries도 마찬가지이다.

기존 코드에서 객체에 같은 키 값이 있는지 찾기가 어렵고 keys 메서드를 이용하여 다른 곳에서 사용하고 있다면. 단순히 프로퍼티를 추가해여 객체에 삽입했을 때 문제가 발생할 수 있기 때문에 사용한다.

전역 심볼

전역 심볼은 Symbol.for()로 표기하며 항상 새로운 값을 생성하는 심볼과 다르게 하나를 생성하고 키를 통해 같은 Symbol을 공유한다. 이는 하나의 심볼만 보장 받을 수 있다는 장점이 있다(없으면 만들고 있다면 가져오기 때문에)

const a = Symbol.for('id'); 
const b = Symbol.for('id');

console.log(a) /* Symbol('id')*/
console.log(b) /* Symbol('id')*/

a === b /* true*/

따라서 같은 이름이라면 동일하게 취급을 한다.

변수를 통해 심볼 이름 찾기

const a = Symbol.for('id_a');
const b = Symbol('id_b');

Symbol.keyFor(a) /*'id_a'*/
b.description; /*'id_b'*/

심볼과 전역 심볼에 따라 찾는 방법이 다르다. (한 가지 방법으로 둘다 찾을 수는 없다.)
변수를 통해 심볼에 설명을 찾을 수 있다.

숨겨진 심볼을 찾는 법

const id = Symbol('id');
const user = {
  name : 'Btae',
  age : 27,
  [id] : 'Btae96'
}

Object.getOwnPropertySymbols(user); /* [Symbol(id)]*/
Reflect.ownKeys(user); /* [ 'name', 'age', Symbol(id)]*/

이 처럼 심볼을 볼 수 있는 메서드가 있다. 다만 대부분의 라이브러리나 내장 함수는 이런 함수를 실행하지 않기 때문에, 걱정할 필요는 없다.

심볼에 역할은 확실히 알았지만, 아직 객체에 사용 용도를 정확하게 파악하지 못해 응용할 수 있는 부분에 상상이 잘 안간다. 지금은 완벽하게 이해하고 응용할 수는 없을 것 같고, 우선 어떤 상황에 사용해야 하는지 알고 넘어간다.