JavaScript 코딩테스트 대비

hong·2023년 10월 20일

✔︎ Array

‣ 배열 길이

arr.length

‣ 배열 선언

const arr1 = []; // arr1 길이: 0
const arr2 = ['red', 'green', 'blue']; // arr2 길이: 3

const arr3 = new Array(); // arr3 길이: 0
const arr4 = new Array('red', 'green', 'blue'); // arr4 길이: 3

‣ 배열 마지막에 요소 추가

arr.push({추가할 요소});

‣ 배열 마지막 요소 삭제

arr.pop();

‣ 배열 자르기

// 배열 arr의 idx1부터 idx2 전까지 추출하여 새로운 배열 return
const new_arr = arr.slice(idx1, idx2);

// 배열 arr의 idx부터 개수만큼 원본 배열 삭제.
// 삭제한 요소들이 담긴 새로운 배열 return
const new_arr = arr.splice(idx, 개수);

splice로 배열 추가도 가능

// 배열 arr.splice()에서 세번 째 인자를 지정하면 원하는 idx에 value 값 추가.
// 배열 idx에서 cnt 수 만큼 제거하고, idx에 value 추가
const new_arr = arr.splice(idx, cnt, value);

// ex
const months = ['Jan', 'Feb', 'March', 'April', 'June'];
months.splice(2, 2, 'May'); // result: months = ['Jan', 'Feb', 'May', 'June']

‣ 배열 정렬

// 유니코드 순 오름차순 정렬
arr.sort();

// 숫자 순 오름차순 정렬
arr.sort((a, b) => a-b);
// 숫자 순 내림차순 정렬
arr.sort((a, b) => b-a);

‣ 배열 반대로 나열

// arr.reverse()를 사용할 경우, 원본 배열 arr reverse되어
// spread 문법으로 새로운 배열 생성해 정렬하는 것이 좋음
const reverse_arr = [...arr].reverse();

‣ 배열 포함 여부

arr.includes({찾는 요소}); // true or false로 반환

‣ 배열 요소 찾기

arr.indexOf({찾는 요소}); // 해당 요소 있다면 첫 번째 인덱스 반환. 없다면 -1 반환

‣ filter

조건에 만족하는 요소들 새로운 배열 return

const numbers = [1, 2, 3, 4, 5];
const results = numbers.filter(number => number>3); // results = [4, 5]

‣ reduce

각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환

const arr = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = arr.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue); // sumWithInitial: 10

‣ split

문자열을 기준으로 나누어서 배열 형식으로 반환

const str = "abcdef";
str.split("");   // result: ['a', 'b', 'c', 'd', 'e', 'f']
str.split("d");  // result: ['abc', 'ef']

‣ join

배열의 요소들을 하나의 문자열로 반환

const arr = [1, 2, 3, 4];
arr.join();    // result: "1,2,3,4"
arr.join("");  // result: "1234"
arr.join("*"); // result: "1*2*3*4"

✔︎ String

‣ 문자열 길이

str.length

‣ 문자 접근

const str = "testString";
str.at(0) // result: 't'
str[4]    // result: 'S';

‣ int → string

const num = 10;
num.toString();  // string "10"
num.toString(2); // string "1010". 이진수 변환

‣ string → int

const str = "100";
parseInt(str); // str이 숫자나 빈칸이 아닌 경우 NaN 반환

‣ string → float

parseFloat({변경할 문자열});

‣ 대/소문자 변환

str.toUpperCase(); // 문자열 모두 대문자로 변환
str.toLowerCase(); // 문자열 모두 소문자로 변환

‣ 문자열 자르기

// 문자열 idx1부터 idx2 전까지 추출하여 새로운 문자열 return
const new_str = str.substring(idx1, idx2);

‣ 문자열 교체

const new_str = str.replace('aa', 'A');

‣ 문자 찾기

str.indexOf({찾는 문자}); // 해당 문자 있다면 첫번째 인덱스 반환. 없다면 -1 반환

‣ 문자 유니코드

문자열의 idx에 해당하는 char의 유니코드를 return

// 'A' -> 65
// 'a' -> 97
str.charCodeAt(idx);

✔︎ 기타

‣ 최댓값 찾기

Math.max(1, 2, 3);  // result: 3

const arr = [2, 3, 4, 5, 6]; // 배열 내에서 최댓값 찾을 때, spread 문법 사용
Math.max(...arr);  // result: 6

‣ 숫자 아닌지 판별

해당 문자가 숫자가 아닌지 판별
숫자로 변환 가능 → false
숫자로 변환 불가능 → true

isNaN(NaN); // 참
isNaN(undefined); // 참
isNaN({}); // 참

isNaN(true); // 거짓
isNaN(null); // 거짓
isNaN(37); // 거짓

// 문자열
isNaN("37"); // 거짓: "37"은 NaN이 아닌 숫자 37로 변환됩니다
isNaN("37.37"); // 거짓: "37.37"은 NaN이 아닌 숫자 37.37로 변환됩니다
isNaN("123ABC"); // 참: parseInt("123ABC")는 123이지만 Number("123ABC")는 NaN입니다
isNaN(""); // 거짓: 빈 문자열은 NaN이 아닌 0으로 변환됩니다
isNaN(" "); // 거짓: 공백이 있는 문자열은 NaN이 아닌 0으로 변환됩니다

‣ 정규식 사용

/ / → 정규식 시작과 끝
[ ] → 괄호안 문자들 중 하나
flag g → 문자열 내의 모든 패턴 검색

var pattern1 = /[0-9]/;
var pattern2 = /[a-zA-Z]/;
var pattern3 = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
var pattern4 = /[~!@#\#$%<>^&*]/;

var inputVal = "테스트";
if (!pattern1.test(inputVal) || !pattern2.test(inputVal)) { // {패턴}.test({문자열}) -> true or false로 반환
	inputVal = inputVal.replace(/[^a-z0-9]/g,'*'); // a-z0-9가 아니면, '*'로 대체. inputVal = "***"
  	inputVal = inputVal.replace(/[a-z0-9]/g, '*');    // a-z0-9 라면, '*'로 대체. inputVal = "테스트"
}

연속된 '.' 2개 이상 '.' 하나로 치환
\. → . 문자
{2,} → 2개 이상

// 
let inputVal = "...test..string";
inputVal = inputVal.replace(/\.{2,}/g, '.'); // inputVal = ".test.string"

‣ padStart, padEnd

특정 문자열 길이에 맞춰 좌우를 채우는 기능

string.padStart({지정할 문자열 길이}, {string.length 모자란 길이 채울 문자})

const str = "aa";
const size = 4;
const result = str.padStart(size, 0); // result = 00aa;

const id = '아이디입니다'
const temp = id.slice(0, 3);
const result = temp.padEnd(id.length, '*'); // result = "아이디***";

✔︎ Map

‣ map 선언

const map = new Map();

‣ map 요소 추가

map.set({추가할 key}, {추가할 value});
map.set('age', 20);

‣ map value 값 반환

탐색하는 key값에 해당하는 value 반환. 없다면, undefined 반환

map.get({key});
map.get('age'); // result: 20

‣ map key 존재 여부

true or false로 반환

map.has({key});
map.has('age');   // result: true
map.has('name');  // result: false

‣ map 요소 삭제

map.delete({삭제할 key});
map.delete('age');

‣ map 모든 요소 제거

map.clear();

‣ map 요소 개수 반환

map.size;

✔︎ Set

‣ set 선언

const set = new Set();
const set = new Set(['aa', 'bb']); // 배열 안에 요소 나열해야함

‣ set 요소 추가

set.add({추가할 요소});
set.add('cc');

‣ set 요소 삭제

set.delete({삭제할 요소});

‣ set 요소 존재 여부