[JS] JS로 코딩테스트 처음 준비하면서 알게된 함수, 팁

코테언어로 프론트는 JS로만 본다길래 큰맘먹고 바꿔봄 (파이썬 -> JS)
프로그래머스 입문 100문제 풀면서 알게된 것들 정리

1. 최대 공약수

function cal_gcd(a, b) {
    return a % b === 0 ? b : cal_gcd(b, a % b);
}

//arrow function
const gcd = (a,b) => a%b === 0 ? b : gcd(b, a%b);

• 여기서는 최대공약수를 구할 때 유클리드호제법을 구현해서 써야한다.
• 재귀함수를 활용
• a % b가 0이 아니라면 재귀, 맞다면 b를 return
• 단 a > b
• 이게 왜 1번?
  
  

2. between값 (사이값) 표현

angle = 91

// 틀린표현
if (0 < angle < 90)
  console.log("예각");
else
  console.log("예각아님");

// 옳은 표현
if( 0 < angle && angle < 90)
  ...

• 틀린표현 처럼 쓰면 실행결과로 "예각"이 나온다. 0 < angle 부분만 검증하기 때문
• 그니까 파이썬 처럼 쓰면 망한다. 꼭 && 연산자를 사용하자
  
  

3. for 문에서 of

numbers = [1,2,3,4,5,6,7,8,9,10];
let ans = 0;
for(i of numbers) {
        ans += i
    }

// answer = 55

• 원소들을 순서대로 하나하나 다 사용할 때 정석for문과 forEach대신 for..of를 사용하자
• string도 가능하다
  
  

4. slice()

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
let citrus = fruits.slice(1, 3)

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

• slice(begin, end) 형식
• 파이썬 슬라이싱 인덱스 쓰는법과 똑같음
• 원본 배열은 그대로
• splice()랑은 다르니까 주의합시다
  
  

5. sort()

let numbers = [1,2,3,4,5];

numbers.sort((a,b) => a-b);
console.log(numbers);	// 1,2,3,4,5

numbers.sort((a,b)=>b-a);
console.log(numbers);	// 5,4,3,2,1
    

• js의 sort는 그냥 외워버리자
• 그냥 numbers.sort() 해버리면 오름차순 정렬되는거 같지만 아니다. -> 정렬할 때 숫자 타입을 문자열 타입으로 형 변환해버림

	const numbers = [10,3,8,4,1]
	numbers.sort()	// [1, 10, 3, 4, 8]

• sort() 응용 : 정렬 1차기준 절대값, 1차기준이 동률일 경우 2차기준으로 오름차순 정렬
  (|| 활용)

	array.sort((a,b) => Math.abs(n - a) - Math.abs(n - b) || a - b);

6. length

const str = "hello world";
const arr = [1,2,3,4,5];
console.log(str.length);	// 11
console.log(arr.length);	// 5

• js는 배열과 문자열 모두 length를 적용할 수 있다
• 문자열의 경우 공백도 길이 1로 측정

7. replaceAll()

const mystring = "abcd";
mystring2 = mystring.replaceAll("b","");
console.log(mystring2);		// acd

• 문자열 빼버리거나 대체할 때 사용하는 함수
• 중간에 A 대문자임
• 기존 문자열은 바뀌지 않는다
  
  

8. 문자열을 배열로 변환 (스프레드)

const my_String = "abcd";

const my_Array = [...my_String];	// ['a', 'b', 'c', 'd']

• 문자열에 forEach, map, reverse 같은거 적용하고 싶을 때 사용
  
  

9. repeat()

'abc'.repeat(-1);   // RangeError
'abc'.repeat(0);    // ''
'abc'.repeat(1);    // 'abc'
'abc'.repeat(2);    // 'abcabc'

• 문자열을 주어진 횟수만큼 반복
  
  

10. 배열에서 최대값

arr = [1,2,3]
console.log(Math.max(arr)); // NaN

// 스프레드 활용
console.log(Math.max(...arr));	// 3

// sort 활용
arr.sort((a,b) => b-a);
return arr[0];	// 3

• 스프레드 연산자를 써서 최대값을 구하자
• arr의 경우 [1,2,3]
• ...arr의 경우 1 2 3
• sort가 더 좋다.. arr[1]로 두번째 최대값도 구할수 있고..
  
  

11. Map 자료형 (= 딕셔너리)

Map을 연습하기 아주 좋은 문제가 있다. 최빈값 구하기 문제

const solution = (array) => {
    let map = new Map();
    
    // map의 key와 value 세팅
    for (i of array)
        map.set(i, (map.get(i)||0) + 1);	// or연산자는 참이 먼저 나온 값을 반환한다.
    console.log(map);
    
    // value 값으로 오름차순
    ar = [...map].sort((a,b)=>b[1]-a[1]);  
    console.log(ar);
    
    // 원소가 한 개일경우 바로 ar[0][0] return
    // ar[0][1] > ar[1][1] : 최빈값이 한 개일 경우 ar[0][0] return
    return ar.length === 1 || ar[0][1] > ar[1][1] ? ar[0][0] : -1;
}

• 귀찮아도 한 번 풀어보자 풀면 감 바로 잡힘
• 유용해 보이는 map 함수

  Map.has(key): 해당 key가 Map에 포함되어 있는지 확인
  Map.size: 맵의 키-값 쌍 갯수
  Map.length: 값이 0인 속성.
  Map.delete(key): key-value 쌍 삭제
  Map.forEach(): 맵의 모든 키-값 쌍에 대해서 콜백함수 사용

12. 배열의 합 구하기 (reduce)

• 형식 : array.reduce( 콜백함수, 초기값 )

• 콜백함수 상세

	array.reduce((누산값(acc), 현재요소값(cur), 현재요소의index(idx), 현재배열) => {
  	return 다음누산값;
    }, 초기누산값);

	// 사용예시
	numbers = [1,2,3]
	console.log(numbers.reduce((acc, cur) => acc + cur , 0)); // 6

13. String을 Int 형으로 변환하는 미세먼지 팁

let a = 1
let b = '2'

console.log(a+(b*1));	// 3

• * 1 해주면 됨
• 자매품으로 +를 붙이는 방법도 있다
• 아니면Number() parseInt() 사용, 반대의 경우는 toString()

14. 문자열을 배열로 변환2 (split)

• 형식 : string.split(separator, limit)
• 사용 예시

let str = 'abcdefg';
let arr = str.split("");
console.log(arr);	// [ 'a', 'b', 'c', 'd', 'e', 'f', 'g']

str = "abc defg"
arr = str.split(" ")
console.log(arr);	// [ 'abc', 'defg']

• 구분자로 ""를 전달하면 문자열을 각각의 문자로 잘라서 배열로 반환
• 꼭 배열로 변환을 할 필요는 없다. 각각의 변수에 할당하고 싶다면 구조분해할당을 이용하자

const 식 = '1+2 = 3';
const [calc, result] = 식.split(' = ');
console.log(calc);  // 1+2
console.log(result);  // 3

14-1. 배열을 문자열로 변환 - join()

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"

console.log(elements.join(''));
// Expected output: "FireAirWater"

console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"

• 구분자만 잘 입력해주면 된다.
  
  

15. isNaN()

console.log(isNaN("S"));	// true
console.log(isNaN("1"));	// false
console.log(isNaN(1));	// false

• js에서는 NaN을 확인할 때 a == NaN 이런게 안됨 isNaN으로 확인해야함
• 문자 숫자 구별해야할 때 사용
  
  

16. includes()

• 배열함수인거는 알고 있었다만 string에도 쓸 수가 있었다.
• 형식 : string(or array).includes( searchString, length )
  length: 시작 위치 (0부터), 선택사항

'abzcd'.includes( 'z' )		// true
'abzcd'.includes( 'z', 3 )	// false

17. 제곱근 어떻게 구함?

Math.sqrt(0); // 0
Math.sqrt(1); // 1
Math.sqrt(2); // 1.414213562373095
Math.sqrt(9); // 3

• Math.sqrt()로 구하기
• 어떤 정수가 정수의 제곱근인지 판별하고 싶다면
  Math.sqrt(n) % 1 === 0 이렇게 하자
  
  

18. filter()

numlist.filter((e,i) => num % 2 == 0);

• 참인 값들을 배열로 반환
• 기존 배열에 영향 x
• 파라미터는 element, index
  
  

19. 문자열도 인덱스로 접근 가능

const mystring = "abcd";
console.log(mystring[0]);   // a

• ㅈㄱㄴ
  
  

20. 대문자를 소문자로, 소문자를 대문자로

'a'.toUpperCase();	// A
'A'.toLowerCase();	// a

• toUpperCase, toLowerCase() 사용
• 대문자인지 소문자인지 확인만 하고 싶다면
  el === el.toUpperCase() 이런 느낌으로..

21. 확인하는 함수들

console.log(Array.isArray([1, 2, 3])); // true
console.log(Number.isInteger(5)); 	   // true
console.log(isNaN('a')); // true

• Array라는 객체에 isArray라는 함수가 포함되어 있음 (isInteger도 같은 원리)
• isNaN은 문자인지 확인 하는 용도로 쓰자

22. Math.round()

console.log(Math.round(0.9));
// Expected output: 1

console.log(Math.round(5.95), Math.round(5.5), Math.round(5.05));
// Expected output: 6 6 5

console.log(Math.round(-5.05), Math.round(-5.5), Math.round(-5.95));
// Expected output: -5 -5 -6

• 반올림 함수
• 조합 문제 풀다가 소수점 오류 떠서 사용했음

23. array.from()

console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// Expected output: Array [2, 4, 6]

• from(~) 로부터 배열을 만든다 이런 뜻

24. 2차원 배열 선언

// 1. 반복문 사용
const row = 2;
const column = 2;

const arr = new Array(row);  
console.log(arr);	// [ <2 empty items> ]

for (var i = 0; i < column; i++) {
    arr[i] = new Array(2);	
}

console.log(arr); // [ [ <2 empty items> ], [ <2 empty items> ] ]


// 2. ES6 문법 사용
// arr[5][2] (빈 배열 생성)
const arr1 = Array.from(Array(5), () => new Array(2));

// arr[5][2] (null로 초기화하여 생성)
const arr2 = Array.from(Array(5), () => Array(2).fill(null))

• arr 1, arr2 실행결과
  

25. 2차원 배열 선언2

function solution(num_list, n) {
    const answer = [];
    for(let i =0; i<num_list.length/n; i++){
        answer.push(num_list.slice(i*n,i*n+n))
    }
    console.log(answer);
}

• 기존에 있는 값을 2차원배열에 넣어야 한다면 slice를 이용하자! -> 배열 형태로 원소가 들어감

26. 배열의 중복 제거

const array = [1,1,2,2,3,3]
const set = [...new Set(array)];

console.log(set);   // [1,2,3]

• new Set(중복 제거할 배열) 을 이용해 새로운 배열에 담아준다.

27. 문자열에서 특정 원소의 개수 구하기 - split활용

var str = 'HTML,CSS,JavaScript';
var count = str.split(',').length - 1;  // 2

• , 의 개수를 세는거임.
• split 함수를 사용 결과는 => [HTML, CSS, Javascript]
• 따라서 거기 길이에다가 1빼주면 쉼표 개수 나옴

28. lastIndexOf()

const str = "aabac";
console.log(str.indexOf("a"));  // 0
console.log(str.lastIndexOf("a")); // 3

• 당연히 array도 가능
• 어떤 문자가 한 번 나왔을지 검사해야 할때
  str.indexOf('a') === str.lastIndexOf('a') 이런 느낌으로 사용해도 좋다.

29. 문자열 뒤집기

const my_string = "abc";
const r_string = my_string.split('').reverse().join('');   // cba

• 배열로 바꾼 후에 reverse함수 먹이고 join으로 다시 string으로 바꾸기
• join안에 '' 안 주면 쉼표 포함됨

30. 2진수, 10진수

const num = 10;
console.log(num.toString(2)); //"1010" (10진수인 num을 2진수로)
console.log(parseInt(num, 2)); //2 (2진수인 num을 10진수로)

• 10진수 -> 2진수는 num.toString(2) : 8진수 16진수 다 됨
• 2진수 -> 10진수는 parseInt(num, 2)
  
  

31. 2차원 배열 map으로 전환

const db = [["rardss", "123"], ["yyoom", "1234"], ["meosseugi", "1234"]];
const map = new Map(db);
console.log(map);	
// Map(3) { 'rardss' => '123', 'yyoom' => '1234', 'meosseugi' => '1234' }

• 2차원 배열을 new Map() 안에 넣어서 바로 새로운 map을 만들 수 있다.
  
  

32. 배열 사본 만들기

let sorted = arr.slice().sort((a,b)=>b-a);

• sort함수처럼 배열 자체가 바뀌어버리는 함수를 쓸때 복사본에만 적용하고 싶다면 slice()를 사용!
• [...arr] 해도됨

33. 고정 소수점 표기법

function financial(x) {
  return Number.parseFloat(x).toFixed(2);
}

console.log(financial(123.456));
// Expected output: "123.46"

console.log(financial(0.004));
// Expected output: "0.00"

• toFixed(소수자릿수)로 소수점 고정 가능

34. 문자열 밀기 (회전)

let solution=(a,b)=>(b+b).indexOf(a)

• 문자열 밀기 문제 의 풀이다.
• a : "hello", b : "ohell"라면
  b+b : "ohellohell"이므로 a가 포함된다. 따라서 a가 회전하면 b가 나오는게 맞음 (문자열을 두번 반복하여 그 안에 포함되는지 확인하는 원리!)
• 주어진 코드는 indexOf를 사용하여 오른쪽으로 몇번 넘겨야 a에서 b로 가는지 알려주고 있다.

35. 연속되는 숫자 배열 만들기

let array = Array(101).fill(0).map((v, i) => i);

• fill을 이용해 101크기의 배열을 0으로 채운 후 map을 활용하여 인덱스 값으로 바꿔준다.

36. 문자열 채우기 - padStart()

let str = "123";
let paddedStr = str.padStart(5, '0');

console.log(paddedStr);  // 출력: "00123"

• 자릿수 만큼 앞에 채우고 싶을때 사용

37. 배열에서 특정 요소 삭제 - splice()

const array = [1, 2, 3, 4, 5];
array.splice(2, 1);

console.log('array', array);	// [1,2,4,5]

• array.splice(2, 1) : 2번 인덱스부터 1개만큼 삭제한다

38. out of range 에러

const solution = (arr) => arr.filter((e,i) => e != arr[i-1]);

• 0보다 작은 인덱스를 사용하면 out of range 오류가 날거 같아서 이렇게 푸는거 포기했었는데 다른 사람의 풀이보니까 가능했었다.
• javascript 에서는 범위를 벗어나는 인덱스에 접근하면 오류를 발생시키지 않고 undefined를 반환하기 때문
• 인덱스 관련 예외 처리는 이제 안심하자
• 파이썬에서는 에러난다.

39. 객체 메소드

let obj = {};
for (let num of arr) {
    obj[num] = (obj[num] || 0) + 1;
}

let answer = Object.values(obj).filter(val => val > 1);

• obj[num] 값이 없다면 0 있으면 그 값에 + 1
• Objct.values(obj)로 value 값들을 배열 형태로 가져올 수 있다. (keys도 당연히 가능)
• Object.entries(obj)로 key와 value둘 다 가져올 수 있다.

 for(let [key, value] of Object.entries(parkingObj)){
   ...

40. 2차원행렬 전치행렬로 만들기

matrix = matrix[0].map((_, i) => matrix.map(row => row[i]));

• 고민하지말고 이렇게 한 줄로 짜자
• map을 두번쓰는거임

41. 배열에서 원소별 개수 세기

const fail = stages.filter(stage => stage === i).length;

• filter 메소드를 활용해서 조건에 맞는 원소를 필터링해 그 길이를 가져오자

42. 객체를 2차원 배열로 바꾸기

const result = Object.entries(obj)

• Object.entries()를 활용한다.
• 2차원 배열말고 1차원 배열로 바꾸고 싶다면 map 을 활용해서 원하는 값으로 바꾸자

	result.map(e => e[0]); // or e[1]

43. map자료형 초기화

let map = new Map([
  ['c', 2],
  ['a', 4],
  ['d', 1],
  ['b', 3],
]);
// Map(4) { 'c' => 2, 'a' => 4, 'd' => 1, 'b' => 3 }

• 2차원 배열로 초기화 해야함

44. for문 속도

같은 코드일 때 for(let i=0 ...) 방식이 for(let s of ...) 보다 빠름
일반 for문 사용하자

45. 가장 큰 수 문제

https://school.programmers.co.kr/learn/courses/30/lessons/42746

// sort((a,b) => ((b+a) - (a+b)))

[234, 243, 23, 2]
  .map((e) => e.toString())
  .sort((a, b) => b + a - (a + b))
  .join('');

• [234, 243, 23, 2] => "243234232"
  이런문제인데 원리 해석하기도 힘들고.. 그냥 외우자

46. 참조형

const a = [1,2,3];
console.log(a === [1,2,3]);		// false

• js에서는 이렇게 무작정 값을 비교연산자에 넣어버리면 안된다.
• 객체, 배열 등등은 참조형이라 해당 자료의 주소값으로 비교를 하기 때문에 false가 나오는것!

47. 아스키코드 변환

const a = "ABC";
const b = a.charCodeAt(0);
console.log(b);     // 65

const c = "A"
console.log(c.charCodeAt());    // 65

• charCodeAt() 활용
• 문자열, 문자에 사용가능하고 문자열의 경우 괄호안에 인덱스 줘야함
  
  

48. 소수 구하는 함수

const isPrime = (num) => {
  if (num === 0 || num === 1) return false;
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) return false;
  }
  return true;
};

• Math.sqrt(num) 까지만 구하면됨

49. 시간 차이 구하기 (분)

const time = "12:00,12:14";
const timeArr = time.split(',');   // [ '12:00', '12:14' ]
const timeDiff = (new Date(`1970-01-01 ${timeArr[1]}:00`) - new Date(`1970-01-01 ${timeArr[0]}:00`)) / 60000; 
console.log(timeDiff); // 14

• new Date() 사용
• 1970-01-01 이 날짜는 바꿔도 된다. (같은 날짜만 사용하면됨)
• 나누기 60000을 하는 이유는 시간 차이를 밀리초에서 분으로 변환하기 위함

50. 매우 큰 숫자, 매우 작은 숫자

let minNum = Number.MIN_SAFE_INTEGER // -9007199254740991
let maxNum = Number.MAX_SAFE_INTEGER // 9007199254740991

51. map 간편하게 (다른 배열 반복문도 가능)

const operands = expression.match(/[0-9]+/g).map(Number);

• (e) => {} 이런 콜백함수 안 써도 됨
• 형 변환할때 좋은듯

52. Array.from을 활용하여 증가하는 2차원 숫자 배열 만들기

// 1~20까지 증가하는 4 * 5 배열을 만든다고 가정
let initialValue = 1;
const rows = 4;
const cols = 5;
const arr = Array.from({ length: rows }, () => 
  Array.from({ length: cols }, () => initialValue++)
);
console.log(arr);

• Array.from()의 length 파라미터를 활용
• 객체로 넣어야 함

계속 업데이트중...