JS Array.Method

Array.Method

실행

Array.prototype.forEach()

• 주어진 함수를 배열 요소 각각에 대해 실행합니다.
• forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (예: 희소 배열)
• callback은 다음 세 인수와 함께 호출됩니다.
  • 요소 값
  • 요소 인덱스
  • 순회 중인 배열

// arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]);

['a', 'b', 'c'].forEach(x=>console.log(x))
// "a"
// "b"
// "c"

채우기

Array.prototype.fill()

• 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채웁니다.
• 매개변수
  • value
    • 배열을 채울 값.
  • start Optional
    • 시작 인덱스, 기본 값은 0.
  • end Optional
    • 끝 인덱스, 기본 값은 this.length.
• 반환 값
  • 변형한 배열.
• fill 메서드는 value, start, end의 3개 인자를 가집니다. start와 end 인자는 선택 사항으로써 기본값으로 각각 0과, this 객체의 length를 가집니다.
• length가 배열의 길이일 때, start가 음수이면 시작 인덱스는 length+start입니다. end가 음수이면 끝 인덱스는 length+end입니다.
• fill 메서드는 변경자 메서드로, 복사본이 아니라 this 객체를 변형해 반환합니다.
• value에 객체를 받을 경우 그 참조만 복사해서 배열을 채웁니다.

// arr.fill(value[, start[, end]])

[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, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

생성

Array.from()

• 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해새로운Array 객체를 만듭니다.
• 매개변수
  • arrayLike
    • 배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체.
  • mapFnOptional
    • 배열의 모든 요소에 대해 호출할 맵핑 함수.
  • thisArgOptional
    • mapFn 실행 시에 this로 사용할 값.
• 반환 값
  • 새로운 Array 인스턴스.
• 다음과 같은 경우에 Array.from()으로새Array를 만들 수 있습니다.
  • 유사 배열 객체 (length 속성과 인덱싱된 요소를 가진 객체)
  • 순회 가능한 객체 (Map, Set 등객체의 요소를 얻을 수 있는 객체)
• Array.from()은 선택 매개변수인 mapFn를 가지는데,배열(혹은 배열 서브클래스)의 각 요소를맵핑할 때 사용할 수 있습니다.
• 즉,Array.from(obj, mapFn, thisArg)는 중간에 다른 배열을 생성하지 않는다는 점을 제외하면Array.from(obj).map(mapFn, thisArg)와 같습니다.
• 이 특징은 typed arrays와 같은 특정 배열 서브클래스에서 중간 배열 값이 적절한 유형에 맞게 생략되기 때문에 특히 중요합니다.
• from() 메서드의 length 속성은 1입니다.
• ES2015 이후, 클래스 구문은 내장 및 새 클래스의 상속을 가능케 했습니다.
  • 그 결과로 Array.from과 같은 정적 메서드는 Array의 서브클래스에 의해 상속되며, Array 대신 자신의 인스턴스를 만듭니다.

// Array.from(arrayLike[, mapFn[, thisArg]])


// String에서 배열 만들기
Array.from('foo'); // ["f", "o", "o"]

// set에서 배열 만들기
const s = new Set(['foo', window]); 
Array.from(s); // ["foo", window]

// Map에서 배열 만들기
const m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

// 배열 형태를 가진 객체(arguments)에서 배열 만들기
function f() {
  return Array.from(arguments);
}

f(1, 2, 3); // [1, 2, 3]

// Array.from과 화살표 함수 사용하기
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]

// 시퀀스 생성기(range)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

range(0, 4, 1); // [0, 1, 2, 3, 4] 
range(1, 10, 2); // [1, 3, 5, 7, 9]
range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

Array.of()

• 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다.
• Array.of()와 Array 생성자의 차이는 정수형 인자의 처리 방법에 있습니다.
• Array.of(7)은 하나의 요소 7을 가진 배열을 생성하지만 Array(7)은 length 속성이 7인 빈 배열을 생성합니다.
• 매개변수
  • elementN
    • 배열을 생성할 때 사용할 요소.
• 반환 값
  • 새로운 Array 객체.
• 이 함수는 ECMAScript 2015 표준 일부입니다. 자세한 정보는 Array.of, Array.from 제안 사항과 Array.of 폴리필에서 확인하실 수 있습니다.

// Array.of(element0[, element1[, ...[, elementN]]])

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]

판별

Array.isArray()

• 인자가 Array인지 판별합니다.
• 매개변수
  • obj
    • 검사할 객체.
• 반환 값
  • 객체가 Array라면 true, 아니라면 false.
• 객체가 Array라면 true를 반환하고, 아니라면 false를 반환합니다.
• instanceof vs isArray
  • Array 객체를 판별할 때, Array.isArray는 iframe을 통해서도 작동하기 때문에 instanceof 보다 적합합니다.

// Array.isArray(obj)

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

// 모두 true 반환
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'));
Array.isArray(new Array(3));
// Array.prototype은 스스로도 배열입니다
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 });

// instanceof vs isArray
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// 올바른 Array 판별
Array.isArray(arr);  // true
// iframe을 통해서 작동하지 않기 때문에 올바르지 않은 방법
arr instanceof Array; // false

Array.prototype.some()

• 1개이상 참이면 결과도 참으로 판단
• 매개변수
  • callback
    • 각 요소를 시험할 함수. 다음 세 가지 인수를 받습니다.
    • currentValue
      • 처리할 현재 요소.
    • index Optional
      • 처리할 현재 요소의 인덱스.
    • array Optional
      • some을 호출한 배열.
    • thisArg Optional
      • callback을 실행할 때 this로 사용하는 값.
• 반환 값
  • callback이 어떤 배열 요소라도 대해 참인(truthy) 값을 반환하는 경우 true, 그 외엔 false.
• some은 callback이 참(불린으로 변환했을 때 true가 되는 값)을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 callback 함수를 실행합니다.
• 해당하는 요소를 발견한 경우 some은 즉시 true를 반환합니다.
• 그렇지 않으면, 즉 모든 값에서 거짓을 반환하면 false를 반환합니다.
• 할당한 값이 있는 배열의 인덱스에서만 callback을 호출합니다.
• 삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않습니다.
• some은 호출한 배열을 변형하지 않습니다.
• some이 처리하는 요소의 범위는 callback의 첫 호출 전에 설정됩니다. some 호출 이후로 배열에 추가하는 요소는 callback이 방문하지 않습니다. 배열에 원래 있었지만 아직 방문하지 않은 요소가 callback에 의해 변경된 경우, 그 인덱스를 방문하는 시점의 값을 사용합니다. 삭제한 요소는 방문하지 않습니다.

// arr.some(callback[, thisArg])

[1, 2, 3, 4, 5].some(el=>el%2===0) // true
[2, 5, 8, 1, 4].some(elem => elem > 10);  // false
[12, 5, 8, 1, 4].some(elem => elem > 10); // true
['apple', 'banana', 'mango', 'guava'].some(el=>el==='kela') // false
['apple', 'banana', 'mango', 'guava'].some(el=>el==='banana') // true

Array.prototype.every()

• 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.
• 매개변수
  • callback
    • 각 요소를 시험할 함수. 다음 세 가지 인수를 받습니다.
    • currentValue
      • 처리할 현재 요소.
    • index Optional
      • 처리할 현재 요소의 인덱스.
    • array Optional
      • every를 호출한 배열.
    • thisArg Optional
      • callback을 실행할 때 this로 사용하는 값.
  • 반환 값
    • callback이 모든 배열 요소에 대해 참(truthy)인 값을 반환하는 경우 true, 그 외엔 false.
• every는 callback이 거짓을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 callback 함수를 실행합니다.
• 해당하는 요소를 발견한 경우 every는 즉시 false를 반환합니다.
• 그렇지 않으면, 즉 모든 값에서 참을 반환하면 true를 반환합니다.
• 할당한 값이 있는 배열의 인덱스에서만 callback을 호출합니다.
• 삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않습니다.
• every는 호출한 배열을 변형하지 않습니다.
• every가 처리하는 요소의 범위는 callback의 첫 호출 전에 설정됩니다. every 호출 이후로 배열에 추가하는 요소는 callback이 방문하지 않습니다. 배열에 원래 있었지만 아직 방문하지 않은 요소가 callback에 의해 변경된 경우, 그 인덱스를 방문하는 시점의 값을 사용합니다. 삭제한 요소는 방문하지 않습니다.
• every는 (이산)수학에서 전칭(∀) 정량자quantifier(한정자)처럼 행동합니다. 특히, 빈 배열에 대해서는 true를 반환합니다. (이는 공집합의 모든 요소가 어떠한 주어진 조건도 만족하는 공허한 참입니다.)

// arr.every(callback[, thisArg])

// 모든 배열 요소의 크기 테스트
[12, 5, 8, 130, 44].every((el,idx,arr)=>el>=10)   // false
[12, 54, 18, 130, 44].every((el,idx,arr)=>el>=10) // true

Array.prototype.includes()

• 배열이 특정 요소를 포함하고 있는지 판별합니다.
• 매개변수
  • valueToFind
    • 탐색할 요소.
    • 참고: 문자나 문자열을 비교할 때, includes()는 대소문자를 구분합니다.
    • fromIndex Optional
      • 이 배열에서 searchElement 검색을 시작할 위치입니다.
      • 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색합니다. 기본값은 0입니다.
• 반환 값
  • Boolean.
• fromIndex 가 배열의 길이보다 같거나 크다면, false 를 반환합니다. 배열은 검색되지 않을 것입니다.
• fromIndex 가 음수라면, 이 계산된 인덱스는 valueToFind 를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 -1 * array.length 보다 작거나 같다면, 전체 배열이 검색될 것입니다.

// arr.includes(valueToFind[, fromIndex])

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

// fromIndex 가 배열의 길이보다 같거나 큰 경우
['a', 'b', 'c'].includes('c', 3);   // false
['a', 'b', 'c'].includes('c', 100); // false

// 0보다 작은 인덱스의 계산
['a', 'b', 'c'].includes('a', -100); // true
['a', 'b', 'c'].includes('b', -100); // true
['a', 'b', 'c'].includes('c', -100); // true
['a', 'b', 'c'].includes('a', -2); // false

// 제네릭 메소드로 사용되는 includes()
(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');
(function(){ 
    console.log(Array.from(arguments).includes('a')) // true
    console.log([].includes.call(Array.from(arguments), 'a')) // true
    console.log(Array.from(arguments).includes('a')) // true
    console.log([].includes.apply('a', Array.from(arguments))) // true
})('a', 'b', 'c');

반환

Array.prototype.concat()

• 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
• 기존배열을 변경하지 않습니다.
• 추가된 새로운 배열을 반환합니다.
• 매개변수
  • 배열 또는 값
  • 만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사본을 반환.
  • valueN Optional
    • 자세한 내용은 아래 설명을 참고하세요.
• 반환값
  • 새로운 Array 객체.
• concat은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다.
• 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다.
• 중첩 배열 내부로 재귀하지 않습니다.
• concat은 this나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열을 합친 뒤 그 얕은 사본을 반환합니다. 새 배열에는 원본 배열의 요소를 다음과 같은 방법으로 복사합니다.
  • 실제 객체가 아닌 객체 참조: concat은 새 배열에 참조를 복사합니다. 원본 배열과 새 배열에서 같은 객체를 가리키게 됩니다. 즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타납니다.
  • 문자열, 숫자, 불리언 등 자료형(String, Number, Boolean 객체 아님): concat은 새 배열에 문자열과 수의 값을 복사합니다.
• 배열이나 값을 이어붙여도 원본은 변하지 않으며, 새로운 배열이나 원본 배열을 조작해도 서로 영향을 받지 않습니

// array.concat([value1[, value2[, ...[, valueN]]]])

['a', 'b', 'c'].concat(num[1, 2, 3]eric); // ['a', 'b', 'c', 1, 2, 3]
[1, 2, 3].concat([4, 5, 6], [4, 5, 6]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
['a', 'b', 'c'].concat(1, [2, 3]); // ['a', 'b', 'c', 1, 2, 3]

Array.prototype.copyWithin()

• 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환합니다. 이 때, 크기(배열의 길이)를 수정하지 않고 반환합니다.
• 매개변수
  • target
    • 복사한 시퀀스(값)를 넣을 위치를 가리키는 0 기반 인덱스. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.
    • target이 arr.length보다 크거나 같으면 아무것도 복사하지 않습니다. target이 start 이후라면 복사한 시퀀스를 arr.length에 맞춰 자릅니다.
  • start Optional
    • 복사를 시작할 위치를 가리키는 0 기반 인덱스. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.
    • 기본값은 0으로, start를 지정하지 않으면 배열의 처음부터 복사합니다.
  • end Optional
    • 복사를 끝낼 위치를 가리키는 0 기반 인덱스. copyWithin은 end 인덱스 이전까지 복사하므로 end 인덱스가 가리키는 요소는 제외합니다. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.
    • 기본값은 arr.length로, end를 지정하지 않으면 배열의 끝까지 복사합니다.
• 반환 값
  • 수정한 배열.
• copyWithin은 C와 C++의 memmove처럼 작동하고, 복사와 대입이 하나의 연산에서 이루어지므로 Array의 데이터를 이동할 때 사용할 수 있는 고성능 메서드입니다. TypedArray의 동명 메서드에서 이 특징이 두드러집니다. 붙여넣은 시퀀스의 위치가 복사한 범위와 겹치더라도 최종 결과는 원본 배열에서 복사한 것과 같습니다.
• copyWithin 함수는 제네릭 함수로, this 값이 Array 객체일 필요는 없습니다.
• copyWithin 메서드는 변경자 메서드로, this의 길이는 바꾸지 않지만 내용을 바꾸며 필요하다면 새로운 속성을 생성합니다.

// arr.copyWithin(target[, start[, end]])

[1, 2, 3, 4, 5].copyWithin(-2); // [1, 2, 3, 1, 2]
[1, 2, 3, 4, 5].copyWithin(0, 3); // [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); // [1, 2, 3, 3, 4]
[].copyWithin.call({length: 5, 3: 1}, 0, 3); // {0: 1, 3: 1, length: 5}

var i32a = new Int32Array([1, 2, 3, 4, 5]); // ES2015 TypedArray는 Array의 하위 클래스
i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5]
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // 아직 ES2015를 사용할 수 없는 환경에서
// Int32Array [4, 2, 3, 4, 5]

Array.prototype.entries()

• 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다.
• 반환 값
  • Array 반복자 인스턴스 객체.

// arr.entries()

for(let item of ['a', 'b', 'c'].entries()) console.log( item )
// [0, "a"]
// [1, "b"]
// [2, "c"]

Array.prototype.filter()

• 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
• 매개변수
• callback
  • 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.
  • element
    • 처리할 현재 요소.
  • index Optional
    • 처리할 현재 요소의 인덱스.
  • array Optional
    • filter를 호출한 배열.
  • thisArg Optional
    • callback을 실행할 때 this로 사용하는 값.
• 반환 값
  • 테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.
• filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다.
• callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다.
• 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다.
• callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다.
• filter()는 호출되는 배열을 변화시키지(mutate) 않습니다.
• filter()에 의해 처리되는 요소의 범위는 callback의 첫 호출 전에 설정됩니다. filter() 호출 시작 이후로 배열에 추가된 요소는 callback에 의해 방문되지 않습니다. 배열의 기존 요소가 변경 또는 삭제된 경우, callback에 전달된 그 값은 filter()가 그 요소를 방문한 시점에 값이 됩니다; 삭제된 요소는 반영되지 않습니다.

// arr.filter(callback(element[, index[, array]])[, thisArg])

[12, 5, 8, 130, 44].filter(x=>x>=10);
// filtered 는 [12, 130, 44]

// JSON에서 무효한 항목 거르기
[ { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
].filter(item=>typeof(item.id)==='number'&&!!item.id)
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

// 배열 내용 검색
['apple', 'banana', 'grapes', 'mango', 'orange'].filter(fruit=>fruit.toLowerCase().indexOf('ap)) // ['apple', 'grapes']
['apple', 'banana', 'grapes', 'mango', 'orange'].filter(fruit=>fruit.toLowerCase().indexOf('an)) // ['banana', 'mango', 'orange']

Array.prototype.find()

• 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
• 찾은 요소의 값 대신 인덱스를 반환하는 findIndex() 메서드도 살펴보세요.
• 매개변수
  • callback
    • 배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받습니다.
    • element
      • 콜백함수에서 처리할 현재 요소.
    • indexOptional
      • 콜백함수에서 처리할 현재 요소의 인덱스.
    • arrayOptional
      • find 함수를 호출한 배열.
  • thisArg
    • 선택 항목. 콜백이 호출될 때 this로 사용할 객체.
• find 메서드는 callback 함수가 참을 반환 할 때까지 해당 배열의 각 요소에 대해서 callback 함수를 실행합니다. 만약 어느 요소를 찾았다면 find 메서드는 해당 요소의 값을 즉시 반환하고, 그렇지 않았다면 undefined를 반환합니다. callback은 0 부터 length - 1 까지 배열의 모든 인덱스에 대해 호출되며, 값이 지정되지 않은 요소도 포함하여 모든 인덱스에 대해 호출됩니다. 따라서, 희소 배열 (sparse arrays)의 경우에는 값이 지정된 요소만 탐색하는 다른 메소드에 비해 더 비효율적입니다.
• thisArg 파라미터가 주어진 경우에는 제공되었다면 thisArg가 callback안에서 this로 사용되고, 그렇지 않은 경우 undefined 가 this로 사용됩니다.
• find는 호출의 대상이 된 배열을 변경(mutate)하지 않습니다.
• find가 처리할 배열 요소의 범위는 첫 callback이 호출되기 전에 먼저 결정됩니다. find메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 callback이 호출되지 않습니다. 아직 callback이 호출되지 않았던 배열 요소가 callback에 의해서 변경된 경우, find가 해당 요소의 인덱스를 방문할 때의 값으로 callback함수에 전달될 것입니다. 즉, 삭제된 요소에도 callback이 호출됩니다.
• 매개변수
  • callback
    • 3개의 인수를 취하여 배열의 각 값에 대해 실행할 함수입니다.
    • element
      • 배열에서 처리중인 현재 요소입니다.
    • index
      • 배열에서 처리중인 현재 요소의 인덱스입니다.
    • array
      • findIndex 함수가 호출된 배열입니다.
  • thisArg
    • 선택 사항. 콜백을 실행할 때 this로 사용할 객체입니다.
• 반환 값
  • 요소가 테스트를 통과하면 배열의 인덱스. 그렇지 않으면 -1입니다.

// arr.find(callback[, thisArg])

[ {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
].find(fruit=>fruit.name==='cherries')
// {name: "cherries", quantity: 5}

Array.prototype.findIndex()

• 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다.
• 매개변수
• callback
  • 3개의 인수를 취하여 배열의 각 값에 대해 실행할 함수입니다.
  • element
    • 배열에서 처리중인 현재 요소입니다.
  • index
    • 배열에서 처리중인 현재 요소의 인덱스입니다.
  • array
    • findIndex 함수가 호출된 배열입니다.
  • thisArg
    • 선택 사항. 콜백을 실행할 때 this로 사용할 객체입니다.
• 반환 값
  • 요소가 테스트를 통과하면 배열의 인덱스. 그렇지 않으면 -1입니다.
• 요소가 발견되면 findIndex는 해당 반복에 대한 색인을 즉시 반환합니다.
• 콜백이 진리 값을 반환하지 않거나 배열의 길이가 0 인 경우 findIndex는 -1을 반환합니다.
• Array # some과 같은 다른 배열 메소드와는 달리, 배열에 존재하지 않는 엔트리의 인덱스에 대해서조차 콜백이 호출됩니다.
• findIndex는 호출 된 배열을 변경하지 않습니다.
• findIndex에 의해 처리되는 요소의 범위는 콜백의 첫 번째 호출 전에 설정됩니다.
• findIndex 호출이 시작된 후 배열에 추가되는 요소는 콜백에 의해 방문되지 않습니다.
• 배열의 기존의 방문하지 않은 요소가 콜백에 의해 변경되면 방문 콜백에 전달 된 값은 findIndex가 해당 요소의 인덱스를 방문 할 때의 값이됩니다.
• 삭제된 요소도 방문합니다.

// arr.findIndex(callback(element[, index[, array]])[, thisArg])

[5, 12, 8, 130, 44].findIndex(el=>el>13) // 3

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

Array.prototype.flat()

• 이것은 실험 기술입니다 프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를주의 깊게 확인하십시오.
• 모든 하위 배열 엘리먼트를 지정된 깊이까지 재귀적으로 이어붙여 새로운 배열을 생성후 반환합니다.
• flat 메소드는 배열의 빈 슬롯을 제거합니다.

// arr.flat([depth]);

// 중첩된 배열 구조를 평평하게 만들기 위한 깊이 값. 기본값은 1.
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
[1, 2, [3, 4, [5, 6]]].flat() // [1, 2, 3, 4, [5, 6]]
[1, 2, [3, 4, [5, 6]]].flat(2) // [1, 2, 3, 4, 5, 6]
[1, 2, , 4, 5].flat() // [1, 2, 4, 5]

Array.prototype.flatMap()

• 이것은 실험 기술입니다 프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를주의 깊게 확인하십시오.
• 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평평화 하고 반환합니다.
• 이는 깊이 1의 flat 이 뒤따르는 map 과 동일하지만, flatMap 은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.
• 매개변수
  • callback
    • 새로운 배열의 엘리먼트를 생성하는 함수. 3개의 아규먼트를 갖습니다.
    • currentValue
      • 배열에서 처리되는 현재 엘리먼트.
    • indexOptional
      • 배열에서 처리되고 있는 현재 엘리먼트의 인덱스.
    • arrayOptional
      • map 이 호출된 배열.
  • thisArgOptional
    • callback 실행에서 this 로 사용할 값.

// arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

[1, 2, 3, 4].map(x => [x*2]) // [[2], [4], [6], [8]]
[1, 2, 3, 4].flatMap(x => [x * 2]) // [2, 4, 6, 8]
[1, 2, 3, 4].flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]
["it's Sunny in", "", "California"].map(x=>x.split(" ")); // [["it's","Sunny","in"],[""],["California"]]
["it's Sunny in", "", "California"].flatMap(x => x.split(" ")); // ["it's","Sunny","in","California"]

Array.prototype.keys()

• 배열의 각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체를 반환합니다.

for(let key of ['a', 'b', 'c'].keys()) console.log( key )
// 0
// 1
// 2

console.log( Object.keys(['a', , 'c'])) // ["0", "2"]
console.log( ...['a', , 'c'].keys() ) // [0, 1, 2]

Array.prototype.values()

• 배열의 각 인덱스에 대한 값을 가지는 새로운 Array Iterator 객체를 반환합니다.

var arr =  ['w', 'y', 'k', 'o', 'p'].values();
for(let letter of arr) {
  console.log(letter);
}
// "w"
// "y"
// "k"
// "o"
// "p"

Array.prototype.join()

• 배열의 모든 요소를 연결해 하나의 문자열로 만듭고 반환합니다..

['Fire', 'Air', 'Water'].join() // "Fire,Air,Water"
['Fire', 'Air', 'Water'].join('') // "FireAirWater"
['Fire', 'Air', 'Water'].join('-') // "Fire-Air-Water"

Array.prototype.indexOf()

• 배열에서 지정된 요소를 찾을 수있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

['ant', 'bison', 'camel', 'duck', 'bison'].indexOf('bison') // 1
['ant', 'bison', 'camel', 'duck', 'bison'].indexOf('bison', 2) // indexOf(searchElement, fromIndex) // 4
['ant', 'bison', 'camel', 'duck', 'bison'].indexOf('giraffe') // -1

Array.prototype.lastIndexOf()

• indexOf() 역순 검색 수량을 반환합니다.

['Dodo', 'Tiger', 'Penguin', 'Dodo'].lastIndexOf('Dodo') // 3
['Dodo', 'Tiger', 'Penguin', 'Dodo'].lastIndexOf('Tiger') // 1

Array.prototype.map()

• 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

[1, 4, 9, 16].map(x=>x*2) // [2, 8, 18, 32]

Array.prototype.pop()

• 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'].pop(); // ["broccoli", "cauliflower", "cabbage", "kale"] 

Array.prototype.push()

• 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

['pigs', 'goats', 'sheep'].push('cows', 'chickens'); // ["pigs", "goats", "sheep", "cows", "chickens"] 

Array.prototype.reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

매개변수

callback

배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

accumulator

누산기accmulator는 콜백의 반환값을 누적합니다.
콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

currentValue

처리할 현재 요소.

currentIndex Optional

처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.

array Optional

reduce()를 호출한 배열.

initialValue Optional

callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

반환 값

누적 계산의 결과 값.

구문

arr.reduce(callback[, initialValue])

[1, 2, 3, 4].reduce((acc, val)=>acc+val) // 10
[1, 2, 3, 4].reduce((acc, val)=>acc+val, 5) // 15 

reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해
callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다:

• accumulator
• currentValue
• currentIndex
• array

콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있습니다.
만약 reduce() 함수 호출에서 initialValue를 제공한 경우,
accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다.
initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.

참고:
initialValue를 제공하지 않으면,
reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뜁니다.
initialValue를 제공하면 인덱스 0에서 시작합니다.

배열이 비어있는데 initialValue도 제공하지 않으면 TypeError가 발생합니다.
배열의 요소가 (위치와 관계없이) 하나 뿐이면서 initialValue를 제공되지 않은 경우,
또는 initialValue는 주어졌으나 배열이 빈 경우엔 그 단독 값을 callback 호출 없이 반환합니다.

다음의 예제처럼 initialValue을 제공하지 않으면 출력 가능한 형식이 세 가지이므로,
보통 초기값을 주는 것이 더 안전합니다.

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// initialValue 없이 reduce()
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
[                      ].reduce( maxCallback ); // TypeError

// map/reduce로 개선 - 비었거나 더 큰 배열에서도 동작함
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2, -Infinity );

reduce() 작동 방식

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

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

callback	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)을 사용합니다.

완전한 함수 대신에 화살표 함수를 제공할 수도 있습니다. 아래 코드는 위의 코드와 같은 결과를 반환합니다.

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

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

[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]
2번째 호출	10	1	1	[0, 1, 2, 3, 4]
3번째 호출	11	2	2	[0, 1, 2, 3, 4]
4번째 호출	13	3	3	[0, 1, 2, 3, 4]
5번째 호출	16	4	4	[0, 1, 2, 3, 4]

이 때 reduce()가 결과로 반환하는 값은 20입니다.

배열의 모든 값 합산

var total = [ 0, 1, 2, 3 ].reduce(
  ( accumulator, currentValue ) => accumulator + currentValue,
  0
); // sum 6

객체 배열에서의 값 합산

객체로 이루어진 배열에 들어 있는 값을 합산하기 위해서는 반드시 초기값을 주어 각 항목이 여러분의 함수를 거치도록 해야 합니다.

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6

중첩 배열 펼치기flatten

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
); // 펼친 결과: [0, 1, 2, 3, 4, 5]

객체 내의 값 인스턴스 개수 세기

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

속성으로 객체 분류하기

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }

확장 연산자와 초기값을 이용하여 객체로 이루어진 배열에 담긴 배열 연결하기

// friends - an array of objects 
// where object field "books" - list of favorite books 
var friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

// allbooks - list which will contain all friends' books +  
// additional list contained in initialValue
var allbooks = friends.reduce(function(accumulator, currentValue) {
  return [...accumulator, ...currentValue.books];
}, ['Alphabet']);

// allbooks = [
//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]

배열의 중복 항목 제거

참고:
Set과 Array.from()을 사용할 수 있는 환경이라면,
let orderedArray = Array.from(new Set(myArray));를 사용해 중복 요소를 제거할 수도 있습니다.

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, current) => {
    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== current) {
        accumulator.push(current);
    }
    return accumulator;
}, []);
console.log(result); //[1,2,3,4,5]

프로미스를 순차적으로 실행하기

/**
 * Runs promises from array of functions that can return promises
 * in chained manner
 *
 * @param {array} arr - promise arr
 * @return {Object} promise object
 */
function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input)
  );
}

// promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5);
  });
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2);
  });
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
 return a * 3;
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4);
  });
}

const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10)
  .then(console.log);   // 1200

함수 구성을 위한 파이프 함수

// Building-blocks to use for composition
const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;

// Function composition enabling pipe functionality
const pipe = (...functions) => input => functions.reduce(
    (acc, fn) => fn(acc),
    input
);

// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// Usage
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240

reduce()로 map() 작성

if (!Array.prototype.mapUsingReduce) {
  Array.prototype.mapUsingReduce = function(callback, thisArg) {
    return this.reduce(function(mappedArray, currentValue, index, array) {
      mappedArray[index] = callback.call(thisArg, currentValue, index, array);
      return mappedArray;
    }, []);
  };
}

[1, 2, , 3].mapUsingReduce(
  (currentValue, index, array) => currentValue + index + array.length
); // [5, 7, , 10]

Array.prototype.reduceRight()

• reduce 역순(오른쪽에서 왼쪽으로)으로 하나의 결과값을 반환합니다.

[[0, 1], [2, 3], [4, 5]].reduceRight( (acc, val) => acc.concat(val) ) // [4, 5, 2, 3, 0, 1] 

Array.prototype.reverse()

• 배열의 순서를 반전합니다.

['one', 'two', 'three'].reverse() // ['three', 'two', 'one'] 

Array.prototype.slice()

• 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
• 원본 배열은 수정되지 않습니다.

 ['ant', 'bison', 'camel', 'duck', 'elephant'].slice(2) // expected output: Array ["camel", "duck", "elephant"]
['ant', 'bison', 'camel', 'duck', 'elephant'].slice(2, 4) // expected output: Array ["camel", "duck"]
['ant', 'bison', 'camel', 'duck', 'elephant'].slice(1, 5) // expected output: Array ["bison", "camel", "duck", "elephant"] 

Array.prototype.sort()

• 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

['March', 'Jan', 'Feb', 'Dec'].sort()

Array.prototype.splice()

• 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

// array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

['angel', 'clown', 'mandarin', 'sturgeon'].splice(2, 0, 'drum') // [], no elements removed
['angel', 'clown', 'drum', 'mandarin', 'sturgeon'].splice(3, 1) // removed is ["mandarin"]
['angel', 'clown', 'mandarin', 'sturgeon'].splice(2) // removed is ["mandarin", "sturgeon"] 

Array.prototype.toLocaleString()

• toLocaleString() 메서드는 배열의 요소를 나타내는 문자열을 반환합니다.
• 메서드를 사용하여 문자열로 변환되고 이 문자열은 locale 고유 문자열(가령 쉼표 ",")에 의해 분리됩니다.

[1, 'a', new Date('21 Dec 1997 14:12:00 UTC')].toLocaleString('en', {timeZone: "UTC"}) // expected output: "1,a,12/21/1997, 2:12:00 PM", 

Array.prototype.toString()

• 배열 및 그 요소를 나타내는 문자열을 반환합니다.

[1, 2, 'a', '1a'].toString() // expected output: "1,2,a,1a"

Array.prototype.shift()

• 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.
• 이 메서드는 배열의 길이를 변하게 합니다.

[1, 2, 3].shift() // [2, 3]

Array.prototype.unshift()

• 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

[1, 2, 3].unshift(4, 5); // expected output: Array [4, 5, 1, 2, 3]