자주 사용하는 연산

배열 만들기

let fruits = ['apple', 'banana'];

console.log(fruits.length);
> 2

인덱스로 배열 항목에 접근하기

let fruits = ['apple', 'banana'];

console.log(fruits[0]);
> "apple"

배열의 항목들을 순환하며 처리하기

let fruits = ['apple', 'banana'];

fruits.forEach(function (item, index, array) {
  console.log(item, index);
});
> apple 0
> banana 1

배열 끝에 항목 추가

let fruits = ['apple', 'banana'];
let newLength = fruits.push('orange');

console.log(fruits);
> ['apple', 'banana', 'orange']

배열 끝에서부터 항목 제거

let fruits = ['apple', 'banana', 'orange'];

fruits.pop();
console.log(fruits);
> ['apple', 'banana']

배열 앞에서부터 항목 제거

let fruits = ['apple', 'banana'];

fruits.shift();
console.log(fruits);
> ['banana']

배열 앞에 항목 추가

let fruits = ['banana'];

fruits.unshift('mellon');
console.log(fruits);
> ['mellon', 'banana']

배열 안 항목의 인덱스 찾기

let fruits = ['mellon', 'banana'];

fruits.push('mango');
let pos = fruits.indexOf('banana');
console.log(pos);
> 1

인덱스 위치에 있는 항목 제거

let fruits = ['mellon', 'banana', 'mango'];
let pos = fruits.indexOf('banana');

let removedItem = fruits.splice(pos, 1);

console.log(fruits);
> ['mellon', 'mango']

arr.splice()

: 배열에서 특정 위치의 원소를 삭제하거나 특정 위치에 원소를 추가를 경우 사용

arr.splice( index, deleteCount, item)

• index : 배열 변경을 시작할 인덱스
• deleteCount : 배열에서 제거할 요소의 수
  - 0이하면 어떤 요소도 제거하지 않음
  - 생략하거나 값이 array.length - start보다 크면 start 부터 모든 요소 제거
• item : 배열에 추가할 요소. 요소를 지정하지 않을시, splice()는 요소를 제거함
• 반환값 :: 아무것도 제거하지 않았다면 빈 배열, 제거할 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열 반환.

배열 복사하기

let fruits = ['mellon', 'mango'];
let arrCopy = fruits.slice();

console.log(arrCopy);
> ['mellon', 'mango']

arr.slice()

arr.slice(begin, end)

• 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환함. 원본 배열은 바뀌지 않음.

정적 메서드

arr.from()

: 유사 배열 객체(array-like object)나 반복 가능한 객체를 얕게 복사해서 새로운 Array 객체를 만듦.

console.log(Array.from('foo'));
> ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
> [2, 4, 6]

arr.isArray()

: 인자가 배열인지 판별하는 메서드

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

arr.of()

: 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 배열 인스턴스를 만듦.

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

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

---인스턴스 메서드---

변경자 메서드

arr.copyWithin()

: 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환함. 이 때, 크기(배열의 길이)를 수정하지 않고 반환함.

arr.copyWithin( target, start, end );

• target : 복사한 시퀀스(값)를 넣을 위치를 가리키는 0 기반 인덱스.
  음수를 지정하면 인덱스의 끝부터 계산함.
• start : 선택 요소. 복사를 시작할 위치를 가리키는 0 기반 인덱스.
  음수를 지정하면 인덱스의 끝부터 계산함.
• end : 선택 요소. 복사를 끝낼 위치를 가리키는 0 기반 인덱스.
  end 인덱스 이전까지만 복사함.

const arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.copyWithin(0, 3, 4));
// [ "d", "b", "c", "d", "e"]

console.log(arr.copyWithin(1, 3));
// ["d", "d", "e", "d", "e"]

[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]

순회 메서드

arr.entries()

const array = ['a', 'b', 'c'];

const iterator = array.entries();

console.log(iterator.next().value);
> [0, "a"]

console.log(iterator.next().value);
> [1, "b"]

: entries() 메서드는 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 array iterator 객체를 반환함.

var a = ['a', 'b', 'c'];
var iterator = a.entries();

for (let e of iterator) {
  console.log(e);
}
> [0, 'a']
> [1, 'b']
> [2, 'c']

arr.every()

: 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트함.
빈 배열에서 호출하면 무조건 true 반환.

const isBelowThreshold = (currentValue) => currentValue < 40;

const arr = [1, 30, 39, 29, 10, 13];

console.log(arr.every(isBelowThreshold));
> true

[12, 54, 18, 130, 44].every(elem => elem >= 10);
> true

arr.find()

: 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환. 그런 요소가 없다면 undefined를 반환.

const arr = [5, 12, 8, 130, 44];

const found = arr.find(element => element > 10);

console.log(found);
> 12

arr.findIndex()

: 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환. 만족하는 요소가 없으면 -1을 반환.

const arr = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(arr.findIndex(isLargeNumber));
> 3

arr.forEach()

: 주어진 함수를 배열 요소 각각에 대해 실행.

const arr = ['a', 'b', 'c'];

arr.forEach(element => console.log(element));
> "a"
> "b"
> "c"

arr.keys()

: 배열의 각 인덱스를 키 값으로 가지는 새로운 Array iterator 객체를 반환.

const arr = ['a', 'b', 'c'];
const iterator = arr.keys();

for (const key of iterator) {
  console.log(key);
}
> 0
> 1
> 2

arr.map()

: 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환.

const arr = [1, 4, 9, 16];

const map = arr.map(x => x*2);

console.log(map);
> [2, 8, 18, 32]

arr.reduce()

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

const arr = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(arr.reduce(reducer));
> 10

// 5 + 1 + 2 + 3 + 4
console.log(arr.reduce(reducer, 5));
> 15

리듀서 함수는 네 개의 인자를 가짐.

1. 누산기(accumulator)
2. 현재값 (currentValue)
3. 현재 인덱스 (currentIndex)
4. 원본 배열 (array)
   => 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과 값은 하나가 반환됨.

arr.reduceRight()

: 누적기에 대해 함수를 적용하고 배열의 각 값(오른쪽에서 왼쪽으로)은 값을 단일 값으로 줄여감.

const arr = [[0, 1], [2, 3], [4, 5]].reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));

// 1 + 2 + 3 + 4
console.log(arr);
> [4, 5, 2, 3, 0, 1]

reduce와 reduceRight의 차이점

const arr = ["1", "2", "3", "4", "5"];
const left = arr.reduce(function(prev, cur) { return prev + cur; });
const right = arr.reduceRight(function(prev, cur) { return prev + cur; });

console.log(left);
> 12345
console.log(right);
> 54321

arr.some()

: 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트 함.

const arr = [1, 2, 3, 4, 5];

const even = (element) => element % 2 === 0;

console.log(arr.some(even));
> true

arr.values()

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

const arr = ['a', 'b', 'c'];
const iterator = arr.values();

for (const value of iterator) {
  console.log(value);
}
> "a"
> "b"
> "c"

arr[Symbol.iterator]()

: 'arr[Symbol.iterator]' 속성의 초기 값은 values() 속성의 초기 값과 같은 함수

const arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr[Symbol.iterator]();

// 방법 1
for (let letter of eArr) {
  console.log(letter);
}

// 방법 2
console.log(eArr.next().value); // w
console.log(eArr.next().value); // y
console.log(eArr.next().value); // k
console.log(eArr.next().value); // o
console.log(eArr.next().value); // p