JavaScript - 자주 쓰이는 배열 메서드 (Array Method)

JavaScript 배열 메서드

최근 노드를 공부하기 시작하면서 배열에 메서드를 이용해서 단순하지만 길게 반복해서 적었던 코드를 간결하고 가독성 좋게 리펙토링 하는 과정이 많아지면서 배열 메서드의 중요성도 많이 알게 되어서 배열 메서드에 대해 알아보았다.

 

구분자(separator) 뒤에 '?' 선택사항이다.

Array.join(separator?)

배열을 문자열로 만들 때 사용한다.
지정한 구분자를 넣어서 문자열로 이어준다.
구분자를 기입하지 않으면 ,(쉼표)를 이용해서 구분하여 준다.

const arr = ['바람', '비', '물'];

console.log(arr.join());
// 바람,비,물

console.log(arr.join(''));
// 바람비물

console.log(arr.join('-'));
// 바람-비-물

String.split(separator)

구분자를 기준으로 문자열을 배열로 바꾸어준다.

const fruits = '사과, 오렌지, 포도'
const arr = fruits.split(',')
const arr2 = fruits.split('지')

console.log(arr)
//[ '사과', ' 오렌지', ' 포도' ]

console.log(arr2)
//[ '사과, 오렌', ', 포도' ]

Array.splice(index, deleteCount?)

배열의 요소를 삭제한다. 인덱스 번호부터 삭제할 개수를 적을 수 있다.
반환 값은 삭제되는 요소이고, 기존의 배열에 변화가 있다.

const array = ['Name:baek','Age:29','Gender:Male', 'Host:127.0.0.1']
const array2 = ['Name:baek','Age:29','Gender:Male', 'Host:127.0.0.1']
let res = array.splice(1, 2) 
//인덱스 1번을 포함해서 2개를 제거한다.

let res2 = array2.splice(1) 
//지울 개수를 안 적으면 인덱스 뒤로 다 지우게 된다.

console.log(res)
// [ 'Age:29', 'Gender:Male' ]

console.log(array)
// [ 'Name:baek', 'Host:127.0.0.1' ]

console.log(res2)
//[ 'Age:29', 'Gender:Male', 'Host:127.0.0.1' ]

console.log(array2)
//[ 'Name:baek' ]

Array.slice(Start_index, End_index?)

특정 배열의 요소를 출력하여 준다.
시작 인덱스번호부터 끝 인덱스 번호의 -1만큼 출력한다.
기존 배열의 요소는 변화되지 않는다.

const array = [1, 2, 3, 4, 5]
let res

res = array.slice(2) // 인덱스 2부터 끝까지
console.log(res)
// [3, 4, 5]

res = array.slice(1, 3) //인덱스 1부터 인덱스2까지
console.log(res)
// [2, 3]

Array.filter(callback)

배열안에 요소가 하나씩 함수에 대입이 되어 조건을 만족하면 출력된다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']

const result = words.filter(word => word.length > 6)
//글자수가 6개보다 많은 단어에 대해 출력한다.

console.log(result)
//[ 'exuberant', 'destruction', 'present' ]

Array.map(callback)

배열안에 요소가 하나씩 함수에 대입되어 해당되는 값을 새로운 배열에 요소로 하여 리턴된다.

const alphabets = [
    { alphabet_E: 'a', alphabet_K: 'ㄱ' },
    { alphabet_E: 'b', alphabet_K: 'ㄴ' },
    { alphabet_E: 'c', alphabet_K: 'ㄷ' },
    { alphabet_E: 'd', alphabet_K: 'ㄹ' },
    { alphabet_E: 'e', alphabet_K: 'ㅁ' },
    { alphabet_E: 'f', alphabet_K: 'ㅂ' },
    { alphabet_E: 'g', alphabet_K: 'ㅅ' },
    ];

const results = alphabets.map(alphabet => `${alphabet.alphabet_E}_${alphabet.alphabet_K}`)

console.log(results);
/*
[
  'a_ㄱ', 'b_ㄴ',
  'c_ㄷ', 'd_ㄹ',
  'e_ㅁ', 'f_ㅂ',
  'g_ㅅ'
]
*/

Array.reduce (callback, initialValue?)

배열에 요소를 이용하여 callback함수를 실행한다. initialValue가 callback함수의 초기값이 된다.
callback함수의 매개변수로는 accumulator, currentValue, currentIndex, array 4가지를 갖는다.

 

만약 reduce() 함수 호출에서 initialValue가 있는 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같다. initialValue가 없다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같다.

 

reduce는 중요하기도 하고, 쓰이는 방법이 쉽지 않아서 예시를 몇 개 더 넣었다.

//기본 예제1
const arr1 = [1,2,3,4,5]
const result1 = arr1.reduce((acc, cur) => acc + cur,0)
console.log(result1) // 15

//기본 예제2
const arr2 = [1,2,3,4,5]
const result2 = arr1.reduce((acc, cur) => acc + cur,10)
console.log(result2) //25

//심화 예제
const arr = [3, -23, 123, -59, -5480, -24, 0, -69, 349, 3]
const result = arr.reduce((acc, cur) => { 
    if(cur < 0){
    // 처리할 현재 요소가 0보다 작을 경우 경우
    acc[0]++
    }
    else if(cur > 0){
    // 처리할 현재 요소가 0보다 클 경우
    acc[1]++
    }
    return acc //cur가 0일 때는 그대로 반환
}, [0,0])
console.log(result) // [5,4]

 

index	cur	acc
0	3	[0 , 1]
1	-23	[1, 1]
2	123	[1 ,2]
3	-59	[2 , 2]
4	-5480	[3 , 2]
5	-24	[4 , 2]
6	0	[4 , 2]
7	-69	[5 , 2]
8	349	[5 , 3]
9	3	[5 , 4]

 

 

 

 

 

 

 

참고 사이트

프로그래머YD 블로그 : https://7942yongdae.tistory.com/

MDN : https://developer.mozilla.org/ko/ 

유튜브 '드림코딩' : https://youtu.be/3CUjtKJ7PJg