감공사

Code

😢 '?'를 출력하는 조건 때문에 조금 고민한 문제.
Max Chars Algorithm(가장 많이 쓰인 문자 찾기 알고리즘)이랑 비슷한데 조금 달랐다.
그래서 Max Chars에서 사용한 스킬을 접목시켜보고 싶었다.

😊 먼저, charMap Object를 만들어주고, for ... of를 사용해서 각 문자가 쓰인 만큼 Object에 저장해주었다.
(key는 문자, value는 쓰인 개수)
max를 구하는 방법은 Math.max.apply를 이용해서 다르게 구해주었다.
for loop을 한 번 더 쓰고싶지 않았기 때문이다.(쓴 것과 속도는 비슷할듯)

다시 for ... in 을 열어주고, 미리 구한 max와 같은 것이 있다면 counter를 증가시켜줬다.
만약 counter가 1개만 증가했다면, 가장 많이 쓰인 문자는 1개인 것이고, 1개가 넘는다면 같은 max가 존재한다는 것!
결과적으로, 만약 counter > 1이라면 '?'를 출력하고 return, 아니라면 maxChar(가장 많이 쓰인 문자)를 출력해주었다.

다른 사람들이 푼 것도 살펴봤지만, 풀이 방법은 비슷하고, 가독성이 좋은 코드가 없어서 그냥 보기만 했다.(속도는 빨랐다)
내 코드가 가독성은 더 좋다고 생각하는데, 아마 Object, Ternary, for ... of, for ...in 그리고 Object.values를 모른다면 어려울 것 같긴 하다. 위의 개념은 JavaScript - helper methods or Grammar 카테고리에서 간단한 사용방법을 볼 수 있다.

✔ Object {}

charMap = { 'a': 1, 'b': 3 }; 이렇게 저장된다고 생각하면 된다.

✔ Ternary(삼항 조건 연산자)

charMap[char] = charMap[char] ? charMap[char]+1 : 1;
charMap[char]이 있다면 +1, 없다면 1을 넣어준다는 뜻이다.

✔ for ... of

classic for loop과 같지만, index범위를 지정하는 것이 없고, 알아서 값을 하나씩 가져온다고 생각하면 된다.
array-like를 사용할 때 이용 가능하다.

✔ for ... in

위의 for of와 같지만, Object의 for loop을 사용하기 위해 쓰는 문법이다.

✔ Object.values()

{ 'a': 1, 'b': 3 } 이라는 Object가 있을 때, [ 1, 3 ]처럼 values만 뽑아준다.

위의 Skill들은 JavaScript - helper methods or Grammar 카테고리에서 간단한 사용방법을 볼 수 있다.

Full Code

큐의 정의(Definition of Queue)

🎈 위 그림에서 볼 수 있듯, Queue의 실행 순서는 FIFO로 진행된다.
FIFO란 First In First Out의 약자로서, 처음 들어간 값이 가장 먼저 나올 수 있다. 선입선출이라고 생각하면 쉽다.

Queue는 기본적으로 추가( add() ), 삭제( remove() ) 기능을 사용하여 다루며,
마지막 값 보기( peek() ) 기능처럼 본인이 필요한 기능을 만들어 사용하면 된다.

JavaScript의 class를 이용하여 Queue를 만들어 보겠다.

😐 위에서 볼 수 있듯, Queue의 전체 뼈대는 생성자(constructor)를 이용하여 array를 선언해준다.

add()에서는 Array.prototype.unshift()를 이용하여, 값이 항상 Queue의 앞으로 들어가게 구성해준다.

remove()에서는 Array.prototype.pop()를 이용하여, 항상 (먼저 들어간)마지막 값이 나올 수 있게 구성한다.

peek()에서는 index에 [this.data.length-1]을 넣어줘서 값이 있다면 마지막 값을, 없다면 undefined를 return하게 해준다.

🎉이렇게 class를 작성해주면, FIFO(First In First Out)기능을 하는 기본 Queue를 만들어낼 수 있다.

다음 글에서는 값이 다른 2개의 큐(Queue)를 1개의 큐(Queue)로 만들어보는 자료구조를 이용한 알고리즘에 대해 작성해보겠다.

Full Code

Code

😢 긴가민가? 하면서 계속 진행하며 풀어봤더니 해결된 문제. 문자열은 역시 배열 index를 잘 다뤄야 좋다(문자열도 배열이니까)

😊 T에 Test Case 수를 저장하고, 그 수만큼 반복되는 for loop을 열어준다.
반복할 수인 R을 따로 저장해주고, 반복될 문자열 S도 따로 저장해주는데, 특히 S는 배열 String에서 그냥 String으로 변환해준다.
( 처음에 입력값을 가져올 때 R과 S는 함께 있으므로, split(' ') 후 slice를 이용해 잘라준다)
마지막으로, 문자열의 길이 S만큼 반복하는 for loop안에 반복할 수 R만큼 반복하는 for loop을 열어줘서 같은 문자를 P에 중복 대입해준다. 한 문장이 끝날 때마다 console.log(P);를 통해 출력해주면 된다.

✔ parseInt()

String을 Number로 변환해주기 위해 사용하였다.
(자세한 내용은 JavaScript-helper method 카테고리에 있다)

✔ split(' ')

R과 S를 분리하기 위해 사용하였다.
(자세한 내용은 JavaScript-helper method 카테고리에 있다)

✔ slice()

R은 index 0, S는 index 1에 있으므로, slice를 이용해 잘라서 저장해준다.
(자세한 내용은 JavaScript-helper method 카테고리에 있다)

Full Code

✨ASCII Code를 string으로 반환해주는 helper method

💻Example Code

console.log( String.fromCharCode(97) );
console.log( String.fromCharCode(113) );
console.log( String.fromCharCode(65) );

😋 ASCII Code를 활용하는 문제를 풀 때 간혹 필요할 수 있다. ASCII Code를 string으로 바꿔준다.
백준 알파벳 찾기(Find alphabet) 알고리즘 문제를 풀 때 사용했다.

👉자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Code

😢 C언어로 자주 알파벳 가지고 놀았었는데, 기억이 잘 나지 않아서 검색을 좀 했다.
JavaScript로 ASCII Code 다루는 방법을 익혀서 새로웠지만 재밌었다.

😊 Solution 1)
단순하게 한 번 풀어보고자, 모든 알파벳을 배열에 담고 비교해보았다. for ... of를 이용해서 알파벳을 하나씩 반복해주고,
if else를 이용해서 해당 알파벳이 있다면 index를, 없다면 -1를 배열로 저장하였다. 출력은 join(' ')으로 형식을 맞춰주면 된다.

Solution 2)
먼저, 결과값을 담아줄 result array를 선언하였다. 그리고
for loop의 범위로 a-z를 주었다. 'a'는 ASCII Code 97번이고, 'z'는 ASCII Code 122번이기 때문에 97-122까지 반복 실행된다.
입력된 문자열(input 변수)에 해당하는 알파벳이 있다면 그 값의 index를, 없다면 -1를 반환하여 result array에 저장한다.
마지막으로, join(' ')을 통해 출력 형식을 맞춰 주면 된다.

가장 중요한 것은 -1 또는 해당 index라는 키워드가 나왔을 때, indexOf를 떠올릴 수 있어야 한다.

✔ String.prototype.charCodeAt()

각 알파벳의 ASCII Code를 알아내기 위해 사용하였다.
JavaScript-helper method에서 예제를 다뤄 보겠다.

✔ String.fromCharCode()

해당 ASCII Code에 해당하는 문자를 반환한다.
indexOf안에 찾고자하는 character를 넣기 위해 사용했다.(a-z의 ASCII Code가 순서대로 들어간다)
JavaScript-helper method에서 예제를 다뤄 보겠다.

✔ String.prototype.indexOf()

입력받은 값중에 해당 알파벳이 있는지, 있다면 그 위치(index)를 반환받고, 없다면 -1을 반환받기 위해 사용하였다.
JavaScript-helper method에서 예제를 다뤄 보겠다.

Full Code

Code

😢 보자마자 바로 풀 수 있었다. 매우 기초적인 문제.

😊 for ... of 를 이용하여 하나씩 더해 주거나, classic for loop을 이용해서 하나씩 더해 주면 된다.

✔ for ... of

array 값을 순서대로 하나씩 가져오며, array의 길이만큼 반복해준다.

✔ 2차원 배열(Two-dementional Array)

입력값을 문자열로 가져오기 때문에 배열로 값을 지정하여 가져올 수 있다.
(e.g., input = [ '5', '54321' ]; 이라면 input[1]의 '5'는 input[1][0])

Full Code

Q. 정수 n을 입력받아, Fibonacci(피보나치 수열)의 n번째 수를 출력하라.

피보나치 수열이란 처음 두 항을 1과 1로 한 후, 그 다음 항부터는 바로 앞의 두 개의 항을 더해 만드는수열을 말한다.

For example, the sequence
[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
forms the first ten entries of the fibonacci series.
Example:
fib(4) === 3

Code

😢 배열을 이용한 단순 fib는 쉽게 풀었고, recursion(재귀)를 사용하는 fib는 생각하기에는 어려웠지만 단순했고, memoize(Dynamic Programming)은 매우 생소해서 익숙해지는 시간이 필요했다.

😊 Solution 1)
index 0과 1의 값을 미리 저장한 배열(array)를 선언해주고, classic for loop을 반복해주었다.
i는 1부터 시작해주고 arr.push(arr[i-1] + arr[i-2])형식으로 index를 조정해주어 값을 push해주고 arr[n]을 출력해주면 된다.

Solution 2) 재귀함수(Recursion)
재귀함수를 이용한다.
만약 n값이 2보다 작다면 n값을 return하는 Base Case를 걸어두어 간단하게 해결할 수 있다.
(무조건 index 0은 0이고, index 1은 1로 시작하기 때문이며, 최대 -2를 해주므로, 0또는 1값만 발생할 수 있다)
0, 1, 1이 합쳐져 다음 수를 만들고, 이것들이 결과적으로 피보나치 수열을 이루기 때문이다(결국 1을 찾는 것이다)
return fib(n-1) + fib(n-2);을 통해 처음부터 끝까지 모든 경우의 수를 재귀적으로 실행한다.

Solution 3) 재귀함수와 Memoize(Dynamic Programing)
재귀함수로 검색을 해주지만, 모든 경우의 수를 탐색하지 않고, cache를 생성하여 한 번 검색한 값은 저장하고, 다시 탐색하지 않는다.
재귀함수 fib(여기서는 slowFib)를 memoize함수 안에서 실행하도록 하여, 한 번 탐색한 값은 cache object에 저장하고 그 값을 다시 탐색한다면 cache에서 값을 꺼내 반환해준다. 만약 처음으로 탐색하는 값이라면 slowFib를 실행시킨다.
이렇게 재귀함수를 사용해주면 시간낭비 없이 효율적으로 재귀를 진행할 수 있다.

✔ Nested functions

Memoize function안에 inner function을 만들어줘서, 이미 검색한 값이라면 cache[args]를 리턴, 그게 아니라면 검색하게 한다.
이 과정을 통해 시간 복잡도를 줄일 수 있다. 검색하는 시간을 줄여주기 때문이다.
JavaScript - Grammar 카테고리에서 조금 더 다뤄 보겠다.

✔ Function.prototype.apply()

memoize의 inner function에서 slowFib를 실행시켜주는 방법이다.
helper method 카테고리에서 조금 더 다뤄 보겠다.

✔ this

이 문제에서는 사실 apply()의 첫 번째 parameter에 null or this를 넣어도 큰 상관은 없지만,  this로 넣어줬다.
간단히 말하자면 this는 자신의 왼쪽(소속)을 나타낸다.
 JavaScript - Grammar에서 조금 더 다뤄 보겠다.

✔ args(The arguments object)

입력값을 간접적으로(?) 넘겨주기 위해 사용했다.
function안에서 다룰 수 있는 Array-like object인 arguments이며,
JavaScript - Grammar에서 조금 더 다뤄 보겠다.

✔ ... (Spread)

args를 array처럼 만들어 줄 수 있다. apply()의 두 번째 parameter가 array이므로 array-like값을 넘어주기 위해 사용했다.
JavaScript - ES2015 카테고리에서 개념을 확인할 수 있다.

Full Code

Q. 정수 n을 입력받고, nxn 크기 나선형 행렬(달팽이)를 출력하라.

--- Examples
matrix(2)
  [[1, 2],
  [4, 3]]
matrix(3)
  [[1, 2, 3],
  [8, 9, 4],
  [7, 6, 5]]
matrix(4)
  [[1,   2,  3, 4],
  [12, 13, 14, 5],
  [11, 16, 15, 6],
  [10,  9,  8, 7]]

Code

😢 행렬(2차원 배열)의 패턴을 파악하는 것이 핵심!
3X3 행렬 Test Case를 그려놓고 패턴을 파악하다보니 마지막 for loop의 진행 방향을 놓쳤었다.
진행 순서를 눈으로 확인하기 위해, 진행되는 값을 출력해 보았더니 훨씬 이해가 쉬웠다(Full Code 밑에 추가)

😊 먼저, 행렬(2차원 배열)을 초기화 해주기 위해 for loop으로 n(행)만큼 array를 추가해주었다.
그리고 1부터 값을 증가해주기 위해 count를 선언해주고, 0부터 n-1까지 startRow(Column), endRow(Column)을 각각 선언해준다.
while loop을 이용해 각 StartRow(Column)와 endRow(Column)가 같은 값을 가질 때까지 반복해준다.
(StartRow(Column)는 EndRow(Column)보다 커질 수 없고, EndRow(Column)은 음수가 될 수 없다)

그리고 변경되어야하는 row 또는 column을 중심으로 i를 선언해주고 count값을 증가하며 넣어준다.
해당 row나 column작업이 끝나면 증가 또는 감소시켜준다.

패턴을 찾아줘야하는 알고리즘이기 때문에 특별한 helper method skill은 없다.

Full Code

Spiral Matrix Code For Visual(진행 순서를 눈으로 확인하기 위한 Code)

Q. 입력받은 string에서 vowels(모음 - a, e, i, o, u)가 몇 개인지 찾아내라.

--- Examples
vowels('Hi There!') --> 3
vowels('Why do you ask?') --> 4
vowels('Why?') --> 0

Code

😢 vowels를 손쉽게 찾도록 도와줄 includes, match를 활용하는 것이 익숙하지 않았다.

😊 Solution 1)
checker array에 모음(a, e, i, o, u)를 미리 저장해두고, for ... of loop안에서 checker.includes()를 이용해 모음이 있다면 count를 증가시키면서 모음의 개수를 찾아냈다. for ... of는 여러모로 참 유용하다.

Solution 2)
match helper method안에 RegExp를 삽입하여 매우 간단하게 모음을 찾아냈다.
입력받은 str에 match를 사용해주면, 만약 원하는 값이 match됐을 때, 그 값이 반환된다.
여기서 중요한 것은 RegExp에서 g를 넣어줘야 global로 끝까지 검색을 하여 match된 모든 값의 배열을 반환해주며, i를 넣어줘야 대소문자 구분없이 match를 확인해준다.

✔ Array.prototype.includes()

Array에 있는 값들 중에 includes()괄호 안에 넣어준 값을 포함하고 있나? 확인해준다.

✔ String.prototype.match()

String(문자열)에 있는 character중에 match(RegExp)괄호 안에 있는 RegExp의 조건과 매치되는 값이 있나? 확인해준다.

✔ /[aeiou]/gi

[a, e, i, o, u]중에 하나라도 있으면 체크된다.
g는 global search(한 번 매치되고 끝나지 않고, 끝까지 체크한다)
i는 case-insensitive search 대소문자 구분없이 같은 알파벳이라면 동일하게 체크된다.

Full Code

✨ 말 그대로 '기본 값 설정' + '나머지' + '펼치기(?)'를 사용하는 방법이다.

💻Example Code

Default
function f1(x, y = 0) {
  return x + y; }

console.log(f1(3) === 3);

Rest
function f2(x, ...y) {
  return x * y.length; }

console.log(f2(2, 'hi', true) === 4);

Spread
function f3(x, y, z) {
  return x + y + z; }

console.log(f3(...[1, 2, 3]) === 6);

😋 먼저, parameter default는 재귀함수를 사용할 때 유용하다. 굳이 선언을 따로 하지 않고, parameter에서 해결이 가능하기 때문이다. Rest는 아직 사용해본 적은 없지만, 종종 쓰일 것 같고, Spread는 알고리즘 문제를 풀 때와 개발을 할 때 꽤 많이 썼다. 특히, fibonacci, sort 그리고 levelWidth 등 다양한 곳에서 사용했다. 몇 줄이나 나와야할 코드를 단 한 줄로 해결하기에 굉장히 좋다.

👉 자세한 내용은 https://babeljs.io/docs/en/learn/#default-rest-spread