[ JavaScript ] 코딩테스트 필수 함수

시훈·2024년 4월 12일

코테 문제에 도움이 되는 함수들입니다.

모든 예제들은 개발자 도구에 붙여 넣고 바로 테스트해 볼 수 있습니다.

1. forEach()

배열의 모든 값을 순환하기

var fruit = ['apple', 'banana', 'grape', 'mango', 'pear'];
fruit.forEach((value, index)=> {
	console.log('value: ' + value + ' index: ' + index)
})

결과:

2. 전개연산자 ...

배열 전개하기

var arr_1 = [1, 2, 3];
var arr_2 = [4, 5, 6];
var arr_3 = [...arr_1, ...arr_2];
console.log(arr_3);

결과:

문자열 전개하기

var str = 'apple';
var separate = [...str];
console.log(separate[0]);
console.log(separate[1]);
console.log(separate[2]);
console.log(separate[3]);
console.log(separate[4]);

결과:

3. join()

배열 -> 문자열로 합치기

var arr = [1, 2, 3, 4, 5];
var str_1 = arr.join('');
console.log(str_1);
var str_2 = arr.join(' ');
console.log(str_2);
var str_3 = arr.join();
console.log(str_3);

결과:

4. indexOf()

배열/문자열 안에서 특정 문자 or 문자열 찾기

var str = 'apple';
var index = str.indexOf('a');
console.log(index);
var index = str.indexOf('p');
console.log(index);

결과:

문자열 안에서 특정 문자를 찾아서 index를 리턴해줍니다.
문자열의 맨 앞부터 탐색해서 최초로 발견되는 index를 리턴합니다

var str = 'apple';
var index = str.indexOf('ple');
console.log(index);
var index = str.indexOf('z');
console.log(index);

결과:

문자열도 기가막히게 찾아내는 모습입니다. 문자열을 찾을때는 일치하는 문자열의 첫번째 index를 리턴해줍니다.
만약 문자를 찾지 못했다면 -1을 리턴합니다.

4-1. lastIndexOf()

indexOf()는 맨 앞부터 탐색하지만, lastIndexOf()는 맨 뒤부터 탐색합니다.

var str = 'apple';
var index = str.lastIndexOf('a');
console.log(index);
var index = str.lastIndexOf('p');
console.log(index);

결과:

indexOf()와 lastIndexOf() 모두 탐색을 시작하고 싶은 위치를 지정할 수 있습니다. 또한 원하는 값을 찾지 못했다면 -1을 반환합니다.

var str = 'apple';
var index = str.indexOf('a', 1);
console.log(index);

결과:

1번 인덱스부터 마지막까지 탐색을 했지만, 탐색에 실패하여 -1을 리턴한 모습입니다.

var str = 'apple';
var index = str.lastIndexOf('e', 3);
console.log(index);

결과:

3번 인덱스부터 처음까지 탐색을 했지만, 탐색에 실패하여 -1을 리턴한 모습입니다.

5. Math 메소드

최댓값 최솟값 찾기

var arr = [1, 2, 3, 4, 5];
var minimum = Math.min(...arr);
console.log(minimum);
var maximum  = Math.max(...arr);
console.log(maximum);

결과:

6. 배열 요소 추가 / 삭제

배열 맨 뒤에 값 추가하기 -> push()

var arr = [1, 2, 3, 4, 5];
arr.push(6);
console.log(arr);

결과:

배열 맨 앞에 값 추가하기 -> unshift()

var arr = [1, 2, 3, 4, 5];
arr.unshift(0);
console.log(arr);

결과:

배열 맨 뒤 값 삭제하기 -> pop()

var arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr);

결과:

배열 맨 앞 값 삭제하기 -> shift()

var arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr);

결과:

배열의 인덱스로 값 삭제하기 -> splice()

var arr = [1, 2, 3, 4, 5];
arr.splice(2, 1);  //2번째 인덱스에서 1개 제거해라
console.log(arr);

결과:

배열의 인덱스로 값 추출하기(원본 배열 유지) -> slice()

var arr_1 = [1, 2, 3, 4, 5];
var arr_2 = arr_1.slice(2, 4); //2번째 인덱스부터 4번째 인덱스 '직전까지' 추출하도록
console.log(arr_1);
console.log(arr_2);

결과:

7. substr()

문자열 자르기

var str_1 = 'apple and banana';
var str_2 = str_1.substr(3, 6);     //3번째 인덱스부터 6개 잘라주세요
console.log(str_1);
console.log(str_2);

결과:

8. split()

문자열 쪼개서 배열로 저장

var str = 'abc, def, 123, 456';
var arr_1 = str.split(',');
console.log(arr_1);
var arr_2 = str.split(', ',3);
console.log(arr_2);

결과:

9. sort()

숫자 sort

정수 배열 내림차순으로 정렬하기

var arr = [2, 10, 3, 5, 4]
arr.sort((a, b)=> a - b)
console.log(arr)

결과:

정수 배열 오름차순으로 정렬하기

var arr = [2, 10, 3, 5, 4]
arr.sort((a, b)=> b - a)
console.log(arr)

결과:

문자열 sort

문자열 오름차순으로 정렬하기

let arr = ['cat', 'butter', 'apple', 'naver', 'samsung']
arr.sort((a, b) => a.localeCompare(b));
console.log(arr);

결과:

문자열 내림차순으로 정렬하기

let arr = ['cat', 'butter', 'apple', 'naver', 'samsung']
arr.sort((a, b) => b.localeCompare(a));
console.log(arr);

결과:

10. 약수 구하기

var arr = [];
var num = 100;
for( i = 1 ; i <= Math.sqrt(num) ; i++ ) {  //Math.sqrt(num)은 num의 제곱근을 반환해준다.
    if(num % i === 0) {
        arr.push(i);
        if(num / i != i){
            arr.push(num / i);
        }
    }
}
arr.sort((a, b)=> a - b);
console.log(arr);

결과:

11. set 객체

set선언

let set = new Set();

값 추가

set.add(1);

값 삭제

set.delete(1);

만약 존재하지 않는 값을 삭제하려고 했다면 false를 리턴한다.
정상적으로 삭제했을 시 true를 리턴한다.

세트 길이 확인

console.log(set.size);

모든 세트 요소 출력

let set = new Set([5, 4, 3, 2, 1]); //초기값 지정. 반드시 []안에 값을 넣을 것!!!
set.forEach((value) => {
    console.log('value: ' + value);
});

결과:

값 존재여부 확인하기

let set = new Set([5, 4, 3, 2, 1]);
if(set.has(5)){
    console.log('5는 존재합니다~');
}
else {
    console.log('5 없어요~');
}

if(set.has(9)){
    console.log('9는 존재합니다~');
}
else {
    console.log('9 없어요~');
}

결과:

set.has()의 시간복잡도는 무려 O(1)이다!!!
자주 이용하도록 하자~

12. 대문자 -> 소문자

toLowerCase();

var str = 'AbCdEfG123';
console.log(str.toLowerCase());

결과:

toUpperCase();

var str = 'AbCdEfG123';
console.log(str.toUpperCase());

결과:

13. replace()

특정 문자열 치환하기

var str = '안녕하세요 안녕 안녕';
var result = str.replace('안', '뿅'); // '안'을 '뿅'으로 바꿀래요
console.log(result);

결과:

맨 처음의 '안' 문자만 바뀐 모습...

문자열의 모든 문자를 검사하고 치환하는 법

var str = '안녕하세요 안녕 안녕';
var result = str.replace(/안/gi, '뿅'); // '안'을 '뿅'으로 바꿀래요
console.log(result);

결과:

응용1) 영어만 골라내기

var str = '안녕hello하세요 안hi녕 안hi녕';
var result = str.replace(/[a-zA-Z]/gi, ''); // a~z와 A~Z를 ''으로 바꿀래요
console.log(result);

결과:

응용2) 특정 특문 골라내기

var str = '안녕!!@@##$$%%^^&&안녕';
var result = str.replace(/[@#%^&]/gi, ''); // 특수문자 @#%^& 들을 ''으로 바꿀래요
console.log(result);

결과:

14. 진수 변환

10진수 -> n진수

let num = 45;
console.log('10진수에서 2진수로 변환: ', num.toString(2));
console.log('10진수에서 3진수로 변환: ', num.toString(3));

결과:

n진수 -> 10진수

let num = 1200;
console.log('3진수에서 10진수로 변환: ', parseInt(num, 3));
console.log('4진수에서 10진수로 변환: ', parseInt(num, 4));

결과:

15. reduce()

reduce는 통상적으로 배열의 값의 합을 편하게 구하기 위해 사용한다

let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((acc, cur, idx) => {
    console.log('총합: ', acc);
    console.log('현재 값: ', cur);
    console.log('인덱스: ', idx);
	console.log('-----------------');
    return acc +cur;
})
console.log(sum);

결과:

배열의 모든 요소를 더해주는 모습!
간단하게 원리를 설명하자면, reduce안에 들어가는 함수에서 리턴한 값이 누적값이 되는것이다.
그래서 이전까지 누적된 값 + 현재 값을 계속 반복하기 때문에 배열의 합을 구할 수 있는것이다!

누적값의 초기값을 정해줄 수 있다.

let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((acc, cur, idx) => {
    console.log('총합: ', acc);
    console.log('현재 값: ', cur);
    console.log('인덱스: ', idx);
	console.log('-----------------');
    return acc +cur;
}, 100) //여기에 초기값 추가
console.log(sum);

결과:

초기값을 정해준것과 정해주지 않은것의 인덱스차이점을 꼭 확인하자

16. 아스키코드 변환

문자 -> 아스키코드

console.log('A'.charCodeAt());
console.log('a'.charCodeAt());
console.log('z'.charCodeAt());

결과:

아스키코드 -> 문자

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

결과:

17. 소수 찾기

에라토스테네스의 체를 사용

let n = 1000;
let arr = Array(n + 1).fill(true);
    arr[0] = false;
    arr[1] = false;
    for(let i = 2 ; i * i < n ; i++) {
        if(arr[i]){
            for(let k = i * i ; k <= n ; k += i){
                arr[k] = false;
            }
        }
    }
console.log('1부터 n까지 소수의 개수: ', arr.filter(a => a).length);

결과:

0. 번외

Ⅰ. 정수 문자열을 정수로 바꾸기

var str = '123';
console.log(str + 300);
console.log((+str) + 300);

결과:

문자열 앞에 +를 붙이면 숫자로 계산이 가능하다!

Ⅱ. 전개연산자를 활용하여 원본 배열 유지하기

sort(), reverse() 등의 함수를 사용하면 원본 배열이 바뀌어버리는데...

var arr_1 = [1, 5, 7, 2, 4, 9,];
var arr_2 = arr_1.sort((a, b) => a - b);		//전개연산자 없고
console.log(arr_1);
console.log(arr_2);
-----------------------------------------------
var arr_1 = [1, 5, 7, 2, 4, 9,];
var arr_2 = [...arr_1].sort((a, b) => a - b);	//전개연산자 있고
console.log(arr_1);
console.log(arr_2);

첫번째 결과:

원본까지 바꿔버리는 모습

두번째 결과:

원본이 유지되는 모습..!

Ⅲ. 제곱하기

곱하기 기호를 두번 쓰면 제곱이 된다!

console.log(2 ** 5);

결과:

Ⅳ. 배열 속 undefind 없애기

filter() 사용하기

let arr_1 = ['1', '2', '3', '', '', '6'];
let arr_2 = arr_1.filter(a => a);
console.log(arr_1);
console.log(arr_2);

결과:

빈칸만 사라지는 모습!

Ⅴ. 배열 중복요소 삭제하기

set객체에는 중복된 값이 저장될 수 없다!

var arr_1 = ['1', '2', '3', '4', '5', '2', '3', '5'];
var arr_2 = [...new Set(arr_1)];
console.log(arr_1);
console.log(arr_2);

결과:

시훈

Front-end 호소인

이전 포스트

[ React ] React-Slick 라이브러리 커스텀하기

다음 포스트