[TDL] 05/22 Today's-Done-List

 

- leetcode array and string (Conclustion)

우선 해당 챕터를 다 풀기는 했는데, 버벅거리거나 솔루션보고 해결했던 문제들은
다음 주쯤에 array101과 같이 다시 풀어보며 복습하고 정리할 예정.

---

- 알고리즘 스터디 과제 : symbol 학습 및 정리

Symbol

• New in ECMA2015 (ES6)
• symbol은 객체 프로퍼티의 key를 문자형으로 나타낼 수 있다.

/* property key : 문자형 */
const obj = {
  1 : '1입니다.',
  false : '거짓'
}

Object.keys(obj); // ["1", "false"]

obj['1'] // "1 입니다."
obj['false'] // "거짓"

/* Symbol */

const a = Symbol(); // new를 붙이지 않는다.
const b = Symbol();

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

// Symbol은 유일한 식별자이다.
console.log(a == b) // false
console.log(a === b) // false

• Symbol은 유일성이 보장된다.

/* Symbol : 유일성 보장 */

const id = Symbol('id');
const id2 = Symbol('id);

console.log(id); // Symbol(id)
console.log(id2); // Symbol(id)

console.log(id == id2); // false
console.log(id === id2); // false

/* property key : 심볼형 */

const id = Symbol('id');
const user = {
  name : 'Mike',
  age : 30,
  [id] : 'myid'
}

console.log(user); // {name: "Mike", age: 30, Symbol(id): "myid"}
console.log(user[id]) // "myid"

// 아래의 메서드들은 key가 Symbol형 인 것들은 건너 뜀.
Object.keys(user); // ["name", "age"]
Object.values(user); // ["Mike", 30]
Object.entries(user); // [Array(2), Array(2)]

• Symbol.for( ) : 전역 심볼
  • 하나의 심볼만 보장받을 수 있음
  • 없으면 만들고, 있으면 가져오기 때문
  • Symbol 함수는 매번 다른 Symbol 값을 생성하지만,
  • Symbol.for 메서드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

// keyFor를 사용하여 심볼을 확인 가능.
id1 === id2; // true
Symbol.keyFor(id1) // id

// 전역 심볼이 아닌 심볼은 keyFor를 사용할 수 없는 대신, description 사용 가능.
const id = Symbol('id 입니다.');
id.description; // "id 입니다."

// 숨겨진 Symbol key 보는 법
const id = Symbol('id');
const user = {
  name : "Mike",
  age : 30,
  [id] : 'myid'
}

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

• 그러나 대부분의 라이브러리, 내장 함수들은 위의 메서드를 사용하지 않기 때문에,
  유일한 프로퍼티를 사용하고 싶을 때는 Symbol을 사용하는 것이 좋음.

 

• 다른 개발자가 만들어 놓은 객체를 보지 못하고, 내가 또 같은 작업을 한다면 코드가 얽혀서 이상하게 된다.

• 그것을 방지하기 위해 Symbol을 사용해보자

// 다른 개발자가 만들어 놓은 객체
const user = {
  name: "Mike",
  age: 30,
};

// 내가 작업
// user.showName = function () {}; // His showName is function () {}.
const showName = Symbol('show name');
user[showName] = function () {
  console.log(this.name); // His name is Mike. His age is 30.
}

user[showName](); // Mike

// 사용자가 접속하면 보는 메세지
for (let key in user) {
  console.log(`His ${key} is ${user[key]}.`);
}

https://www.youtube.com/watch?v=E9uCNn6BaGQ

---

symbol을 사용하는 이유

1. 필드를 객체 내부에 숨기기 위해서 사용하기에 Symbol로 선언한 world에는 접근할 방법이 없다

function getObject() {
  const world = Symbol();
  
  return {
    hello : 10,
    [world] : 10,
  };
}

const a = getObject();

a.hello // 10
a.hello = 20; // 20

2. 외부에서 접근하지 못하게, private선언을 할 수 있다.
다른 프로그래밍 언어들은 private 키워드 또는 enum이라고 하는 기능을 제공하는 식으로 대안이 있는 경우가 많음.
JS는 그 역할을 Symbol이라는 기능이 대신한다.

index.js 에서 Symbol값을 외부에 노출시키지 않았기에 일반적인 방법으로는 외부에서 count값을 변경할 수 없다.
물론 Symbol에 접근하는 것이 완전히 불가능하진 않지만, 현재 counter class 내부의 count Symbol은 외부에서 접근하지 못하게 하려고 private 선언을 하려 했단 걸 다른 개발자들에게 알려줄 수 있다.

// --- counter.js ---
const count = Symbol();

export default class Counter {
  [count] = 0;
  
  add() {
    this[count] += 1;
    return this;
  }
  
  get() { return this[count]; }
}


// --- index.js ---
import Counter from "./counter";

const counter = new Counter();
console.log(counter.get()); // 0

counter.add().add().add();
console.log(counter.get()); // 3

3. Symbol은 안전한 코드를 작성하는데 도움을 준다. (key값이 겹쳐서 꼬이는 것을 방지해줄 수 있다)
규모가 큰 프로젝트에서 코드가 너무 길고, 외부의 라이브러리를 불러서 사용하는데 멤버 변수가 너무 많을 경우,
상속받아서 코딩을 하다 보면 변수가 겹치는 일은 자주 발생할 수 있다.
이러한 경우에 Symbol을 이용해서 내부 변수를 선언하였다면, 라이브러리를 불러서 사용하는 입장에서 마음껏 상속받아서 아무거나 내부에 넣고 써도 된다.

class Counter {
  count = 0;
  
  add() {
    this.count += 1;
    return this;
  }
  
  get() {return this.count}
}

class BetterCounter extends Counter {
  count = function() { ... }; // conflict;
}

4. Symbol을 선언할 때, 매개변수에 문자열을 넣어서 생성할 수 있다. (주석 역할을 할 뿐, 기능적으로 달라지는 건 없다)

const a = Symbol();
const b = Symbol("something");

https://www.youtube.com/watch?v=11HkEyCrriE&t=326s

---

- 주말 셀프 회고

스터디 카페를 옮겼는데, 날짜 계산을 잘 못해서 오늘 하루가 빈 관계로 집에서 하기로 했는데...
일요일이고 집에서 하다 보니깐 공부에 집중이 전혀 되질 않았다ㅠ 역시 집은 유혹이 너무너무 많아~
내일부터 조금 더 일찍 일어나기 위해서 친구랑 챌린저스 비슷한 것을 하기로 하였다. 부지런한 습관을 위해 파이팅!

---

[ 출처, 참고 : https://www.youtube.com/watch?v=E9uCNn6BaGQ ]
[ 출처, 참고 : https://www.youtube.com/watch?v=11HkEyCrriE&t=326s ]