배열

1. 배열 생성

• new Array()
• 매개변수로 1개의 숫자원소 : 배열의 길이, 초기화 되지 않은 undefined가 값으로 생성됨
• 매개변수로 2개 이상의 원소 : 그 원소들로 이루어진 배열이 생성됨

• []

2. Array의 속성

• arr.length=3 처럼 조작할 수 있지만 권장 x

3. Array의 메서드

* static 메서드 *

1. from
• 순회하여 요소로 생성하거나, 유사 배열 객체에서 얕게 복사된 새로운 배열 인스턴스 생성
• 즉, 배열이 아닌 것(String, Set, Map, NodeList등)을 배열로 만들어주는 메서드
• (매개변수1) : 배열로 순회할 객체
• 유사배열 객체도 매개변수ㄱㄴ
• (매개변수1, 매개변수2) : (유사 배열 객체, 요소에 대해 호출할 함수)
• 배열에 추가할 모든 값이 이 매개변수2 함수를 통해 먼저 전달되고, 반환 값이 대신 배열에 추가 (==map 기능)
• 매개변수2 함수의 매개변수 : (현재 요소, 현재 index)
ex)

//////////////////////////////////////////////// String -> Array
console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

/////////////////////////////////////////////// Set -> Array
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

/////////////////////////////////////////////// Map -> Array
const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

/////////////////////////////////////////////// NodeList -> Array
// DOM 요소의 속성을 기반으로 배열 만들기
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);

/////////////////////////////////////////////// 유사배열객체 -> Array
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

• static 메서드이므로 위 1~5 메서드와 다르게 instance 메서드가 아닌, Array에 직접 사용해야 한다. 즉, Array.from()으로 사용해야한다.
• map과 차이 : 유사 배열 객체를 대상으로 가능하고, static 메서드이다.

2. isArray

3. of

* instance 메서드 *

1. map : 배열 원소에 대해 콜백 함수를 호출한 결과를 원소로 한 새로운 배열을 반환
• map(callback(currentValue[, index[, array]])[, thisArg]) 형태
• (주의) callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됨. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다.

2. forEach : 각 배열 요소에 대해 제공된 함수를 한 번씩 실행
• forEach(callbackFn) 형태
• callbackFn(element, index, array) : 배열의 각 요소에 대해 실행할 함수. 반환값은 사용되지 않는다.
• element : 배열에서 처리 중인 현재 요소.
• index : 배열에서 처리 중인 현재 요소의 인덱스.
• array : forEach()를 호출한 배열.
• return값으로는 break를 걸 수 없다!!

3. reduce : 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 결과값을 반환
• reduce(callbackFn, initialVal) :accumulator 형태
• callbackFn((accumulator, currentVal) => ~~)
• 반환 값은 accumulator에 할당되고, accumulator는 순회 중 유지되므로 결국 최종 결과는 하나의 값
• accumulator : 콜백의 반환값을 누적. 콜백의 이전 반환값
• 초기 값 : initialValue / 배열의 첫번째 값
• currentValue : 처리할 현재 요소.
• 초기 값 : 배열의 첫번째 값 / 배열의 두번째 값
 
• currentIndex : (Optional) 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작.
• array : (Optional) reduce()를 호출한 배열.

4. filter : true를 반환하는 요소들로 이루어진 배열을 반환

5. indexOf(원소) : 해당 원소의 index 반환

6. find(조건) : true를 반환하는 제일 처음 요소를 반환

7. findIndx(조건) : find+indexOf (조건을 만족하는 원소의 인덱스를 반환)

8. fill(n) : 해당 배열의 모든 원소의 값을 n으로
• let record = new Array(n).fill(new Array(n).fill(0)); => 잘못된 코드, 같은 배열로 0~n-1행이 채워져서 모든 행이 한 배열을 공유한다.
(주의! map은 배열 원소들로 새로운 배열을, forEach는 돌기만 함, reduce는 최종 결과값 하나 반환)

9. join(””)

10. reverse() (기존 배열 조작)

11. concat(arr)

12. push(x) / pop() : 맨 뒤 원소의 추가 / 삭제

13. shift(x) / unshift() : 맨 앞 원소의 추가/삭제

14. slice
• 배열의 부분 배열
• arr.slice(1,3) => arr의 1,2번째 원소로 이루어진 배열을 반환

15. splice (기존 배열 조작)
• 배열의 부분 삭제
• splice(2, 2) => 2번 인덱스부터 2개의 원소를 삭제한다
 

• for of : 배열의 원소 순회

• 사실 배열의 타입은 객체이다. 그래서 arr[key] = value 형태로 값을 추가할 수 있는 것
• 숫자 외의 타입을 key로 둔다면, length는 변화하지 않는다. 배열의 길이는 따로 관리되고 있기 때문(따라서 권장 x)