Javascript 자주 사용하는 메서드 (feat. array)

React 프로젝트를 진행하면서 자주 사용하는 자바스크립트 메서드를 기록했습니다.

현업에서 자주 사용하는 함수라 숙지해두면 좋을 것 같습니다.

 

1. split() 함수

string.split(seperator, limit)

let arr = 'abc.def'.split('.')
arr 
// ['abc', 'def']

split() 함수는 문자열(string) 을 Seperator 인자를 기준으로 자릅니다. 즉 문자를 분리할 구분자가 seperator 입니다.

분리된 문자열은 배열의 형태로 리턴 됩니다.  위 예시에선 arr 변수에 리턴 된 배열을 할당하였습니다.

 

limit 인자는 리턴 된 배열의 길이 혹은 분할 갯수를 나타냅니다.

let arr = 'abc.def.ghi.jkl.mno'.split('.', 3)
arr 
// ["abc", "def", "ghi"]  limit 가 3 이므로 3개의 원소로 분할하여 리턴합니다.


let arr = 'abc.def.ghi.jkl.mno'.split('.', 2)
arr
// ["abc", "def"]  limit 가 2 이므로 2개의 원소로 분할하여 리턴합니다.

 

 

2. filter() 함수

filter 내부 콜백 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환합니다.

(비슷한 것으로 find() 함수가 있는데, find() 는 모든 요소가 아닌, 조건을 충족하는 첫번째 요소만 리턴합니다.)

let arr = [1, 2, 1, 4, 1, 6];

let filtered_arr = arr.filter(element => element === 1); // 이 때 element 는 arr의 원소들이 차례대로 리턴 된 것입니다.
filtered_arr
// [1, 1, 1]


let filtered_arr2 = arr.filter(element => element > 1);
filtered_arr2
// [2, 4, 6]

arr
// [1, 2, 1, 4, 1, 6] : 초기 선언대로 유지된다.

이때 callback 함수의 조건은 element === 1, element > 1 에 해당됩니다.

 

filter 함수는 호출되는 배열을 변화시키지(immutate) 않는 것을 확인 할 수 있습니다.

즉, arr 라는 배열에 filter() 함수를 걸면, arr 는 유지된 채 새로운 배열이 리턴됩니다.

 

3. indexOf()

Javascript 의 배열에서 원하는 값의 인덱스를 찾을 땐 indexOf() 함수를 사용합니다.

찾고자 하는 원소를 indexOf() 의 인자로 넣는데, 값이 존재하지 않으면 -1, 존재하면 해당 원소의 인덱스 값 을 리턴합니다.

let arr = [1, 2, 3, 4, 5, 6];

arr.indexOf(0)
// -1

arr.indexOf(1)
// 0

arr.indexOf(6)
// 5

 

4. includes()

찾고자 하는 원소가 배열에 존재하는지 boolean 값으로 리턴하는 함수입니다.

let arr = [1, 2, 3, 4, 5, 6];

arr.includes(0)
// false

arr.includes(1)
// true

 

5. shift()

기존 배열에서 첫번째 원소만 제거할 때 shift() 메서드를 사용합니다.

파이썬의 deque() 에서 popleft() 를 한 것과 같은 결과를 리턴합니다.

이 메서드는 filter() 와 다르게 기존 배열을 변환(mutate)시킵니다.

let arr = [1, 2, 3, 4, 5, 6];

arr.shift()
// 1

arr
// [2, 3, 4, 5, 6]

arr.shift()
// 2

arr
// [3, 4, 5, 6]