감공사

Q. 주어진 Number가 3의 배수일 때는 'fizz', 5의 배수일 때는 'buzz', 3과 5의 배수일 때는 'fizzbuzz'를 출력하라.
(그 외 경우는 숫자로 출력)

--- Example
fizzBuzz(5);
1
2
fizz
4
buzz

Code

😢 classic for loop, %연산, &&(and)연산, if else 제어문으로 쉽게 해결 가능하다.

😊 주어진 n까지 for문을 반복하고, 숫자가 증가할 때마다 if else 구문으로 배수를 파악하여 출력하면 된다.
if else구문으로 작성할 때는 해당 조건이 true일 때, 그 구문만 실행하고 다시 for문이 반복된다는 것을 명심하자.

✔ &&(and)연산

양쪽의 결과가 모두 true일 때, 결과는 true
(||(or)연산은 둘 중에 하나만 true여도, 결과는 true)

✔ %연산

나머지는 구하는 연산, 3%3의 결과는? 0(나머지가 없음)

Full Code

✨ 열거 가능한 성질의 object의 key를 반복하기 위한 for loop

💻Example Code

const charMap = { a:1, b:2, c:3 };

for(let char in charMap) { console.log(`${char}: ${charMap[char]}`) };

😋 Map Object 또는 열거 가능한 Object에 대한 반복문을 사용하고 싶을 때 사용 가능하다.
Max Char(가장 많이 쓰인 문자 찾기), Vowels(모음 개수 찾기) 등 Algorithm에서 확인 가능하다.

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

✨ index구간 지정없이 String, Array, array-like objects 의 반복문을 실행하기 위한 for loop

💻Example Code

const strArr = [ 'a', 'b', 'c' ];

for( let char of strArr ) { console.log(char); }

😋 Map object를 만들 때, 단순하게 array의 값을 하나씩 받아 활용하고 싶을 때 등 다양한 곳에서 사용 가능하다.
Max Char(가장 많이 쓰인 문자 찾기) Algorithm에서 확인 가능하다.

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Q. 주어진 string에서 가장 많이 쓰인 char를 찾아서 출력하라.

--- Examples
maxChar("abcccccccd") === "c"
maxChar("apple 1231111") === "1"

Code

😢 Object를 만드는 방법에 익숙하지 않았는데, 이번 기회를 통해 익숙해질 수 있었다.
마찬가지로, for ... of와 for ... in을 사용하는 것도 익숙해질 수 있었다.

😊 Map(Object)을 만들어서 각 문자(key)의 빈도수(value)를 저장하고, 최대값(max)을 구하여, 가장 많이 쓰인 문자(maxChar)를 출력하는 방식으로 해결하면 된다.

✔ object map

object는 key와 value를 가지고 있다. arr[1] = 'a'; 처럼 배열에 저장하듯 객체를 저장하면 된다.
charMap[char] = charMap[char] ? charMap[char] + 1 : 1;
charMap object에 해당 char가 있으면 +1, 없으면 1로 key와 value를 선언해준다.

✔ for ... of

for( let char of str ) {} 처럼 입력값으로 받은 str의 character를 순서대로 하나씩 가져와 loop을 실행하는 for loop이다.
classic for loop처럼 index를 하나하나 지정해줘야하는 번거로움을 없앨 수 있다.(오타 발생 사전 제거에 유용함)

✔ for ... in

for( let char in charMap ) {} 처럼 charMap object의 key를 순서대로 하나씩 가져와 loop을 실행하는 for loop이다.
객체(object)를 loop하고 싶을 때 사용할 수 있다.

Full Code

✨ 직접 작성한 function을 주입하여, 각 elements를 test 할 수 있는 helper function

(e.g., arr.every(char => char === 'a')) 왼쪽처럼 test할 function을 주입하고, arr의 값이 1개 있다고 가정할 때, 그 arr의 값이 'a'와 동일하다면 true가 반환될 것이고, 아니라면 false가 반환될 것이다.
Palindrome(회문 구조) Algorithm에서 유용하게 사용하였다.

💻Example Code

const arr = [ 'a' ];

console.log( arr.every((char, index) => char === arr[index]));

😋 Palindrome과 같이 전체 array를 처음부터 또는 마지막부터 하나씩 검사하기에 좋다.
더 활용된 내용은 palindrome algorithm을 참고하면 됩니다.

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

✨직접 작성한 reducer function을 주입하여, 배열(array)의 여러 값을 하나씩 다루고, 최종적으로 single value를 도출해낸다.

(e.g., arr.reduce((acc, val) => acc += val)) 왼쪽처럼 기본적으로 첫 번째 argument는 accumulator, 두 번째 argument는 Current Value이며, 그 외에 세 번째 argument는 Current Index이며, reduce()의 두 번째 arugument에 initialValue(초기값)을 작성하여 acc에 초기값을 지정하는 것도 가능하다.
Reverse Int(or String)와 palindrome(회문 구조) 등 다양한 로직에서 유용하다.

💻Example Code

const numArr = [ 1, 2, 3, 4 ];
const strArr = [ 'b', 'c', 'd', 'e' ];

console.log(numArr.reduce((acc, num) => (acc = num + acc), 10));
console.log(strArr.reduce((rev, char) => (rev = char + rev), 'a'));

😋 배열의 모든 값을 간단하게 더하고 싶을 때, 배열의 문자를 거꾸로 정렬하고 싶을 때 등 다양한 기능에서 활용이 가능하다.

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

✨ 배열(array)을 하나의 string으로 합쳐줄 때 사용하는 helper method

(e.g., arr.join('')) 왼쪽처럼 배열 arr 변수가 있을 때, join() 괄호 안에 원하는 separator를 넣어 배열을 하나의 string으로 합칠 수 있다.
Anagram(철자 순서를 바꾼 말), Capitalize(단어의 첫번째 문자 대문자화 하기), palindrome(회문 구조) 그리고 Reverse Int(or String)숫자나 문자 순서 뒤바꾸기 Algorithm에서 유용하게 사용했다.

💻Example Code

const arr = [ 'l', 'o', 'v', 'e' ];

console.log( arr.join('') );

😋 Algorithm에서 test case로 문자 또는 숫자가 입력되었을 때, 배열로 전환하고 다시 문자 또는 숫자로 합칠 때 사용할 수 있다.

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

✨ 배열(array)의 순서를 정반대로 뒤바꾸고 싶을 때 사용하는 helper method

(e.g., arr.reverse()) 왼쪽처럼 배열 arr 변수가 있을 때, reverse() 를 이용하여 배열 순서를 정반대로 뒤바꿀 수 있다.
Reverse Int(숫자 거꾸로 바꾸기), Reverse String(문자열 거꾸로 바꾸기) 그리고 Palindrome(회문 구조) Algorithm에서 유용하게 사용했다.

💻Example Code

const arr = [ 'a', 'b', 'c' ];

console.log( arr.reverse() );

😋 Reverse Int(or String)은 말 그대로 순서를 뒤바꿔 줘야하기 때문에 reverse()는 매우 유용하며,
palindrome(회문 구조)는 순서가 뒤바뀌어도 같아야하기 때문에 역시 reverse()는 매우 유용하다.

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

✨ 숫자(number)를 문자열(string)로 바꿔주는 helper method

(e.g., num.toString()) 왼쪽처럼 num 변수에 숫자가 선언되어 있을 때, 문자열로 변환하여 다른 변수에 저장할 수 있다.
Rever Int(숫자 거꾸로 바꾸기) Algorithm에서 유용하게 사용했다.

💻Example Code
✅ String와 Number를 비교하는 코드로 작성한다.

const num = 31;
const numToString = num.toString();

console.log( num );
console.log( numToString );
console.log( typeof num );
console.log( typeof numToString );

😋 Reverse Int(숫자 거꾸로 바꾸기) Algorithm을 다룰 때, 처음에 받은 case test를 toString()으로 변환 후 문자를 다룬다.
즉, 해당 number를 string으로 바꾼 후 index를 직접 특정하여 다루고 싶을 때 유용하게 사용할 수 있다.

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

✨ string을 integer(number)로 바꿔주는 helper method

Reverse Int(숫자 거꾸로 바꾸기) Algorithm에서 유용하게 사용했다.
(string 변환 후 다시 integer로 되돌려야하기 때문이다)

💻Example Code
✅ String와 Number를 비교하는 코드로 작성한다.

const str = '24';

console.log( parseInt(str) );
console.log( str );
console.log( typeof parseInt(str) );
console.log( typeof str );

😋 Reverse Int (숫자 거꾸로 바꾸기) Algorithm을 다룰 때, string 변환 후 최종값을 number로 되돌리기 위해 사용한다.

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