[TIL] 2022-11-10

1. javascript에서 문자열의 중복제거는 answer = [...new Set(my_string)].join(''); 이런 방식이 제일 속도가 빠른 것 같다.(실제로 프로그래머스에서 테스트해보니) filter와 indexOf를 이용한 중복제거보다 속도가 빠르게 나왔다.)
Set자료형(중복을 허용하지 않음)을 이용해서 중복제거를 한다. 다만 이해가지 않는 부분이 있었는데 new Set() 을 해서 생성자에 인자로 문자열을 넣는데 어떻게 자동으로 배열로 만들어주는건지가 이해가 안갔는데 new Set을 검색해보니 생성자는 2개다. new Set(), new Set(iterable) 이렇게 두개다. 그러므로 iterable인 객체만 할당이 가능하다. iterable인 객체는 (Array, Map (en-US), Set, String, TypedArray, arguments) 등이 있다.

 

2. iterable과 iterator가 차이

iterator는 간단하게 말해서 반복자다. javascript는 모든 것이 객체인데 이 iterator를 가졌다는 것을 말 그대로 반복자를 가진 것이고 객체가 자체적으로 반복을 돌면서 처리를 할 수 있다는 것이다. 이 iterator를 가진 내장 API들이 많은데 그 중 하나가 바로 Array []이다. 그래서 우리는 for문을 따로 쓰지 않고도 array.map을 통해서 반복문을 돌 수 있다.

그리고 이 iterator를 가진 객체를 iterable 객체라고 한다. array, Set, String 등등 많은 내장 API들이 iterable 객체라고 할 수 있다. 직접 만드는 것도 가능하다고 한다. 다만 좀 어렵다고..

 

3. javascript에서의 this (이건 봐도봐도 헷갈린다..)

계속봐도 계속 헷갈리는 this다. 오늘 또 이 this에 대해서 하나를 배웠으니 그것만 다시 복습하고 넘어가자.

너무 여러가지 경우의 수가 있지만 그 중 하나는 화살표함수는 this를 가지지 않는다. 그래서 오늘 프로그래머스 문제를 풀면서 이런 코드를 작성했는데 myFilter를 주석처럼 화살표함수를 선언하면 내부의 this를 사용할때 내가 원한 this는   my_string 이라는 배열이었는데 실제 가리키는 것은 nodejs환경이라서 module.exports, 즉 빈 객체를 가리킨다.

만약 브라우저 환경이라면 window를 가리킬것이다.

여튼 정리하자면 화살표 함수는 자신을 둘러싸고 있는 상위 스코프의 this를 가진다!

그래서 주석을 풀고 화살표 함수를 사용하면 this는 화살표 함수가 실행된 환경인 solution함수의 this를 사용하고, 이때 solution 함수는 일반함수이므로 전역범위를 가지고 있다. 그러므로 this는 전역객체를 가리킨다.

function solution(my_string) {
  var answer = "";

  my_string = my_string.split("");
  my_string.myFilter = myFilter;

  answer = my_string.myFilter((letter, index) => my_string.indexOf(letter) === index);

  return answer;
}

//const myFilter = (callback) => {
const myFilter = function (callback) {
  let myArray = this.map((one, index) => {
    if (callback(one, index) === true) {
      return one;
    }
  });
  return myArray.join('');
};

4. 구조분해 할당과 spread 연산자가 잘 이해가 안가서 간단하게 설명하고 넘어가려고 한다.

-1. 구조분해할당, spread연산자
구조분해할당은 객체나 배열을 변수로 분해(선언) 할때 사용하는 것이다.

let arr = ["JY", "Kim"];
let [firstname, surname] = arr;

console.log(firstname); //JY
console.log(surname); //Kim

 

spread연산자는 배열이나 문자열과 같이 반복이 가능한 "iterable" 객체를 풀어서 전개 시키는 용법이다.

const arr = [1, 2, 3, 4, 5];
const str = "string";

console.log(...arr); // 1 2 3 4 5
console.log(...str); // "s" "t" "r" "i" "n" "g"

구조분해할당을 할때도 let [firstname, surname, ...spread] = arr; 처럼 사용할 수 있지만 이때 사용하는 ...은 spread연산자가 아니고 나머지를 저장한다는 의미로 사용하는 rest연산자이다. 이것때문에 헷갈린 것 같다. 헷갈리지 말자!