ProgrammingJavaScript

JS Array 메서드 정리

Array, JavaScript

JavaScript Array Reference

자바스크립트 배열 객체에 대해서 정리. 참고 사이트는 w3schhols-JS

들어가기 전 자바스크립트는 5가지 자료형 number, string, boolean, undefined, null을 제외한 모든 것은 객체이다. 라는것을 알고 들어가야한다. 배열도 객체 함수도 객체!! 이다.

배열 객체는 여러개의 값을 하나의 단일 변수에 저장하는데 사용된다. 배열의 인덱스는 첫번째 요소를 기준으로 0부터 시작한다.

Array Properties 배열 속성

속성 설명
constructor Array 객체 프로토타입을 생성한 함수를 반환
length Array 요소 안의 개수를 반환
prototype Array 객체에 속성 및 메서드를 추가 할 수 있다.

Array Methods 배열 메서드

concat() 메서드

concat () 메서드는 두 개 이상의 배열을 조인하는 데 사용된다.

이 메서드는 기존 배열을 변경하지 않지만 조인 된 배열의 값이 들어있는 새 배열을 반환한다.

1
2
3
4
5
6
7
8
9
#사용법
array1.concat(array2, array3, ..., arrayX);
#예제
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
#결과
children
(5) ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]

copyWithin() 메서드

copyWithin () 메서드는 배열 내의 요소를 지정된 위치로 복사하고 지정한 위치에서 부터 복사해서 새로운 배열을 반환한다. 설명이 어렵다. ECMAScript 6 부터 사용가능

문법

1
array.copyWithin(target, start, end);

매개변수 값

Parameter 설명
target 필수. 요소가 복사되는 인덱스의 위치를 지정
start 선택적. 요소 복사를 시작할 인덱스의 위치 (기본값은 0)
end 선택적. 요소 복사 마지막 인덱스의 위치 (기본값은 array의 lenght 값) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#예제
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
(4) ["Banana", "Orange", "Banana", "Orange"]
0:"Banana"
1:"Orange"
2:"Banana"
3:"Orange"

#예제2
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);
(6) ["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]
0:"Banana"
1:"Orange"
2:"Banana"
3:"Orange"
4:"Kiwi"
5:"Papaya"
length:6

예제 2만 설명 해보면 fruits.copyWithin(2,0,2); 이다. 복사되는 인덱스의 위치를 2로 잡았다. 0을 기준으로 시작되기 때문에 위의 fruits 배열의 Apple 부터 복사가 시작된다. 그리고 start 값은 0으로 friuts 배열의 0번째 부터 부터 시작하겠다는 의미이다. 그리고 마지막 end 값은 fruits 배열의 몇 번째까지 복사를 하겠다는 의미이기 때문에 때문에 Banana 부터 2번째 Apple 이전! 까지 복사하겠다는 명령이다. (start는 포함하고 end는 포함하지 않는 것 같다.) 그래서 결과를 살펴보면 위와 같이 나온다.

entries() 메서드

key/value 쌍의 형식으로 Array Iterator 객체를 만들어서 반환한다. 원래 배열에 대해서 각 항목의 관한 순서가 key 값으로 그리고 기존 배열에 들어있던 값이 value로 나타내진다. ECMAScript6에서 사용 -> 일단 보류

every() 메서드

every() 메서드는 배열의 모든 요소를 순회하면서 특정 조건을(함수) 배열의 값들이 만족시키는지 검사하는 메서드이다. every () 메서드는 배열에있는 각 요소에 대해 함수를 한 번 실행한다. 함수가 false 값을 반환하는 배열 요소를 찾으면 every ()은 false를 반환하고 나머지 값은 확인하지 않는다. false가 발생하지 않으면 every ()는 true를 반환한다.

  • every()는 값없이 배열 요소에 대해 함수를 실행하지 않는다.
  • every()는 원래 배열을 변경하지 않는다.

리턴 값은 Boolean 값으로 리턴한다.

문법

1
array.every(function(currentValue, index, arr), thisValue);

매개변수 값

Parameter 설명
function(currentValue, index, arr) 필수. 배열을 순회하면서 요소에 대해서 실행할 함수
currentValue = 필수. 현재 순회되고 있는 요소에 대한 값
index = 선택. 현재 배열 요소의 인덱스
arr = 선택. 현재 요소가 속한 배열 객체
thisValue 선택. 함수에 전달되어 “this”값으로 사용될 값입니다.
이 매개 변수가 비어 있으면 값 “undefined”가 “this”값으로 전달됩니다.		 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#예제
function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array1 = [1, 40, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

#예제2
function isBigEnough(element, index, array) {
  console.log(element);
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

// element는 현재 배열에서 순회하고 있는 요소이다.
// arr은 현재 배열 객체

fill() 메서드

fill() 메서드는 배열의 모든 요소를 정적 값으로 채 웁니다.

fill() 시작 및 끝 인덱스를 지정할 수 있습니다. 기본적으로 전체 배열을 변경한다.

리턴 값은 변경된 배열을 반환한다. ECMAScript 6 부터 사용가능

문법

1
array.fill(value, start, end);

매개변수 값

Parameter 설명
value 필수. 배열을 채우기 위한 값
start 선택. 시작 인덱스, 기본 값은 0
end 선택. 끝 인덱스, 기본 값은 배열의 길이

예제

1
2
3
4
5
6
7
8
9
10
11
12
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi", 2, 4);

//결과 (4) ["Banana", "Orange", "Kiwi", "Kiwi"]

[1, 2, 3].fill(4)               // [4, 4, 4]
[1, 2, 3].fill(4, 1)            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1)         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2)       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN)     // [1, 2, 3]
[].fill.call({ length: 3 }, 4)  // {0: 4, 1: 4, 2: 4, length: 3}

filter() 메서드

filter () 메서드는 테스트를 통과 한 모든 배열 요소로 채워진 배열을 만듭니다 (함수로 제공).

참고 : filter ()는 값이없는 배열 요소에 대해 함수를 실행하지 않습니다.

참고 : filter ()는 원래 배열을 변경하지 않습니다.

반환 값으로는 조건을 만족한 요소가 들어있는 새로운 배열로 반환된다.

문법

1
array.filter(function(currentValue, index, arr), thisValue);

매개변수 값

Parameter 설명
콜백함수 function(currentValue, index, arr) 필수. 배열의 각 요소를 테스트 하는 함수. 인수(currentValue, index, arr)와 함께 호출
currentValue = 필수 .배열에서 현재 처리 중인 요소
index = 선택. 배열에서 현재 처리 중인 요소의 인덱스
arr = 선택. 현재 filter()를 실행하고 있는 배열 객체 (자기 자신이라고 생각하면 됨)
thisValue 선택. 함수에 전달되어서 “this”값으로 사용될 값이다.
이 매개변수가 비어 있으면 값 undefined가 this 값으로 전달됨

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#값이 10 이하인 조건을 만족하는 요소만을 새로운 배열로 반환
function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

#JSON 에서 filter
#id가 0이 아닌, 그리고 숫자인 모든 JSON 객체를 새로운 배열로 반환
var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function filterByID(obj) {
  if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
    return true;
  } else {
    invalidEntries++;
    return false;
  }
}

var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries = 4

find() 메서드

find() 메서드는 해당 배열 안의 값을 하나! 반환합니다. 이때 콜백함수가 요구하는 조건에서 만족하는 값 하나 만을 반환한다. 조건에 맞는 값을 찾으면 해당 요소의 값을 바로 반환하고 그렇지 않으면 undefined를 반환한다.

참고 - find() 메서드는 값이 없는 배열 요소에 대해 함수를 실행하지 않는다.

참고 - find() 메서드는 기존의 배열을 변경하지 않는다.

ECMAScript6

문법

1
array.find(function(currentValue, index, arr), thisValue);

매개변수 값

Parameter 설명
콜백함수 function(currentValue, index, arr) 필수. 배열의 각 요소를 테스트 하는 함수. 인수(currentValue, index, arr)와 함께 호출
currentValue = 필수 .배열에서 현재 처리 중인 요소
index = 선택. 배열에서 현재 처리 중인 요소의 인덱스
arr = 선택. 현재 filter()를 실행하고 있는 배열 객체 (자기 자신이라고 생각하면 됨)
thisValue 선택. 함수에 전달되어서 “this”값으로 사용될 값이다.
이 매개변수가 비어 있으면 값 undefined가 this 값으로 전달됨

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#속성 중 하나를 사용하여 배열에서 객체 찾기
var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

#배열에서 소수 찾기
function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5

findIndex() 메서드

findIndex() 메서드는 find() 와 같지만 다른 점은 반환 값을 find 메서드는 요소의 값을 반환 했다면 findIndex 는 요소의 인덱스를 반환한다. 기본적으로 callback 함수에서 조건에 만족하는 값이 있으면 그 요소의 인덱스를 반환하고 그렇지 않으면 -1을 반환한다. ECMAScript6 사용

문법

1
array.findIndex(function(currentValue, index, arr), thisValue);

매개변수 값

Paramter 설명
callback function(currentValue, index, arr); 필수. 배열의 각 요소에 대해서 실행할 함수
currentValue = 필수 .배열에서 현재 처리 중인 요소
index = 선택. 배열에서 현재 처리 중인 요소의 인덱스
arr = 선택. 현재 forEach()를 실행하고 있는 배열 객체 (자기 자신이라고 생각하면 됨)
thisValue 선택. 함수에 전달되어서 “this”값으로 사용될 값이다.
이 매개변수가 비어 있으면 값 undefined가 this 값으로 전달됨

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
#배열에서 소수 index 찾기
function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

forEach() 메서드

forEach () 메서드는 배열의 각 요소에 대해 한 번 제공된 함수를 차례로 호출합니다.

Note : forEach () 메서드는 값이없는 배열 요소에 대해 함수를 실행하지 않습니다.

문법

1
array.forEach(function(currentValue, index, arr), thisValue);

매개변수 값

Parameter 설명
callback function(currentValue, index, arr); 필수. 배열의 각 요소에 대해서 실행할 함수
currentValue = 필수 .배열에서 현재 처리 중인 요소
index = 선택. 배열에서 현재 처리 중인 요소의 인덱스
arr = 선택. 현재 forEach()를 실행하고 있는 배열 객체 (자기 자신이라고 생각하면 됨)
thisValue 선택. 함수에 전달되어서 “this”값으로 사용될 값이다.
이 매개변수가 비어 있으면 값 undefined가 this 값으로 전달됨

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var sum = 0;
var numbers = [65, 44, 12, 4];

function myFunction(item) {
    sum += item;
}

numbers.forEach(myFunction);
console.log(sum); // 125

######

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 인덱스 2는 배열의 그 위치에 항목이 없기에
// 건너뜀을 주의하세요.
[2, 5, , 9].forEach(logArrayElements);
// 기록:
// a[0] = 2
// a[1] = 5
// a[3] = 9

from() 메서드

includes() 메서드

includes() 메서드는 배열에 지정된 요소가 포함되어 있는지 여부를 검색한다. 이 메서드는 배열에 요소가 포함되어 있으면 true를 반환하고 그렇지 않으면 false 를 반환한다.

참고 - includes() 메서드는 대/소문자를 구분한다.

문법

1
array.inludes(element, start);

매개변수 값

Parameter 설명
element 필수. 검색할 요소
start 선택. 기본값은 0, 배열의 시작할 위치를 지정해줄 수 있다.

예제

1
2
3
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.includes("Banana", 1)); // false
console.log(fruits.includes("Banana", 0)); // true

indexOf() 메서드

indexOf() 메서드는 배열에 있는 특정한 아이템을 찾아서 그 아이템의 index 위치를 반환한다. 사용자가 지정한 위치에서부터 검색을 시작할 수 있으며 시작 위치가 지정되지 않으면 배열의 처음부터 시작해서 끝에서 검색을 종료한다. 만약 만족하는 아이템을 찾지 못했을 경우 -1을 리턴한다. 만약 찾으려는 아이템이 1개 이상이 나오면 indexOf 메서드는 첫 번째 아이템의 위치만 반환한다.

Note - 첫번째 아이템의 위치는 0부터 시작한다.. 0,1,2,….

리턴 값은 Number 타입

문법

1
array.indexOf(item, start);

매개변수 값

Parameter 설명
item 필수요소. 검색할 아이템 값
start 선택. 시작위치를 어디서 부터 할지 지정하는 숫자. 음수 값은 끝에서 부터 검색한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.indexOf("Apple", 4);

console.log(a); // 6

// Create an array. (The elements start at index 0.)
var ar = ["ab", "cd", "ef", "ab", "cd"];

console.log(ar.indexOf("cd")) 	// 1
console.log(ar.indexOf("cd",2)) // 4
console.log(ar.indexOf("gh")) 	// -1
// Find "ab" with a fromIndex argument of -2.
// The search starts at index 3, which is the array length plus -2.
console.log(ar.indexOf("ab",-2)) // 3

isArray() 메서드

isArray() 메서드는 객체가 배열인지 여부를 확인한다. 이 메서드는 객체가 배열이면 true를 반환하고 배열이 아니면 false를 반환한다. 리턴되는 타입은 Boolean 값이고 ECMAScript5 부터 사용가능하다.

문법

1
Array.isArray(obj);

매개변수 값

Parameter 설명
obj 필수. 테스트할 객체

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits)); // true

// 아래와 같이 호출하면 true 가 리턴됩니다.
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 잘 알려지지 않은 사실 : Array.prototype 자체도 array 입니다.
Array.isArray(Array.prototype);

// 아래와 같이 호출하면 false 가 리턴됩니다.
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

var ar = [];
var result = Array.isArray(ar);
// Output: true

var ar = new Array();
var result = Array.isArray(ar);
// Output: true

var ar = [1, 2, 3];
var result = Array.isArray(ar);
// Output: true

var result = Array.isArray("an array");
document.write(result);
// Output: false

join() 메서드

join() 메서드는 배열안의 요소를 지정한 문자열로 조인하고 문자열을 반환한다. 지정한 string 값이 없으면 배열의 값은 콤마로 구분된다. seperate 값은 기본 값은 콤마(,) 이다. 배열의 요소가 undefined 또는 null이면 공백 문자열로 처리된다.

문법

1
array.join(seperator);

매개변수 값

Parameter 설명
seperator 선택적. String에서 한 배열 요소와 다음 요소를 구분하는 데 사용되는 문자열입니다. 생략하면 배열 요소들은 쉼표로 구분됩니다.

예제

1
2
3
4
5
6
7
8
9
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");
console.log(energy); //Banana and Orange and Apple and Mango

var a = ['바람', '비', '불'];
var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입

keys() 메서드

lastIndexOf() 메서드

lastIndexOf() 메서드는 indexOf() 메서드와 마찬가지로 배열에서 지정된 항목을 검색해서 그 인덱스를 반환한다. 그러나 차이점은 검색할 항목이 2개 이상 존재할 때 indexOf()은 첫번째 항목의 인덱스를 반환하지만 lastIndexOf() 메서드는 마지막으로 검색된 항목의 인덱스를 반환한다는 차이점이 있다. 검색된 값이 없을 경우 -1을 반환한다.

문법

1
array.lastIndexOf(item, start);

매개변수 값

Parameter 설명
item 필수. 검색할 요소
start 선택.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
fruits.lastIndexOf("Apple");  // 6

var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
fruits.lastIndexOf("Apple", 4);	// 2

var a = [2, 5, 9, 2];
a.lastIndexOf(2); // 3
a.lastIndexOf(7); // -1

var array = [2, 5, 9, 2];
array.lastIndexOf(2);     // 3
array.lastIndexOf(7);     // -1
array.lastIndexOf(2, 3);  // 3
array.lastIndexOf(2, 2);  // 0
array.lastIndexOf(2, -2); // 0
array.lastIndexOf(2, -1); // 3


#lastIndexOf()를 사용하여 지정된 배열의 요소 인덱스를 찾아서 새로운 배열에 push
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.lastIndexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
}

console.log(indices);
// [4, 2, 0]

map() 메서드

map() 메서드는 각 배열을 순회하면서 모든 요소에 대해서 콜백 함수를 실행해서 그 결과로 새 배열을 만든다.

map() 메서드는 배열의 각 요소에 대해 함수를 한번씩 차례대로 호출한다.

문법

1
array.amp(function(currentValue, index, arr), thisValue);

매개변수 값

Parameter 설명
callback function(currentValue, index, arr); 필수. 배열의 각 요소에 대해서 실행할 함수
currentValue = 필수 .배열에서 현재 처리 중인 요소
index = 선택. 배열에서 현재 처리 중인 요소의 인덱스
arr = 선택. 현재 map()를 실행하고 있는 배열 객체 (자기 자신이라고 생각하면 됨)
thisValue 선택. 함수에 전달되어서 “this”값으로 사용될 값이다.
이 매개변수가 비어 있으면 값 undefined가 this 값으로 전달됨

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots의 값은 [1, 2, 3]이 되지만, numbers는 그대로 [1, 4, 9]입니다.

#map을 활용해 오브젝트를 다시 재구성하기
var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]가 되지만,
// kvArray는 여전히 [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]입니다.

#숫자가 들어있는 배열을 인자가 있는 함수를 사용하여 재구성하기
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles is now [2, 8, 18]. numbers is still [1, 4, 9]

pop() 메서드

pop() 메서드는 배열의 마지막 요소를 제거하고 그 요소를 반환한다.

참고 : 이 메서드는 배열의 length를 변경시킨다.

배열의 요소를 첫번째부터 제거하려면 shift() 메서드를 사용하면 된다.

문법

1
array.pop()

매개변수 값 - None

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
//"Mango"
fruits.pop();
//"Apple"
fruits.pop();
//"Orange"


var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon']

var popped = myFish.pop();

console.log(myFish); // ['angel', 'clown', 'mandarin' ]

console.log(popped); // 'sturgeon'

push() 메서드

push() 메서드는 배열의 끝에 하나 또는 그 이상의 요소를 추가하고 배열의 변경된 길이를 반환한다.

  • 새로운 아이템은 배열의 끝에 추가 된다.
  • 이 메서드는 배열의 길이를 변경시킨다.
  • 새로 추가되는 아이템을 첫 번째 요소부터 추가시키려면 unshift() 메서드를 사용하면 된다.

문법

1
array.push(item1, item2, ..., itemX);

매개변수 값

Parameter 설명
item1, item2, …, itemX 필수. 배열의 끝에 추가될 아이템 값

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon", "Pineapple");

//(7) ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"]

#배열에 엘리먼트를 추가
var sports = ['축구', '야구'];
var total = sports.push('미식축구', '수영');

console.log(sports); // ['축구', '야구', '미식축구', '수영']
console.log(total);  // 4

#두 개의 배열을 합치기
var vegetables = ['설탕당근', '감자'];
var moreVegs = ['셀러리', '홍당무'];

// 첫번째 배열에 두번째 배열을 합친다.
// vegetables.push('셀러리', '홍당무'); 하는 것과 동일하다.
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); // ['설탕당근', '감자', '셀러리', '홍당무']

reduce() 메서드

reduece() 메서드는 왼쪽에서 오른쪽으로 이동하며 배열의 각 요소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 만들어서 반환한다.

  • reduce() 메서드는 배열을 단일 값으로 만든다.
  • reduce() 메서드는 각 요소에 대해 제공된 함수를 실행한다. (왼쪽에서 오른쪽으로)

문법

1
array.reduce(functional(initialValue, currentValue, currentIndex, arr), initialValue);

매개변수 값

Parameter 설명
callback function( initialValue, currentValue, index, arr) 필수. 배열의 각 요소 값에 실행할 함수
initialValue - 누적 계산 값은 콜백의 반환 값을 누적한다.
currentValue - 배열 내 현재 처리되고 있는 요소
currentIndex - 배열 내 현재 처리되고 있는 요소의 인덱스. initialValue가 주어진 경우 0부터, 그렇지 않으면 1부터 시작
array - reduce가 호출된 배열
initialValue 선택. callback의 첫 호출에 첫 번째 인수로 사용하는 값

예제

reduce 동작 설명 initialValue 인수 없을 때

1
2
3
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

콜백은 4번 호출됩니다. 각 호출의 인수와 반환값은 다음과 같습니다.

accumulator currentValue currentIndex array 반환값
1번째 호출 0 1 1 [0, 1, 2, 3, 4] 1
2번째 호출 1 2 2 [0, 1, 2, 3, 4] 3
3번째 호출 3 3 3 [0, 1, 2, 3, 4] 6
4번째 호출 6 4 4 [0, 1, 2, 3, 4] 10

reduce에 의해 반환되는 값은 마지막 콜백 호출의 반환값 (10)이 됩니다.

예제

reduce의 두 번째 인수로 초기값을 제공하는 경우, 결과는 다음과 같습니다:

1
2
3
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);
accumulator currentValue currentIndex array 반환값
1번째 호출 10 0 0 [0, 1, 2, 3, 4] 10
2번째 호출 10 1 1 [0, 1, 2, 3, 4] 11
3번째 호출 11 2 2 [0, 1, 2, 3, 4] 13
4번째 호출 13 3 3 [0, 1, 2, 3, 4] 16
5번째 호출 16 4 4 [0, 1, 2, 3, 4] 20

reduce가 결과로 반환된 값은 이 경우 20이 됩니다.

reduceRight() 메서드

reverse() 메서드

reverse() 메서드는 배열안의 요소 순서를 바꾼다. 역정렬 한다고 생각하면 된다.

문법

1
array.reverse()

매개변수 값 - None

예제

1
2
3
4
5
6
7
8
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
(4) ["Mango", "Apple", "Orange", "Banana"]

var myArray = ['one', 'two', 'three'];
myArray.reverse();

console.log(myArray) // ['three', 'two', 'one']

shift() 메서드

shift() 메서드는 배열의 첫 번째 요소를 제거한다.

  • 이 메서드는 배열의 길이를 변경시킨다.
  • shift() 메서드로 삭제된 요소 값이 반환된다.
  • 배열의 마지막 요소를 삭제하려면 pop() 메서드를 사용하면 된다.

문법

1
array.shift()

매개변수 값 - None

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); //"Banana"
fruits.shift(); //"Orange"

var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('myFish before: ' + myFish);
// "제거전 myFish 배열: angel,clown,mandarin,surgeon"

var shifted = myFish.shift();

console.log('myFish after: ' + myFish);
// "제거후 myFish 배열: clown,mandarin,surgeon"

console.log('Removed this element: ' + shifted);
// "제거된 배열 요소: angel"

slice() 메서드

slice() 메서드는 어떤 배열의 begin 부터 end까지 (end는 불포함)에 대한 선택된 요소를 새 배열 객체로 변환한다.

  • 원래 배열 요소는 변경되지 않는다.

문법

1
array.slice(start, end);

매개변수 값

Parameter 설명
begin 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다.
음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.
end end가 생략되면 slice는 배열의 끝까지(arr.length) 추출합니다.추출을 종료 할 0 기준 인덱스입니다. slice 는 end 인덱스를 제외하고 추출합니다.
예를들어, slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출합니다.
음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 예를들어 slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출합니다.
end가 생략되면 slice는 배열의 끝까지(arr.length) 추출합니다.
만약 end값이 배열의 길이보다 크다면, silce는 배열의 끝까지(arr.length) 추출합니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(0, 2);

console.log(mybest); //(2) ["Banana", "Orange"]

#MSDN 예제
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

some() 메서드

some() 메서드는 배열 내 일부 요소가 제공된 함수에 의해 구현된 테스트를 통과하는지를 검사합니다. some()은 callback이 true 값을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 한 번 callback 함수를 실행합니다. 그런 요소가 발견된 경우, some() 은 그 즉시 true를 반환합니다. 그렇지 않으면 some()은 false를 반환합니다.

  • 함수가 true 값을 반환하는 배열 요소를 찾으면 some()은 true를 반환하고 나머지 값은 확인하지 않는다.
  • 그렇지 않은 경우는 false를 리턴
  • some()은 값 없이 배열 요소에 대해 함수를 실행하지 않는다.
  • some()은 원래 배열을 변경하지 않는다.

문법

1
array.some(function(currentValue, index, arr), thisValue)

매개변수 값

Parameter 설명
callback function(currentValue, index, arr); 필수. 배열의 각 요소에 대해서 실행할 함수
currentValue = 필수 .배열에서 현재 처리 중인 요소
index = 선택. 배열에서 현재 처리 중인 요소의 인덱스
arr = 선택. 현재 some()을 실행하고 있는 배열 객체 (자기 자신이라고 생각하면 됨)
thisValue 선택. 함수에 전달되어서 “this”값으로 사용될 값이다.
이 매개변수가 비어 있으면 값 undefined가 this 값으로 전달됨

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#배열 요소값 테스트
function isBiggerThan10(element, index, array) {
  return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

#값이 배열 내 존재하는지 확인
var fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {
    return arr.some(function(arrVal) {
        return val === arrVal;
    });
}

checkAvailability(fruits, 'kela'); //false
checkAvailability(fruits, 'banana'); //true

sort() 메서드

splice() 메서드

splice() 메서드는 배열에 항목을 추가/ 제거하고 제거 된 항목을 반환합니다.

  • 이 메서드는 기존 배열을 변경합니다.

문법

1
array.splice(start, deleteCount, item1, ....., itemN)

매개변수 값

Parameter 설명
start 배열의 변경을 시작하는 인덱스입니다(초기 index : 0). 만약 배열 길이보다 길면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수의 경우, 배열의 끝에서 부터 요소를 세어나가며 (초기 index : 1), 그 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.
deleteCount 배열에서 제거를 할 요소의 수 입니다. 만약 deleteCount가 0의 경우, 아무런 요소도 제거되지 않습니다. 이경우, 최소한 하나의 새 요소를 특정해 주어야 합니다. 만약, deleteCount가 start에서 부터의 남은 요소 수 보다 많을 경우, 남은 요소를 모두 제거합니다.
itemN 배열에 추가될 요소입니다. 만약 아무런 요소도 특정되지 않을 경우, splice()는 요소를 오직 삭제만 한다.

예제

1
2
3
4
5
6
7
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); // 'drum'을 두번째 인덱스에 삽입
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); // 두번째 인덱스에서 하나의 항목('drum')을 삭제
// myFish is ["angel", "clown", "mandarin", "sturgeon"]

toString() 메서드

unshift() 메서드

unshift() 메서드는 push() 메서드와 반대로 배열에 새로운 아이템을 첫 번째 요소부터 추가하는 메서드이다. 그리고 새로운 길이를 반환한다.

  • 이 메서드는 기존 배열의 길이를 변경한다.
  • 새로운 요소를 뒤에서부터 삽입하려면 push() 메서드를 사용하면 된다.

문법

1
array.unshift(item1, item2, ..., itemN);

매개변수 값

Parameter 설명
item1, item2, … itemN 필수. 배열에 추가할 요소 값

예제

1
2
3
4
5
6
7
8
9
10
var arr = [1, 2];

arr.unshift(0); // result of call is 3, the new array length
// arr is [0, 1, 2]

arr.unshift(-2, -1); // = 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-3]);
// arr is [[-3], -2, -1, 0, 1, 2]

valueOf() 메서드

Share