문제출처

Solution

function solution(a, b) {
  var answer = '';
  const month = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  const day = ["FRI", "SAT", "SUN", "MON", "TUE", "WED", "THU"]
  let idx = 0
  for (let i = 0; i < a - 1; i++) idx += month[i];
  answer = day[(idx + b - 1) % 7]
  return answer;
}

문제 출처

Solution

function solution(numbers) {
  var answer = [];
  for (let i = 0; i < numbers.length - 1; i++)
    for (let j = i + 1; j < numbers.length; j++)
      if (!answer.includes(numbers[i] + numbers[j]))
        answer.push(numbers[i] + numbers[j])
  return answer.sort((a, b) => a - b);
}

문제출처

Solution

function solution(d, budget) {
  var answer = 0;
  let tmp = 0
  d.sort((a, b) => a - b)
  for (let num of d) {
    tmp += num
    answer++;
    if (tmp === budget) break
    else if (tmp > budget) {
      tmp -= num
      answer--;
    }
  }
  return answer
}

Cleanup

function solution(d, budget) {
  var answer = 0;
  let tmp = 0
  d.sort((a, b) => a - b).forEach(num => {
    tmp += num
    if (tmp <= budget) answer++;
  })
  return answer
}

문제출처

Solution

function solution(n) {
  var answer = 0;
  let num3 = []
  while (n > 2) {
    num3.push(n % 3)
    n = parseInt(n / 3)
  }
  num3.push(n)
  num3.reverse()
  answer = num3.reduce((acc, cur, idx) => acc + cur * Math.pow(3, idx))

  return answer;
}

Cleanup

const solution = (n) => {
    return parseInt([...n.toString(3)].reverse().join(""), 3);
}

• toString을 이용해 n을 3진법 문자열로 변경

  toString 참고

• 변경된 문자열을 전개 연산자를 이용해 각 문자를 분리해 배열로 저장

• 변경된 배열을 뒤집은 뒤 10진 parseInt로 10진법으로 변경

  parseInt 참고

문제출처

Solution

function solution(left, right) {
  var answer = 0;
  for (let num = left; num <= right; num++) {
    let tmp = []
    for (let i = 1; i <= num; i++)
      if (num % i === 0) tmp.push(i)
    answer += tmp.length % 2 === 0 ? num : -num
  }
  return answer;
}

문제 출처

Solution

function solution(N, stages) {
  let tmp = []
  let nonClearPlayer = Array.from({
    length: N
  }, () => 0)
  let stageCount = Array.from({
    length: N
  }, () => 0)

  stages.forEach(playerStage => {
    if (playerStage <= N) nonClearPlayer[playerStage - 1]++
    for (let i = 1; i <= playerStage; i++) {
      if (i <= N) stageCount[i - 1]++
    }
  })

  for (let i = 0; i < N; i++) {
    const dict = {}
    dict["num"] = i + 1
    dict["rate"] = nonClearPlayer[i] / stageCount[i]
    tmp.push(dict)
  }
  return tmp.sort((a, b) => b.rate - a.rate).map(el => el["num"])
}

• nonClearPlayer에 각 스테이지 별로 클리어하지 못하고 머무르는 인원 수 저장
• stageCount에 각 스테이지 별로 지나쳐간 인원과 머물러 있는 인원 수의 합 저장
• tmp에 "num" : 스테이지 번호, "rate" : 실패율의 형태로 Object 객체 생성
• 실패율을 기준으로 정렬한 뒤 스테이지 번호만 배열로 반환

Clean-up

function solution(N, stages) {
    let result = [];
    for(let i=1; i<=N; i++){
        let reach = stages.filter((x) => x >= i).length;
        let curr = stages.filter((x) => x === i).length;
        result.push([i, curr/reach]);
    }
    result.sort((a,b) => b[1] - a[1]);
    return result.map((x) => x[0]);
}

• reach에 도달한 인원수 저장
• curr에 현재 머무르고 있는 인원수 저장
• 실패율을 계산하여 result에 push

문제 출처

Solution

function solution(nums) {
  var answer = 0;
  let tmp = []
  nums.forEach(el => {
    if (!tmp.includes(el)) tmp.push(el)
  })
  return answer = nums.length / 2 > tmp.length ? tmp.length : nums.length / 2;
}

문제 출처

Solution

function solution(n, lost, reserve) {
  let rent = [];
  const more = reserve.filter(el => !lost.includes(el)).sort((a, b) => a - b)
  const need = lost.filter(el => !reserve.includes(el)).sort((a, b) => a - b)
  need.forEach(el => {
    if (el - 1 > 0 && more.includes(el - 1) && !rent.includes(el - 1)) {
      rent.push(el - 1)
    } else if (el + 1 <= n && more.includes(el + 1) && !rent.includes(el + 1)) {
      rent.push(el + 1)
    }
  });
  return n - (need.length - rent.length);
}

Clean-up

BYUNGI님의 코드

function solution(n, lost, reserve) {      
    return n - lost.filter(a => {
        const b = reserve.find(r => Math.abs(r-a) <= 1)
        if(!b) return true
        reserve = reserve.filter(r => r !== b)
    }).length
}

문제 출처

Solution

function solution(answers) {
  var answer = []
  let result = []
  const patterns = [
    [1, 2, 3, 4, 5],
    [2, 1, 2, 3, 2, 4, 2, 5],
    [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]
  ]
  patterns.forEach(pattern => {
    let idx = 0
    let count = 0
    answers.forEach(num => {
      if (num === pattern[idx]) {
        count++
      }
      idx++
      if (idx === pattern.length) {
        idx = 0
      }

    })
    answer.push(count)
  })
  max_idx = 0
  for (let i = 1; i < 3; i++)
    if (answer[max_idx] < answer[i]) max_idx = i;
  for (let i = 0; i < 3; i++)
    if (answer[i] === answer[max_idx]) result.push(i + 1)

  return result;
}

}

Clean-up

function solution(answers) {
    var answer = [];
    const a1 = [1, 2, 3, 4, 5];
    const a2 = [2, 1, 2, 3, 2, 4, 2, 5]
    const a3 = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5];

    const a1c = answers.filter((a,i)=> a === a1[i%a1.length]).length;
    const a2c = answers.filter((a,i)=> a === a2[i%a2.length]).length;
    const a3c = answers.filter((a,i)=> a === a3[i%a3.length]).length;
    const max = Math.max(a1c,a2c,a3c);

    if (a1c === max) {answer.push(1)};
    if (a2c === max) {answer.push(2)};
    if (a3c === max) {answer.push(3)};

    return answer;
}

• filter메서드를 이용해 조건에 맞는 요소만 모아 answers 배열을 생성. filter메서드의 인수로 배열의 요소와 인덱스를 추가했다. 인덱스는 옵션.
• 해당 배열의 개수가 정답 수에 해당.
• i%a2.length인덱스를 패턴의 길이로 나누면 인덱스 범위 초과 없이 반복할 수 있다.

Document Objenct Model. 브라우저와 HTML 간의 인터페이스라고 볼 수 있다. 브라우저가 HTML을 해석하고 그 내용을 토대로 페이지를 랜더링하는데 DOM이 그 역할을 한다. DOM은 HTML문서를 객체화하여 브라우저가 해석할 수 있도록 한다. 이 객체를 javascript를 이용해서 조작할 수 있는 프로퍼티와 메서드의 집합인 DOM API를 제공한다.

• DOM은 HTML과 같은 것이 아니다. HTML에는 없었던 요소를 DOM을 조작해서 추가할 수 있고, 반대의 경우도 가능하다.
• display:none속성을 가진 요소를 DOM을 이용해서 선택, 수정이 가능하다. 이런 요소는 Render tree에 해당하는 뷰 포트에는 포함되지 않지만, DOM에는 포함된다.
• ::after, ::before와 같은 가상 요소는 DOM을 조작하여 선택하거나 수정할 수 없다.

Virtual DOM

리액트, 뷰와 같은 프레임워크에서 사용하는 DOM을 추상화한 모델을 이용해 DOM을 조작하는 방법이다. DOM을 직접 조작하여 변경 사항을 만들어 낼 경우, 변경 사항이 생길 때마다 Render tree를 만들어서 랜더링을 새로 한다.

기존의 DOM의 동작을 보면 HTML과 CSS를 이용해서 각각 DOM/CSSOM tree를 만든다. 이 두 tree를 합쳐서 Render tree를 구성하는데 트리의 규모가 크면 랜더링하는데 오랜 시간이 걸리는 문제점이 발생한다. 이를 해결하고자 가상 DOM이 만들어졌다.

변경 사항을 먼저 가상 DOM에 리랜더링 한 뒤에 기존의 DOM과 비교하여 차이점만 DOM에 랜더링한다.(diffing) DOM의 랜더링 횟수를 줄여서 속도를 줄이는 것이 가상DOM의 사용 목적이라고 볼 수 있다.

DOM vs Virtual DOM

중간에 가상DOM을 거친다는 점을 제외하면 DOM과 가상DOM의 동작방식은 매우 유사하다. DOM에서 10번의 랜더링이 이루어지만 마찬가지로 가상 DOM에서도 10번의 랜더링이 이루어진다. 가상DOM 또한 최적화가 잘 이루어지지 않았다면 오히려 속도가 느릴 수도 있다. DOM을 직접 조작하는 것과 가상DOM을 이용하는 것 중에 어떤 것이 더 효율적인지 알고 사용할 필요가 있고, 가상 DOM을 이용한다고 해도 어떻게 사용해야 좋을지 파악하는 것이 더욱 중요하다.

참조

• https://poiemaweb.com/js-dom

• https://wit.nts-corp.com/2019/02/14/5522
• https://d2.naver.com/helloworld/59361
• https://moonsbeen.tistory.com/255

문제 출처

Solution

function solution(array, commands) {
  var answer = [];
  commands.forEach(element => {
    answer.push(
      array.slice(element[0] - 1, element[1])
      .sort((a, b) => a - b)[element[2] - 1])
  });
  return answer;
}

문제 출처

Solution

효율성 검사 실패

function solution(participant, completion) {
  completion.forEach(el => {
    let idx = participant.indexOf(el)
    participant.splice(idx, 1)
  });
  return participant[0]
}

completion에 담긴 모든 요소에 대해서 participant에 있을 경우 해당 인덱스를 찾아서 배열에서 제거해주는 방식으로 풀었을 때, 효율성 검사를 통과하지 못한다.

indexOf는 호출될 때마다 0번 인덱스부터 완전 탐색을 통해서 요소를 탐색하기 때문에 completion과 participant의 요소가 많으면 시간이 오래 걸릴 수 밖에 없다.

효율성 검사 성공

function solution(participant, completion) {
  var answer = ''
  let part = Object()
  participant.forEach(el => {
    if (part[el] === undefined) {
      part[el] = 1
    } else {
      part[el]++
    }
  });
  completion.forEach(el => {
    part[el] -= 1
  });
  const part_key = Object.keys(part)
  const part_value = Object.values(part)
  answer = part_key[part_value.indexOf(1)]
  return answer
}

1. participant의 요소를 key로 하여 해당 key값의 개수만큼 value를 가지는 part Object 생성
2. completion의 요소를 key로 하여 해당 key값의 개수만큼 part의 value값을 하나씩 차감
3. part의 key와 value를 가지는 배열을 각각 생성
4. part_value에서 값 1에 해당하는 요소의 인덱스와 같은 인덱스의 part_key값 반환

효율성 검사는 key값으로 value값에 바로 접근할 수 있는 Object를 이용해서 해결했다. Object를 이용하면 participant과 completion에 동일한 요소가 있을 수 있다는 문제의 제약사항을 해결할 수 있다. key : value 형태로 접근하면 시간 복잡도가 O(1)이기 때문에 쉽게 찾아서 값을 변경할 수 있다.

participant가 N개의 요소를, completion이 M개의 요소를 가진다고 했을 때, 효율성 검사를 통과하지 못한 코드는 (N*M) 번의 탐색이 필요하고, 효율성 검사를 통과한 코드는 최대 (2N+M)번을 탐색한다.

문제 출처

Solution

function solution(nums) {
  var answer = 0;
  let set = []

  for (let i = 0; i < nums.length; i++) {
    for (let j = i + 1; j < nums.length; j++) {
      for (let k = j + 1; k < nums.length; k++) {
        set.push(nums[i] + nums[j] + nums[k])
      }
    }
  }

  set.forEach(el => {
    let idx = 2
    for (idx = 2; idx < el; idx++) {
      if (el % idx === 0) {
        break
      }
    }
    if (idx === el) answer++;
  })
  return answer;
}

배열에서 숫자 세 개를 포함하는 조합의 개수를 set에 저장한 뒤 forEach메서드를 활용해서 서로소 일 때만 answer값을 추가해 준다.

1.1 반복문 이용

isUse = [False] * 4
set = []

for i in range(4):
    if isUse[i]:
        continue
    isUse[i] = True
    for j in range(4):
        if isUse[j]:
            continue
        isUse[j] = True
        for k in range(4):
            if isUse[k]:
                continue
            isUse[k] = True

            tmp = arr[i], arr[j], arr[k]
            set.append(tmp)

            isUse[k] = False
        isUse[j] = False
    isUse[i] = False

입력 : [1, 2, 3, 4]

출력 (1, 2, 3) (1, 2, 4) (1, 3, 2) (1, 3, 4) (1, 4, 2) (1, 4, 3) (2, 1, 3) (2, 1, 4) (2, 3, 1) (2, 3, 4) (2, 4, 1) (2, 4, 3) (3, 1, 2) (3, 1, 4) (3, 2, 1) (3, 2, 4) (3, 4, 1) (3, 4, 2) (4, 1, 2) (4, 1, 3) (4, 2, 1) (4, 2, 3) (4, 3, 1) (4, 3, 2)

반복문을 이용해서 순열을 쉽게 구할 수 있지만, 위으 예처럼 4개 중에 3개가 아닌 훨씬 더 큰 경우의 수를 구하려면 코드가 굉장이 길어진다. 재귀 함수를 이용하면 순열의 개수에 상관없이 일정한 코드를 사용할 수 있다.

1.2 재귀 이용

import copy
set = []
tmp = []  # 수를 저장할 배열

def Permutation(cnt):
    if len(tmp) == cnt:
        made = copy.deepcopy(tmp)
        set.append(made)
        return

    for i in range(4):
        if arr[i] in tmp:
            continue
        tmp.append(arr[i])
        Permutation(cnt)
        tmp.pop()
Permutation(3)

입력 : [1, 2, 3, 4]

출력 (1, 2, 3) (1, 2, 4) (1, 3, 2) (1, 3, 4) (1, 4, 2) (1, 4, 3) (2, 1, 3) (2, 1, 4) (2, 3, 1) (2, 3, 4) (2, 4, 1) (2, 4, 3) (3, 1, 2) (3, 1, 4) (3, 2, 1) (3, 2, 4) (3, 4, 1) (3, 4, 2) (4, 1, 2) (4, 1, 3) (4, 2, 1) (4, 2, 3) (4, 3, 1) (4, 3, 2)

2. 조합

2.1 반복문 이용

set = []

for i in range(4):
    for j in range(i+1, 4):
        for k in range(j+1, 4):
            tmp = arr[i], arr[j], arr[k]
            set.append(tmp)

입력 : [1, 2, 3, 4]

출력 : (1, 2, 3), (1, 2, 4), (1, 3, 4), (2, 3, 4)

순열과 다르게 조합은 순서에 상관이 없다. 직전 반복문에서 사용한 숫자를 다시 사용하지 않기 위해서 바로 다음 요소부터 반복문을 수행하도록 순서를 강제해야 한다.

2.2 재귀 이용

import copy
tmp = []
set = []

def Combination(idx, cnt):
    if len(tmp) == cnt:
        made = copy.deepcopy(tmp)
        set.append(made)
        return

    for i in range(idx, 4):
        tmp.append(arr[i])
        Combination(i+1, cnt)
        tmp.pop()

Combination(0, 3)

입력 : [1, 2, 3, 4]

출력 : (1, 2, 3), (1, 2, 4), (1, 3, 4), (2, 3, 4)

문제 출처

Solution

function solution(board, moves) {
  var answer = 0;
  let basket = []
  const N = board.length
  moves.forEach(loc => {
    for (let i = 0; i < N; i++) {
      if (board[i][loc - 1] !== 0) {
        const tmp = board[i][loc - 1]
        board[i][loc - 1] = 0
        if (basket[basket.length - 1] === tmp) {
          basket.pop()
          answer += 2
        } else {
          basket.push(tmp)
        }
        break
      }
    }
  });
  return answer;
}
}

동기식 : 응답을 받아야만 다음 동작을 이어가는 방식 비동기식 : 응답 여부와 관계 없이 다음 동작을 이어가는 방식

자바스크립트는 기본적으로 동기식으로 작동한다. 하나의 Call Stack만 사용하기 때문에, JS만으로는 비동기식 동작을 구현할 수 없다. 따라서 브라우저에서 지원하는 Web API를 이용해서 비동기식 동작을 구현하게 된다. setTimeout이나 axois를 이용해 요청을 보내고 응답을 기다려야 할 경우, 이 함수는 Web API로 넘어가게 되고 다른 함수가 Call Stack으로 들어와 실행되는데, 이를 오히려 방지해야 하는 경우가 있다.

자바스크립트의 동작 원리 참고

function a() {
  setTimeout(() => {
    console.log('A')
  }, 1000);
}

function b() {
  console.log('B')
}

function test() {
  a()
  b()
}
test()
// B
// A

1. callback

함수의 실행의 순서를 보장하고 싶을 때 사용할 수 있는 방법 중에 하나로 callback이 있다.

function a(callback) {
  setTimeout(() => {
    console.log('A')
    callback()
  }, 1000);
}

function b(callback) {
  console.log('B')
  callback()
}

function c(callback) {
  setTimeout(() => {
    console.log('C')
    callback()
  }, 1000);
}

function d(callback) {
  console.log('D')
  callback()
}

function test() {
  a(() => {
    b(() => {
      c(() => {
        d(() => {
        })
      })
    })
  })
}
test()
// A
// B
// C
// D

callback을 사용하지 않고 실행하면 실행하는데 딜레이가 있는 a함수보다 b함수가 먼저 실행되겠지만, 비동기 실행을 했기 때문에 순서대로 실행이 되었다. 하지만 callback을 여러 개 중첩해서 사용할 경우 코드가 복잡해지고 관리가 어려워진다. 위 코드처럼 순차적으로 되어 있지 않고 조금만 복잡해도 알아보기 힘들 것이다.

2. Promise

Promise 참고

callback 함수를 사용해 순서를 보장해 주는 것처럼 함수 실행의 순서를 보장할 수 있는 방법으로 Promise 객체를 사용하는 방법이 있다.

2.1 비동기 실행

function a() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('A')
      resolve()
    }, 1000)
  })
}

function b() {
  return new Promise((resolve) => {
    console.log('B')
    resolve()
  })
}

function c() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('C')
      resolve()
    }, 1000)
  })
}

function d() {
  return new Promise((resolve) => {
    console.log('D')
    resolve()
  })
}

function test() {
  a().then(() => {
    b().then(() => {
      c().then(() => {
        d().then(() => {
          console.log('Done')
        })
      })
    })
  })
}
test()

a, b, c, d 함수는 각각 Promise 객체를 반환한다. Promise 객체의 매개변수로 하나의 함수가 들어가고, 해당 함수의 매개변수로 resolve가 할당된다. 이 resolve는 callback과 대응한다고 볼 수 있다.

a 함수 내부에서 resolve 매개변수가 실행될 때까지 앞의 코드가 실행되고, resolve가 실행되면 Promise 객체를 반환한 뒤 then메서드를 실행한다.

하지만, 위 코드를 보면 callback을 사용했을 때와 유사하게 복잡하다. 이를 return을 이용해서 수정하면 아래처럼 만들 수 있다.

function test() {
  a().then(() => {
    return b()
  }).then(() => {
    return c()
  }).then(() => {
    return d()
  }).then(() => {
    console.log('Done')
  })
}

a함수를 실행하면 Promise 객체 하나를 반환한다. then 메서드를 실행하여 a함수의 실행이 끝난 뒤 b함수를 실행하여 반환한다. 즉, b함수의 Promise 객체가 반환된다. 마지막에 반환값 없이 함수를 실행하고 끝난다.

2.2 예외처리

Promise 객체는 catch와 finally메서드를 활용해서 예외처리가 가능하다.

function a(number) {
  return new Promise((resolve, reject) => {
    if (number > 4) {
      reject()
      return
    }
    setTimeout(() => {
      console.log('A')
      resolve()
    }, 1000)
  })
}

function test() {
  a([인수])
    .then(() => {
      console.log('resolve')
    })
    .catch(() => {
      console.log('reject')
    })
    .finally(() => {
      console.log('done')
    })
}

a함수부터 살펴 보면 매개변수로 reject가 추가되었다. reject는 resolve가 실행될 수 없는 상황에서 실행되는 매개변수로 catch메서드를 실행시킨다. 위 코드를 예로 살펴보면, a함수의 number매개변수로 4이하의 값이 할당되면 resolve매개변수가 실행되어 결과는 다음 과 같다.

A
resolve
done

반대로 a함수의 number매개변수로 4보다 큰 값이 할당되면 reject매개변수가 실행되어 결과는 다음 과 같다.

reject
done

결과를 보면 finally라는 메서드는 resolve와 reject가 실행됐을 때 모두 동작하는 것을 알 수 있다. finally는 항상 실행되는 메서드이다.

3. async, await

최신의 자바스크립트는 async함수와 await를 제공한다. 이 또한 함수 실행 순서를 보장해주는 역할을 하는데 callback이나 Promise 객체의 메서드를 사용할 때 보다 훨씬 직관적인 코드를 작성할 수 있다.

3.1 비동기 실행

function a() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('A')
      resolve()
    }, 1000)
  })
}

function b() {
  return new Promise((resolve) => {
    console.log('B')
    resolve()
  })
}

function c() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('C')
      resolve()
    }, 1000)
  })
}

function d() {
  return new Promise((resolve) => {
    console.log('D')
    resolve()
  })
}

async function test() {
  await a()
  b()
  await c()
  d()

}

결과는 Promise의 then메서드를 사용했을 때와 똑같다. 하지만 test함수의 내부가 훨씬 직관적이고 깔끔하다. async는 비동기 실행을 할 함수를 나타내고 await는 해당 함수가 실행이 완료될 때까지 대기한 뒤에, 다음 코드를 실행한다는 의미이다.

3.2 예외처리

function a(number) {
  // resolve가 실행될 수 없을 때 reject
  return new Promise((resolve, reject) => {
    if (number > 4) {
      reject()
      return
    }
    setTimeout(() => {
      console.log('A')
      resolve()
    }, 1000)
  })
}

async function test() {
  try {
    await a(11)
    console.log('resolve')
  } catch (err) {
    console.log('reject')
  } finally {
    console.log('done')
  }
}

문제 출처

Solution

function solution(absolutes, signs) {
  var answer = 123456789;
  answer = absolutes.reduce((acc, cur_v, cur_i) => {
    if (signs[cur_i]) {
      return acc + cur_v
    } else {
      return acc - cur_v
    }
  }, 0)
  return answer;
}

reduce메서드는 4개의 인자를 받는다.

• accumulator : 콜백 함수의 결과를 누적

• currentValue : 처리할 현재 요소
• currentIndex : 처리할 현재 요소의 인덱스
• array : 메서드를 호출한 배열

메서드 종료시 accumulator 값을 반환한다.

initialValue를 지정하지 않으면 0번 인덱스 값이 accumulator에 할당되고 1번 인덱스부터 콜백함수가 실행된다. initialValue를 지정하면 해당 값이 accumulator에 할당되고 0번 인덱스부터 콜백함수가 실행된다.

absolute = [4, 7, 12]
signs = [true, false, true]
위의 조건으로 코드가 실행되면 reduce메서드의 동작은 다음과 같다.

문제출처

Solution

function solution(numbers) {
  var answer = 45;
  const tmp = new RegExp(/[0-9]/)
  numbers.forEach(number => {
    if (tmp.test(String(number))) {
      console.log(number)
      answer -= number
    }
  })
  return answer;
}

0~9까지 존재하는 숫자를 빼면 없는 숫자를 모두 더한 것과 같다.

문제출처

Solution

function solution(numbers, hand) {
  var answer = '';
  let left = [3, 0];
  let right = [3, 2];
  const btns = {
    1: 'L',
    4: 'L',
    7: 'L',
    3: 'R',
    6: 'R',
    9: 'R',
  }
  const btns_keys = Object.keys(btns)
  for (let number of numbers) {
    // 행동이 정해진 버튼 입력
    if (btns_keys.includes(String(number))) {
      let tmp = btns[number]
      answer += tmp
      if (tmp === 'L') {
        left = [parseInt((number - 1) / 3), 0]
      } else {
        right = [parseInt((number - 1) / 3), 2]
      }
    }
    // 행동이 정해지지 않은 버튼 입력
    else {
      let btn = null
      // 가운데 열 버튼 위치
      if (number === 0) {
        btn = [3, 1]
      } else {
        btn = [parseInt((number - 1) / 3), 1]
      }
      // 이동량 계산
      const left_cnt = [Math.abs(btn[0] - left[0]), Math.abs(btn[1] - left[1])].reduce((acc, cur) => acc + cur, 0)
      const right_cnt = [Math.abs(btn[0] - right[0]), Math.abs(btn[1] - right[1])].reduce((acc, cur) => acc + cur, 0)
      console.log(btn)
      console.log(left_cnt, left, right_cnt, right)
      // 위치 이동
      if (left_cnt < right_cnt) {
        answer += 'L'
        left = btn
      } else if (left_cnt > right_cnt) {
        answer += 'R'
        right = btn
      } else {
        if (hand === 'left') {
          answer += 'L'
          left = btn
        } else {
          answer += 'R'
          right = btn
        }
      }
    }
  }

  return answer;
}

[ [1, 2, 3], [4, 5, 6], [7, 8, 9], ['*', 0, '#'], ]

위와 같은 이차원 배열이 있다는 가정하에 해결했다. 1, 4, 7, 3, 6, 9는 정해진 규칙이 있으므로 객체에 key:value 형태로 저장해서 해당 규칙을 지킬수 있게 했다.

버튼의 위치에 해당하는 행과 열, left 혹은 right에 해당하는 행과 열의 각각 차이를 더하면 이동량이 된다. 이동량을 기준으로 left에 변화를 줄지 right에 변화를 줄지 결정한다.

행을 결정하는 방식은 parseInt((number - 1) / 3)이고 열을 결정하는 방식은 숫자별로 고정되어 있다.

1. 먼저 객체 메서드인 keys() 를 이용해서 key 값을 저장한 배열(btns_keys)을 만들었다. 이 메서드는 배열 안에 요소를 문자열 형태로 저장한다.
2. number가 btns_keys에 포함될 경우 btns[number]값을 answer에 추가해준다.
3. number가 btns_keys에 포함되지 않을 경우, btn의 위치를 0 혹은 2,5,8의 경우로 나눠 결정한다.
4. left, right와 btn의 행의 차이, 열의 차리를 더하여 각각의 이동량을 계산한다.
5. 이동량을 기준으로 규칙에 맞는 문자를 answer에 추가한다.

이동량 계산을 할 때 reduce메서드를 사용했다. reduce는 배열의 각 요소끼리 콜백 함수를 호출하여 하나의 값을 반환하는 메서드이다.

reduce 참고

JS는 상위 스코프를 함수의 선언되는 위치에 따라 결정한다. 이를 렉시컬 스코핑이라고 하며, 해당 스포크를 렉시컬 환경이라고 한다. 즉, 특정 함수가 선언되었을 때, 해당 함수와 함수가 참조할 수 있는 상위 스포크를 렉시컬 환경이라고 한다. 이러한 특징을 이용한 것이 클로저이다.

function outerFunc() {
  var x = 10;
  var innerFunc = function () { 
    console.log(x); 
  };
  innerFunc();
}

outerFunc(); // 10

innerFunc를 선언했을 때, 해당 함수의 상위 스코프는 outerFunc와 전역이다. 따라서 innerFunc가 실행됐을 때 상위 스코프의 변수인 x를 참조할 수 있다.

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  return innerFunc;
}
var inner = outerFunc();
inner(); // 10

위 코드를 보면 outerFunc함수를 inner에 할당했다. outerFunc가 innerFunc를 반환하고 유효 범위가 끝났기 때문에(실행되고 실행 컨텍스트 스택에서 제거 됐기 때문에) inner를 실행하면 오류가 날 것 같지만 그렇지 않고 잘 실행이 된다.

이렇게 특정 내부함수가 자신의 상위 스코프 밖에서(상위 스코프가 종료된 이후) 실행되어도, 해당 내부함수가 선언된 시점의 렉시컬 환경에 해당하는 변수와 함수를 사용할 수 있는 것을 클로저라고 한다.

정리하자면 클로저란, 자신이 선언된 시점의 렉시컬 환경에 해당하는 것을 기억하여 밖에서 호출되더라도 해당 렉시컬 환경의 변수, 함수를 사용할 수 있게 만든 함수이다.

클로저 활용

참조

• https://poiemaweb.com/js-closure

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures