[JavaScript] 다양한 배열 메소드

🍭 push

배열 뒷부분에 값을 삽입한다.

var arr = ["a", "b", "c", "d"];
arr.push("e");
console.log(arr);  // ["a", "b", "c", "d", "e"]

 

🍭 pop

배열 뒷부분의 값을 삭제한다.

var arr = ["a", "b", "c", "d"];
arr.pop();
console.log(arr);  // ["a", "b", "c"]

 

🍭 shift

배열 앞부분의 값을 삭제한다.

var arr = ["a", "b", "c", "d"];
arr.shift();
console.log(arr);  // ["b", "c", "d"]

 

🍭 unshift

배열 앞부분에 값을 삽입한다.

var arr = ["a", "b", "c", "d"];
arr.unshift("z");
console.log(arr);  // ["z", "a", "b", "c", "d"]

 

🍭 splice

배열의 특정 위치에 요소를 추가하거나 삭제한다.

var arr = ["a", "b", "c", "d"];
arr.splice(3, 1);  // 3번째 인덱스에서부터 1개 제거
console.log(arr);  // ["a", "b", "c"]

var arr = ["a", "b", "c", "d"];
arr.splice( 3, 1, "e", "f");  // 3번째 인덱스에서 1개 제거 후 "e"와 "f" 추가
console.log(arr);  // ["a", "b", "c", "e", "f"]

 

🍭 slice

배열의 startIndex부터 endIndex까지(endIndex는 포함x)에 대한 얕은 복사를 새로운 배열 객체로 반환한다.

🔥 얕은 복사(Shallow Copy)란?
객체를 복사할 때 원래 값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다.

var arr = ["a", "b", "c", "d"];
var newArr = arr.slice(); 
console.log(newArr);  // ["a", "b", "c", "d"]

 

🍭 concat

여러 개의 배열을 합치고 병합된 배열의 사본을 반환한다.

var arr1 = ["a", "b", "c", "d"];
var arr2 = ["e", "f"];
var arr3 = arr1.concat(arr2); 
console.log(arr3);  //  ["a", "b", "c", "d", "e", "f"]

 

🍭 some

함수의 결과가 참(true)일 때까지 배열의 각 원소를 반복한다.

var arr = ["a", "b", "c", "d"];

var isEven = function(value) {  // value가 "a"이면 true를 반환한다.
  return value == "a";
};
console.log(arr.some(isEven));  // true

 

🍭 every

배열의 각 element에 대해서 테스트 함수의 반환 값이 모두 true인지 확인한다. 즉, 모든 case가 참일때 true를 반환한다.

var arr = [{name: '짱구', age: 10}, {name: '짱아', age: 2}, {name: '맹구', age: 15}]

console.log(arr.every((item)=> item.age>10));  // false (바둑이 탈락!)
console.log(arr.every((item)=> item.age>1));  // true

 

🍭 forEach

배열의 각 요소에 대해 callback을 실행한다.
(but, 중간에 break문 사용 못함)

var arr = ["a", "b", "c", "d"];

arr.forEach(function(value) {
    console.log(value);  // a, b, c, d
});

 

🍭 map

forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행한 후, callback에서 return 되는 값을 배열로 만들어낸다.

var arr1 = ["a", "b", "c", "d"];

var isEven = function(value) {
  return value == "a";
};

var arr2 = arr1.map(isEven);
console.log(arr2);  // [true, false, false, false]

 

🍭 filter

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

var arr1 = ["a", "b", "c", "d"];

var isEven = function(value) {
  return value == "a";
};

var arr2 = arr1.filter(isEven);
console.log(arr2);  // ["a"]

 

🍭 reduce

배열의 각 요소에 대해 callback을 실행하며 단 1개의 출력 결과를 만든다.

 

🍭 reverse

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

var arr = ["a", "b", "c", "d"];
arr.reverse();
console.log(arr);  // ["d", "c", "b", "a"]

 

🍭 sort

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

var arr = ["b", "c", "a", "x", "f", "e", "y", "o"];
arr.sort();
console.log(arr);  // ["a", "b", "c", "e", "f", "o", "x", "y"]

 

🍭 toString

배열을 문자열로 바꾸어 반환한다.

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

 

🍭 valueOf

문자열에 대한 원시 데이터형(primitive value)을 반환한다.

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

 

🍭 join

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

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