JavaScript 배열 함수

pop

배열 뒷부분의 값을 삭제

var arr = [ 1, 2, 3, 4 ];
arr.pop();
console.log( arr ); // [ 1, 2, 3 ]

push

배열 뒷부분에 값을 삽입

var arr = [ 1, 2, 3, 4 ];
arr.push( 5 );
console.log( arr ); // [ 1, 2, 3, 4, 5 ]

unshift

배열 앞부분에 값을 삽입

var arr = [ 1, 2, 3, 4 ];
arr.unshift( 0 );
console.log( arr ); // [ 0, 1, 2, 3, 4 ]

shift

배열 앞부분의 값을 삭제

var arr = [ 1, 2, 3, 4 ];
arr.shift();
console.log( arr ); // [ 2, 3, 4 ]

splice

배열의 특정위치에 요소를 추가하거나 삭제
splice( index, 제거할 요소 개수, 배열에 추가될 요소 )

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 3, 2 );
console.log( arr ); // [ 1, 2, 3, 6, 7 ]   3번째 인덱스에서부터 2개 제거

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 2, 1, "a", "b");
console.log( arr ); // [ 1, 2, "a", "b", 4, 5, 6, 7 ] 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가

slice( startIndex, endIndex)

배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
var newArr = arr.slice( 3, 6 );
console.log( 'slice',  newArr ); // [ 4, 5, 6 ]

concat

다수의 배열을 합치고 병합된 배열의 사본을 반환

var arr1 = [ 1, 2, 3 ];
var arr2 = [ 4, 5, 6 ];
var arr3 = arr2.concat( arr1 );
console.log( arr3 ); // [ 4, 5, 6, 1, 2, 3 ]

every

배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하는지를 테스트

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.every( isEven ) ); // false  모든 요소가 true이면 true를 return 하고 그렇지 않으면 false

some

지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.some( isEven ) ); // true  하나라도 true이면 true를 return

forEach

배열의 각 원소별로 지정된 함수를 실행.
for문을 대체할 수 있는 함수. forEach 메서드는 자신의 내부에서 반복문을 실행.
배열을 순회하면서 수행 해야할 처리를 콜백 함수로 전달해 반복 호출.

var arr =[ 1, 2, 3 ];
arr.forEach( function( value ) {
  console.log( value );   // 1 2 3
});

forEach 메서드는 원본 배열을 변경 가능.

var arr = [1, 2, 3, 4];

// 함수 인자로 3개가 올 수 있는데 순서를 지켜야 함. (요소, 인덱스, 원본배열)
// 최소 요소는 넣어주어야 하고 인덱스부터는 생략할 수 있음.

arr.forEach(function(element, index, array) { 
	array[index] = element * 100;
});

console.log(arr);  // [100, 200, 300, 400]

const numbers=[1,2,3];
const powers = [];
numbers.forEach(x=>powers.push(x**2));
console.log(powers); //[1,4,9]

forEach 메서드의 반환값은 언제나 undefined.

map

배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환.
map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출.(여기까지는 forEach와 동일) 
그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환. (forEach와 가장 큰 차이점)
이때 원본 배열은 변경하지 않음.
map 메서드에서는 원본 배열의 원소와 일대일 mapping이 진행되기 때문에 원본 배열과 mapping후 배열의 길이는 항상 같음.
forEach보다 빠름.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.map( isEven );
console.log( newArr ); // [ false, true, false, true, false, true, false, true, false, true ]

const numbers=[1,2,3];
const mult = numbers.map(x=>x*2);
console.log(mult) // [2,4,6];

결론: forEach 메서드는 단순히 반복문을 대체하기 위한 함수이고, map 메서드는 요소값을 다른 값으로 mapping한 새로운 배열을 생성하기 위한 고차함수.

filter

지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.filter( isEven );
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]

reduce

누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 (누산된) 한 값으로 줄도록 함수를 적용

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var value = arr.reduce( function( previousValue, currentValue, index ) {
  return previousValue + currentValue;
});
console.log( value ); // 55

reverse

배열의 원소 순서를 거꾸로 바꿈.

var arr =[ 1, 2, 3, 4 ];
arr.reverse();
console.log( arr ); // [ 4, 3, 2, 1 ]

sort

배열의 원소를 알파벳순으로, 또는 지정된 함수에 따른 순서로 정렬한다. 모든 원소를 문자열로 취급해 사전적으로 정렬

var arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort();
console.log( arr ); // [ 1, 10, 11, 12, 13, 2, 3, 5 ];

// sort에 함수로 정렬
var arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort( function( a, b ) {
  return a - b;
})
console.log( arr ); // [ 1, 2, 3, 5, 10, 11, 12, 13 ]

toString

배열을 문자열로 바꾸어 반환

var arr =[ 1, 2, 3, 4 ];
console.log( arr.toString() ); // 1, 2, 3, 4

valueOf

문자열의 기본 값 반환 (원래 문자열 변경 안함.)

let text = "Hello World!";
let result = text.valueOf();

다음과 동일

let text = "Hello World!";
let result = text;

toString과 비슷, 그러나 배열을 반환.

var arr =[ 1, 2, 3, 4 ];
console.log( arr.valueOf() ); // [ 1, 2, 3, 4 ]

String 객체의 원시값을 반환.

const stringObj = new String('foo');

console.log(stringObj);
// expected output: String { "foo" }

console.log(stringObj.valueOf());
// expected output: "foo"

valueOf()메서드는 JavaScript 문자열의 기본 메서드.
JavaScript에서 내부적으로 사용.
일반적으로 코드에서 사용하지 않음.

join

배열 원소 전부를 하나의 문자열로 합침.

var arr =[ 1, 2, 3, 4 ];
console.log( arr.join() );      // 1,2,3,4
console.log( arr.join( '-' ) ); // 1-2-3-4

findIndex

배열에서 조건에 맞는 값이 몇번째 인덱스 인지 알려줌.

const a = [
  { name : '호랑이' },
  { name : '사자' },
  { name : '고양이' },
  { name : '멍멍이' }
]
console.log(a.findIndex(ary => ary.name === '고양이')); // 2

find

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출.
콜백 함수의 반환된 값이 true이면 그 즉시 멈추고 해당 요소를 리턴.

const res = students.find((student) => student.score === 90);

console.log(res);
// Student {name: "C", age: 30, enrolled: true, score: 90}

indexOf

배열의 요소 값을 indexOf 메서드 인자로 넘겨주면 해당 하는 값이 몇번째 인덱스 인지 알려줌

const a = ['호랑이', '사자', '고양이', '멍멍이'];
console.log(a.indexOf('고양이')); // 2

Reference
https://velog.io/write?id=c9931b61-ce11-445d-8773-56b777c3887c
https://d-cron.tistory.com/11
https://pro-self-studier.tistory.com/23
https://www.w3schools.com/jsref/jsref_valueof_string.asp