[JS] array 메서드

js 코딩테스트 준비하며 자주 사용한 함수를 메모했습니다.

 

MDN을 참고했습니다.

JavaScript | MDN

 

함수의 설명에 있어서 매개변수에 대한 설명이 부족합니다.

위 사이트에 접속해서 매개변수와 활용 예제를 확인하시는 것을 추천드립니다.

 

어떤 값을 '반환' 하는지, 혹은 원본 데이터를 수정하는 것인지를 유의하시면 좋을 것 같습니다.

 

Array 메서드

 

arr.length

메서드가 아니라, Array 객체의 속성(property)이다.

배열의 길이를 반환한다.

 

arr.concat()

두 개 이상의 배열을 병합하는 데 사용된다.

이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환

 

arr.pop() / arr.push()

js의 배열을 stack 자료구조처럼 사용할 수 있는 메서드.

pop: 배열에서 마지막 요소를 제거하고 그 요소를 반환

push: 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환

원본 배열의 값을 변경한다.

 

arr.shift() / arr.unshift()

js의 배열을 queue 자료구조처럼 사용할 수 있는 메서드.

shift: 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환

unshift: 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환

 

arr.fill()

배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채운다.

 

arr.filter() / arr.map() / arr.forEach() / arr.reduce()

배열의 요소를 순회하며 작업할 때 사용한 메서드.

filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

map: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

forEach: 주어진 함수를 배열 요소 각각에 대해 실행 / 반환값은 undefined

reduce: 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결괏값을 반환

 

arr.flat()

모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어 붙인 새로운 배열을 반환

 

arr.includes()

배열이 특정 요소를 포함하고 있는지 판별 / true 또는 false 반환

 

arr.join()

배열의 모든 요소를 연결해 하나의 문자열 반환

 

arr.sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환

sort의 매개변수로 사용되는 함수의 활용은 진짜 재미있다.

해당 함수의 return이 true인 상태로 배열을 정렬해 준다.

함수가 없다면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬

원본 배열을 수정

arr.toSorted() 메서드와 다르다!

후자의 경우는 원본 배열을 수정하지 않고, 수정된 배열을 반환

 

arr.reverse()

배열의 순서를 반전

원본 배열 수정

 

arr.slice() / arr.splice()

slice: 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환

splice: 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

 

 

 

 

 

글을 마치며

프론트엔드 취업을 준비하면서, 나의 자바스크립트 숙련도가 낮다고 생각했다.

그래서, 앞으로의 코딩테스트를 대비할 겸 자바스크립트로 코딩테스트 준비하게 됐다.

 

플랫폼은 프로그래머스로 결정했다.

기업용 코딩테스트 서비스를 제공하는 곳이기도 하고,

JS문제를 풀 때 입출력을 받는게 파이썬에 비해서 귀찮기도 하기때문에 결정하게 됐다.

(백준의 경우 매번 입출력을 받아주는 코드를 작성해야 하는 데 비해서,

프로그래머스는 특별한 문제를 제외하고는 함수의 매개변수를 활용하면 되기 때문에)

 

지난 4일간 Lv.0 224문제를 풀었다.

Lv.0 문제 : 224문제

문제를 풀다보니 문제에 접근하는 습관이 생겼다.

대부분의 문제가 Array 객체를 활용하다 보니,

하나의 새로운 결과를 반환할 경우: reduce 사용

특정 조건을 판별할 경우: filter와 length속성 사용

배열의 요소를 전부 순회하며 조사할 경우: map 혹은 forEach 사용

파이썬에서는 for 반복문을 많이 사용했는데,

JS에서는 위와 같은 Array 메서드가 있다보니 코드 작성이 더 재미있었다.

(물론 시간복잡도에서 이점은 없었지만...)

 

이제 Lv.1 차례다.

확실히 파이썬으로 코테를 준비할 때랑 다른 점들이 느껴진다.

예를 들어, 순열과 조합을 구현하기 위해서 파이썬에서는 내장함수를 사용하면 됐는데,

자바스크립트에서는 필요할 때 직접 구현해야 하는 등 시간이 소요되는 부분이 있다.

하지만, 반대로 문자열을 다루는 메서드가 파이썬에 비해 편리하다 느껴진다.

 

다음에는 string 객체 메서드에 대해 작성하기도 하고,

기억에 남는 Lv.0 문제 풀이에 대해 포스팅도 하려고 한다.