[JavaScript] 자바스크립트 Array 메서드 정리

Array 메서드

속성 / 메서드	설명
length	배열의 크기를 반환합니다.
toString()	배열을 문자열로 변환하여 반환합니다.
join(string)	배열의 모든 요소를 인자로 넣은 문자열을 넣어 연결한 문자열을 반환합니다.
pop()	배열에서 마지막에 있는 요소를 삭제하고 반환합니다.
push()	배열의 맨 마지막에 인자로 전달한 요소를 추가합니다.
concat()	두 개의 배열을 합친 하나의 배열을 반환합니다.
slice(m, n)	m번째 초과, n번째 이하의 요소들을 가지고 있는 새로운 배열을 반환합니다.
sort()	해당 배열을 오름차순으로 정렬한 후 저장합니다.
reverse()	해당 배열을 내림차순으로 정렬한 후 저장합니다.

예시

var array = ['a', 'b', 'c'];
var arrays = ['d', 'e'];

// toString
console.log(array.toString()); // "a,b,c"

//join
console.log(array.join("/")); // "a/b/c"

// pop
console.log(array.pop()); // "c"
console.log(array); // ["a", "b"]

// push
array.push("c");
console.log(array); // ["a", "b", "c"]

// concat
console.log(array.concat(arrays)); // ["a", "b", "c", "d", "e"]

// slice
console.log(array.slice(1, 2)); // ["b"]

 

배열 반복 메서드

메서드	설명
forEach(callback)	배열 요소를 돌아가면서 한번씩 콜백함수를 실행합니다.
map(callback)	콜백함수에 의해 만들어진 새로운 배열을 반환합니다.
filter(callback)	콜백함수의 조건에 의해 만들어진 새로운 배열을 반환합니다.
reduce(callback)	각 요소에 대해 콜백함수를 실행합니다. (total을 이용하여 이전에 리턴되었던 값 사용가능)
every(callback)	각 요소가 모두 조건을 만족하면 true, 그렇지 않으면 false 반환합니다.
some(callback)	하나의 요소라도 조건을 만족하면 true, 그렇지 않으면 false 반환합니다.
find(callback)	배열에서 조건을 만족하는 첫 번째 요소를 반환합니다.

 

forEach, map, reduce 비교

forEach

function myFunction(value, index, array) {
  console.log("값: " + value + ", 인덱스:  " + index); 
}

var numbers = [1, 2, 3, 4, 5];
numbers.forEach(myFunction);
// 값: 1, 인덱스: 0
// 값: 2, 인덱스: 1
// 값: 3, 인덱스: 2
// 값: 4, 인덱스: 3
// 값: 5, 인덱스: 4

 forEach메서드는 인자로 콜백 함수를 넣어줄 수 있는데 그 콜백 함수는 값, 인덱스, 배열 자체인 3가지의 매개변수를 받을 수 있습니다. 따라서 각각의 배열의 요소에 따라 value와 index 값이 바뀌는 것입니다. 그리고 배열 요소를 돌아가면서 한 번씩 문장을 실행합니다.

 

map

function myFunction(value, index, array) {
  return value + index;
}

var numbers = [1, 2, 3, 4, 5];
var array = numbers.map(myFunction);
console.log(array);

map도 똑같이 3가지의 매개변수를 받을 수 있고 배열 요소를 돌아가면서 한 번씩 문장을 실행합니다. forEach와 다르게 새로운 배열을 반환합니다.

 

reduce

function myFunction(total, value, index, array) {
  return total + value;
}

var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(myFunction);
console.log(sum); // 15

 위와는 다르게 reduce는 추가적으로 total이라는 매개변수를 받을 수 있습니다. total은 함수에서 이전에 반환했던 값을 나타내므로 배열의 총합을 구할 수 있습니다.

 

filter, every, some, find 비교

filter

function myFunction(value, index, array) {
  return value > 3;
}

var numbers = [1, 2, 3, 4, 5];
var array = numbers.filter(myFunction);
console.log(array); // [4, 5]

filter는 return에 조건을 줄 수 있고 그 조건을 만족하는 요소들을 모아놓은 새로운 배열을 반환합니다.

 

every

function myFunction(value, index, array) {
  return value > 3;
}

var numbers = [1, 2, 3, 4, 5];
var bool = numbers.every(myFunction);
console.log(bool); // false

 해당 배열의 요소들이 모두 조건을 만족하느냐에 따라 true, false 값을 반환합니다.

 

some

function myFunction(value, index, array) {
  return value > 3;
}

var numbers = [1, 2, 3, 4, 5];
var bool = numbers.every(myFunction);
console.log(bool); // true

every와 반대로 배열에 조건을 만족하는 요소가 하나라도 있으면 true를 반환합니다.

 

find

function myFunction(value, index, array) {
  return value > 3;
}

var numbers = [1, 2, 3, 4, 5];
var num = numbers.find(myFunction);
console.log(num); // 4

배열에서 조건을 만족하는 첫번 째 요소 자체를 반환합니다.