[JavaScript] 코딩테스트에서 자주 쓰는 필수 API

코테에서 자주 쓰는 필수 API = array apis

 

1. 배열 전체 원소 print하는 법 3가지

// 1. 반복문으로 print
for(let i=0; i<array.length; i++) {
	console.log(array[i]);
    // console.log(array[i].property); (object라면)
}

// 2. let 아이템 of 배열로 print
for(let element of array) {
	console.log(element)
   	}

// 3. forEach api로 print
array.forEach((element) => console.log(element));
array.forEach((element) => console.log(element.property));

forEach 용법 : 부가 기능 없이 모든 배열의 원소를 하나씩 점검

const arr = [1,2,3,4,5,6,7,8,9,10];
arr.forEach(element => console.log(element));
// 결과값 :
// 엘리먼트 하나씩 콘솔에 찍음

 

 

2. 받아온 배열 혹은 배열로 만들 수 있는 스트링 컨버팅하기 

• 1. string.split();

스트링을 받아서 배열로 만드는 api. 

const fruits = '사과,딸기,오렌지';
let result1 = fruits.split(','); // ','를 기준으로 문자열 잘라 배열에 넣어서 리턴
let result2 = fruits.split(); // 기준점을 넣어주지 않으면 뭉텅이로 잘라서 배열에 넣음

 

• 2. array.join();

array를 string으로 만드는 api. 

const fruits = ['사과','딸기','오렌지'];
let result1 = fruits.join(); 
let result2 = fruits.join('-');
console.log(result1); // 사과딸기오렌지
console.log(result2); // 사과-딸기-오렌지

 

• 3. array.splice(begin,N);

splice는 begin 인덱스 위치부터 N개의 원소를 자르는 api이며 원본 배열을 수정한다. 원하는 인덱스를 지정해서 삭제할 수 있다.

const fruitArray = ['사과','딸기','수박','바나나','포도'];
const result = fruitArray.splice(0,2); // 인덱스 0번부터 2개의 원소를(인덱스 넘버 0~1) 삭제
console.log(fruitArray); // ['수박','바나나','포도]
console.log(result); // ['사과','딸기']

 

// ['수박','바나나','포도]
fruitArray.splice(1,1); // 1부터 1개가 지워짐 = 인덱스 번호 1에 해당하는 원소(바나나) 삭제

인자 하나만 넣을 경우 n번째 인덱스가 삭제된다.

// ['수박','바나나','포도']
fruitArray.splice(1); // 인덱스 번호 1에 해당하는 원소부터 끝까지(바나나,포도) 모두 삭제

splice를 이용하여 원소를 지운 공간에 새로운 원소를 넣을 수 있다.

// ['수박','포도']
fruitArray.splice(0,1,'망고','파인애플'); // 0부터 1개 지우고 지워진 자리부터 '망고', '파인애플' 삽입 
console.log(fruitArray); 
// ['망고','파인애플','포도']

// ['망고','파인애플','포도']
fruitArray.splice(0,0,'배','용과'); // 0부터 0개 지우고 '배', '용과' 삽입 
console.log(fruitArray); 
// ['배','용과','망고','파인애플','포도']

 

• 4. array.slice(begin,end);

begin 인덱스부터 end-1 인덱스를 슬라이스하여 리턴(begin ~ end-1까지의 원소 = 리턴할 원소)

api 실행 후에도 원본 배열이 손상되지 않음

const array = [1,2,3,4,5];
const result = array.slice(2,5); // 인덱스 넘버 2부터 5-1까지 슬라이스하여 result에 넣음
console.log(result); // [3,4,5]
console.log(array); // [1,2,3,4,5]

 

• 5. array.findIndex((element) => element.property);

콜백 함수의 조건을 만족하는 '인덱스 넘버'를 반환 / 탐색, 숫자로 리턴

const arr = [
    { num:1, color: "red" },
    { num:2, color: "balck" },
    { num:3, color: "blue" },
    { num:4, color: "green" },
    { num:5, color: "blue" }
];

console.log(arr.findIndex((element) => element.color === "green")); 
// 결과값 : 3

 

• 6. array.indexOf('element');

element의 인덱스 번호를 반환하며(중복으로 들어있을 경우 첫번째 인덱스 번호 리턴) 배열에 없을 경우에는 -1로 리턴

• array.lastIndexOf('element') : 배열에서 제일 마지막에 나온 element의 인덱스 넘버 출력

 

• 7. array.includes('element');

element가 배열에 들어있다면 true, 들어있지 않다면 false 리턴

 

 

• 8. array.find((element) => element.property);

콜백 함수의 조건을 만족하는 '인덱스 전체'를 반환 / 탐색, 하나의 인덱스 전체로 리턴

const arr = [
    { num:1, color: "red" },
    { num:2, color: "balck" },
    { num:3, color: "blue" },
    { num:4, color: "green" },
    { num:5, color: "blue" }
];

console.log(arr.find((element)=>element.color === "green"));
// 결과값 : { num: 4, color: "green" }

 

• 9. array.filter((element) => element.property === "조건");

콜백 함수의 조건을 만족하는 모든 원소를 배열로 반환 / 탐색, 복수의 인덱스를 배열로 리턴

const arr = [
    { num:1, color: "red" },
    { num:2, color: "black" },
    { num:3, color: "blue" },
    { num:4, color: "blue" },
    { num:5, color: "blue" },
    { num:6, color: "green" },
];

console.log(arr.filter((element)=>element.color === "blue"));
// 결과값 :
// [{ num:3, color: "blue" }, { num:4, color: "blue" }, { num:5, color: "blue" }];

const animals = [
    {
        name : 'lion', 
        size : 'big',
        isAggresive: true,
        weight: 200
    },
    {
        name : 'cat', 
        size : 'small',
        isAggresive: true,
        weight: 10
    },
    {
        name : 'dog', 
        size : 'small',
        isAggresive: true,
        weight: 20
    },
    {
        name : 'rat', 
        size : 'small',
        isAggresive: true,
        weight: 2
    }
];

const samllAnimal  animals.filter(function(animal){
	return animal.size === 'small';
});

console.log(samllAnimal);
// 결과값 :
/*   {
        name : 'cat', 
        size : 'small',
        isAggresive: true,
        weight: 10
    },
    {
        name : 'dog', 
        size : 'small',
        isAggresive: true,
        weight: 20
    },
    {
        name : 'rat', 
        size : 'small',
        isAggresive: true,
        weight: 2
    }
*/

 

• 10. array1.concat(array2);

array1과 array2를 붙여서 반환

const arr = [1,2,3];
const arr2 = [4,5,6];
console.log(arr.concat(arr2));
// 결과값:
// [1,2,3,4,5,6];

 

• 11. array.sort(); 

원본 배열의 정렬

let chars = ["나","가","다"];
chars.sort();
console.log(chars); 
// 결과값 :
// ["가", "나", "다"]

디폴트값이 사전 순 정렬이므로(유니코드 값 순서대로 오름차순 정렬, 대문자가 소문자보다 앞에 오도록 정렬함) sort로 숫자 정렬하려면 수정해서 사용해야함 

let numbers = [0,3,4,1,30,6,2,12];
numbers.sort();
console.log(numbers); // 0,1,12,2,3,30,4,6 으로 반환 (sort 사전순 정렬이라..)
numbers.sort();
const compare = (a,b) => {
    // 1. 같다
    // 2. 크다
    // 3. 작다

    if(a > b) {
        // 크다
        return 1;  // 양수가 나오면 a가 뒤로 감
    }

    if (a < b) {
        // 작다
        return -1; // 음수가 나오면 a가 앞으로 감
    }
    //같다
    return 0; // a와 b의 자리 바꾸지 않음
}
numbers.sort(compare);
console.log(numbers);

var data = [1,11,12,2,3,4];
data.sort();


1)sort()함수를 이용하여 숫자 오름차순 정렬

data.sort(function(a,b) { return a - b; });
2)sort()함수를 이용하여 숫자 내림차순 정렬

data.sort(function(a,b) { return b - a; });

 

• 12. array.reverse();

배열에 들어있는 원소의 순서를 거꾸로 뒤집음, 배열 자체를 수정

 const array = [1,2,3,4,5];
 let result = array.reverse(); // 배열 안에 들어있는 아이템의 순서를 거꾸로
 console.log(result); // [5,4,3,2,1]
console.log(array);  // [5,4,3,2,1]

 

• 13. 짝수만 들어있는 배열, 홀수만 들어있는 배열 만들기 

1) forEach로 홀수 배열 만들기

arr.forEach(element => {
	if(element%2 !== 0) { // 원소를 2로 나눈 값의 나머지가 0이 아니라면
    newArr.push(element) // newArr에 push함
    }
});

 

2) forEach로 짝수 배열 만들기

arr.forEach(element => {
	if(element%2 === 0) {  // 원소를 2로 나눈 값의 나머지가 0이라면
    newArr2.push(element) // newArr2에 push함
    }
});