JavaScript 기초 - array

1. array의 Constructor :Array()
2. array의 Property: 

1) Array[@@species]
=> 현재 이 기능은 사라질 준비 중. toReserved() 같은 최신 배열 메서드가 새 Array 기반 클래스 인스턴스를 반환한다.
기존 배열을 변경하지 않고, 새 배열 인스턴스를 반환하는 배열 메서드(filter(), map())에서 생성자로 작용해,
반환된 생성자는 원 배열과 관련 없는 새로운 배열 메서드의 반환 값을 구성하게끔 된다.

2) Array.prototype[@@unscopables]
=> 이 속성이 있음으로서 ECMAScript 2015에 도입된 Array 속성이 with 문 바인딩 목적으로 무시돼
2015 이전에 작성된 코드가 중단되지 않고 예상대로 계속 작동 가능하다. 가령 아래 코드를 보자.

var keys = [];

with (Array.prototype) {
  keys.push("something");
}

ECMAScript 2015에 Array.prototype.keys() 메서드가 도입되었을 때, 
@@unscopables 데이터 속성이 함께 도입되지 않았다면, 
JavaScript 런타임이 keys를 예제 코드에 정의된 keys 배열이 아닌 
Array.prototype.keys() 메서드로 해석하기 때문에 
해당 keys.push('something') 호출이 중단될 수 있었습니다.

3. array의 method들

1) Array[@@iterator]():
[@@iterator]() 메서드는 순회가능 프로토콜(for..of 루프나 spread syntax({...elements}))을 구현하며,
이 메서드가 배열의 각 인덱스 값 산출하는 배열 순회자 객체를 반환한다.

이것은 반환된 순회자 객체의 .next() 메서드를 수동으로 호출해 순회 과정을 최대한 제어하는 것이 가능하다.
아래 예시를 보자.

const arr = ["a", "b", "c", "d", "e"];
const arrIter = arr[Symbol.iterator]();
console.log(arrIter.next().value); // a
console.log(arrIter.next().value); // b
console.log(arrIter.next().value); // c
console.log(arrIter.next().value); // d
console.log(arrIter.next().value); // e

2) Array.at()
정숫값을 받아 해당 인덱스에 있는 항목을 반환한다.
양수, 음수 사용 가능하며 음의 정수는 배열 마지막 항부터 거슬러 올라간다.
만약 index 값에 array의 length 값 넣게 되면, undefined 반환한다.

3) Array.concat()
두개 이상의 배열을 병합할 때 사용한다.
기존 배열을 변경하지 않고, 새 배열을 반환한다.

4) Array.copyWithin(target, start, end?)
배열의 일부를 같은 배열의 다른 위치로 얕게 복사한다.
배열의 길이를 수정하지 않고 변형된 배열을 반환한다.
copyWithin()은 end를 포함하지 않고 end 전 까지 복사한다.
end가 없다면 start부터 끝까지가 범위이다.

EX)
const array1 = ['a', 'b', 'c', 'd', 'e'];

// Copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// Expected output: Array ["d", "b", "c", "d", "e"]

// Copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// Expected output: Array ["d", "d", "e", "d", "e"]


5) Array.entries()
배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새 배열 반복자 객체를 반환한다.

EX)
const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

console.log(iterator1.next().value);
// Expected output: Array [0, "a"]

console.log(iterator1.next().value);
// Expected output: Array [1, "b"]


** entries()는 아래와 같은 상황에서 객체에서도 사용 가능하다
EX)
const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
  3: "d", // length가 3이므로 entries()에서 무시됩니다.
};
for (const entry of Array.prototype.entries.call(arrayLike)) {
  console.log(entry);
}
// [ 0, 'a' ]
// [ 1, 'b' ]
// [ 2, 'c' ]

entries() 메서드는 this의 length 속성을 읽은 다음 
키가 length보다 작은 음수가 아닌 정수 속성에 각각 접근합니다.


6) Array.every()
인자는 함수, 배열의 모든 함수가 인자인 함수를 통과하는지 테스트 시 사용, 반환값은 boolean.
(EX)
const isBelowThreshold = (currentValue) => currentValue < 40;

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

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

7) Array.fill()
인자는 (채울 값, 시작 인덱스 위치(option), 끝 인덱스 위치(option)),
배열 자체를 수정해서 return 값은 수정된 배열.end는 포함되지 않는다.

8) Array.filter()
배열의 복사본을 생성해, 제공된 함수를 통과한 요소로만 필터링.
통과한 요소 없으면 빈 배열이 반환된다.
인자는 (callbackFn, thisArg(option, 콜백함수 실행 시 this로 사용할 값))

9) Array.find()
Array 인스턴스의 find() 메서드는 배열에서 제공된 테스트 함수 만족하는 첫번째 요소를 반환한다.
만족하는 요소가 없으면 undefined 가 반환된다.
인자는 (callbackFn, thisArg(option, 콜백함수 실행 시 this로 사용할 값))

10) Array.findIndex()
Array 인스턴스의 findIndex() 메서드는 인자의 함수를 만족하는 배열의 첫번째 요소에 대한 인덱스를 반환한다.
만족하는 요소가 없으면 -1 을 반환한다.
인자는 (callbackFn, thisArg(option, 콜백함수 실행 시 this로 사용할 값))

11) Array.findLast()
배열을 역순으로 순회하며 제공된 테스트 함수를 만족하는 첫번쨰 요소의 값을 반환한다.
만족하는 요소가 없으면 undefined 가 반환된다.
인자는 (callbackFn, thisArg(option, 콜백함수 실행 시 this로 사용할 값))

12) Array.findLastIndex()
배열을 역순으로 순회하며 제공된 테스트 함수를 만족하는 첫번쨰 요소의 인덱스를 반환한다.
만족하는 요소가 없다면 배열의 첫번째 요소의 인덱스를 반환한다.
인자는 (callbackFn, thisArg(option, 콜백함수 실행 시 this로 사용할 값))

13) Array.flat()
모든 하위 배열 요소들을 하나의 배열로 합치는 것.
반환값은 하위 배열 요소가 연결된 새 배열이다.

Ex.)
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];
console.log(arr2.flat());
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]

들어갈 인자는 flat(배열, (depth,  depth는 optional. 중첩된 배열구조를 얼마나 깊이 평탄화할지 지정하는 수준, 기본값은 1이다.))

14) Array.flatMap()
.flatMap() 메서드는 배열의 각 요소에 주어진 콜백 함수를 적용한 뒤, 그 결과를 한 단계씩 평탄화해 새 배열을 반환한다.
이 메서드는 .map() 뒤에 .flat()을 붙이는 것을 한번에 수행하는 것과 동일하다.
반환값은 새 배열, 인자는 flatMap(callbackFn), flatMap(callbackFn, thisArg)이다.

EX)
const arr1 = [1, 2, 1];
const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));
console.log(result);
// Expected output: Array [1, 2, 2, 1]

15) Array.forEach()
.forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한번씩 실행한다. 반환값은 없다.(undefined)
인자는 (callbackFn, thisArg(option, 콜백함수 실행 시 this로 사용할 값))

16) Array.from()
유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.
반환 값은 새로운 array, 
인자는 Array.from(arrayLike(배열로 변환하고자 하는 유사배열 객체나 반복적인 객체[, mapFn(optional, 배열의 모든 요소에 대해 호출할 매핑함수) [, thisArg(optional, mapFn 실행시 this로 사용할 값)]])

17) Array.fromAsync()
반환값: 비동기 순회객체, 유사배열 객체, 반복 가능한 순회객체로부터 얕게 복사한 배열을 반환한다.
인자는 Array.fromAsync(arrayLike, mapFn, thisArg) 위의 Array.from() 과 유사.

Ex)
const asyncIterable = (async function* () {
  for (let i = 0; i < 5; i++) {
    await new Promise((resolve) => setTimeout(resolve, 10 * i));
    yield i;
  }
})();

Array.fromAsync(asyncIterable).then((array) => console.log(array));
// [0, 1, 2, 3, 4]

18) Array.includes() 
includes() 메서드는 배열 내에 해당 요소가 있는지 확인해 true, false 값을 반환한다.

19) Array.indexOf()
indexOf() 메서드는 배열 내에 해당 요소가 발견된 가장 첫번째 인덱스를 반환한다. 
찾지 못하면 -1을 반환한다.
인자는 indexOf(searchElement, fromIndex(option, 시작 인덱스, negagtive(음수)나 fromIndex+array.length로 표현 가능하나 이때도 시작에서 끝 방향으로 가는 건 잊어선 안된다. 없으면 기본값 0))

20) Array.isArray()
인자로 들어간 요소가 Array인지 true, false 반환.

21) Array.join()
Array 안의 요소를 join의 인자로 들어간 요소를 구분자로 묶어, 하나의 string을 반환.
인자는 join(separator), 기본값은 ','이다.

Ex)
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"

console.log(elements.join(''));
// Expected output: "FireAirWater"

console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"


22) Array.keys()
keys()는 array 내의 요소들의 key(없다면 index)로 이루어진 새로운 배열을 반환한다.
인자는 없다. Object.keys와 달리 가운데 요소가 빠져 있어도 keys는 수집된다

Ex)
const arr = ["a", , "c"];
const sparseKeys = Object.keys(arr);
const denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys); // [0, 1, 2]

23) Array.lastIndexOf()
인자의 요소가 배열 가장 마지막에 나타난 index를 반환한다.
없을 경우 -1을 반환한다.
lastIndexOf(searchElement,fromIndex(option, 시작 인덱스, negagtive(음수)나 fromIndex+array.length로 표현 가능하나 이때도 시작에서 끝 방향으로 가는 건 잊어선 안된다. 없으면 기본값 0))

24) Array.map()
인자로 들어간 함수를 적용한 새로운 배열을 반환한다.
인자는 map(callbackFn, thisArg(optional))

25) Array.of()
element를 인자로 받아서, 해당 element들로 배열을 만들어 반환한다.

Ex) 
console.log(Array.of('foo', 2, 'bar', true));
// Expected output: Array ["foo", 2, "bar", true]

console.log(Array.of());
// Expected output: Array []

Array.of(7); // [7]
Array(7); // array of 7 empty slots

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

26) Array.pop()
맨 끝의 요소를 반환 후 원 배열에서 제거한다.원래 배열을 변형시키는 작업.

26) Array.push()
맨 끝에 인자의 요소를 더한다. 원래 배열을 변형시키는 작업.

27) Array.reduce()
배열을 순회하며 callbackFn으로 인자의 요소들을 현재의 currentValue에 callbackFn 하여 반환.
인자는 reduce(callbackFn, initialValue(optional, 없으면 배열의 0번째 값))

28) Array.reduceRight()
reduce()를 오른쪽에서 왼쪽(반대)방향으로 진행.

29) Array.reverse()
배열 요소의 순서를 거꾸로 바꾼다. 거꾸로 바꾼 배열을 반환한다. 원래 배열을 변형시키는 작업.
인자는 없다.

30) Array.shift()
가장 첫번째 인자를 제거하고, 제거된 인자를 반환한다. 원래 배열을 변형시키는 작업.

31) Array.slice()
인자가 범위가 되어, 해당 범위만 자른 새로운 배열을 반환한다. 원래 배열은 변하지 않는다.
인자는 slice(start(optional, 없으면 처음부터 끝까지가 범위), end(optional, 없으면 Start부터 배열 끝까지가 범위))

32) Array.some()
특정 테스트를 통과하는 요소가 하나라도 있는지를 확인해 true, false 반환한다.
인자는 some(callbackFn, thisArg)

33) Array.sort()
uft-16 코드 규칙에 따라 오름차순 정렬. 원래 배열을 변형시키는 작업.(원래 배열 변형시키지 않으려면 .toSorted() 사용해라)

Ex)
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]


34) Array.splice()
Array의 특정 인덱스에서 deleteCount만큼을 제거하고, 새로운 아이템을 추가함. 원래 배열을 변형시키는 작업.(원래 배열 변형시키지 않으려면 .toSpliced() 사용해라)
인자는 splice(start, deleteCount(optional, 0이거나 없으면 아무 아이템도 제거하지 않는다.), item1(optional), item2(optional))

Ex)
const myFish = ["angel", "clown", "drum", "sturgeon"];
const removed = myFish.splice(2, 1, "trumpet");

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

35) Array.toLocaleString()
locale 설정이 적용된 문자열을 반환한다.(Date나, 시간이나..)

36) Array.toReversed ~toSpliced()
원래 배열을 변환시키지 않으며, 새로운 배열을 반환한다.

37) toString()
지정된 배열을 문자열로 변환한 것을 반환한다.

Ex)
const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// Expected output: "1,2,a,1a"

38) Array.unShift()
새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이(array.length)를 반환한다.원래 배열을 변형시키는 작업.

Ex)
const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// Expected output: 5

console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3]

39) Array.values()
배열에서 각 인덱스의 값을 담은 새로운 iterator을 반환한다.

40) Array.with()
주어진 인덱스의 값을 변경하기 위해 대괄호 표기법을 사용하는 것의 복사 버전.
원 배열을 변형하지 않고, 새 배열을 반환한다.
인자는 array.with(index, value)


** 더 공부해야 하는 것 => 순회 메소드의 thisArg의 역할