배열

 

자바스크립트에 배열 타입은 존재하지 않는다. 배열을 객체 타입이다.

typeof arr // object

 

 

 

객체와 배열의 특징

구분	객체	배열
구조	키와 값	인덱스와 요소
값의 참조	키	인덱스
값의 순서	X	O
length 프로퍼티	X	O

배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조이다

 

 

희소배열

 

현재 length 에 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다.

const arr = ["a", "b", "c", "d", "e"];
arr.length = 3;
console.log(arr);  // [ 'a', 'b', 'c' ]

 

 

현재 length 에 프로퍼티 값인 1보다 큰숫자 3을 length 프로퍼티에 할당하면, length 프로퍼티 값은 변경 되지만

실제로 배열의 길이가 늘어나지는 않는다.

const arr = ["a"];
arr.length = 3;
console.log(arr);  // [ 'a', <2 empty items> ]
console.log(Object.getOwnPropertyDescriptors(arr));
/*
{
  '0': { value: 'a', writable: true, enumerable: true, configurable: true },
  length: { value: 3, writable: true, enumerable: false, configurable: false }
}
*/

 

 

배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열을 희소 배열

자바스크립트는 희소배열을 문법적으로 허용

하지만 희소배열은 사용하지 않는 것이 좋다.

 - 연속적인 값이라는 배열의 기본개념과 맞지 않음

const arr = [, "b", , , "e"];
console.log(arr.length); //5
console.log(arr); // [ <1 empty item>, 'b', <2 empty items>, 'e' ]
console.log(Object.getOwnPropertyDescriptors(arr));
/*
{
  '1': { value: 'b', writable: true, enumerable: true, configurable: true },
  '4': { value: 'e', writable: true, enumerable: true, configurable: true },
  length: { value: 5, writable: true, enumerable: false, configurable: false }
}
*/

 

 

배열 생성 방법

 

1. 배열 리터럴로 배열 생성하기

const arr = ["A","B","C" ]

 

2. Array 생성자 함수

전달된 인수가 1개이고 숫자인 경우 인수 값이 length 인 배열 생성

실제로 요소는 존재하지 않음

const arr = new Array(10);
console.log(arr); // [ <10 empty items> ]
console.log(arr.length); // 10

 

인수 값이 2개 이상 이거나 숫자가 아닌경우에는 요소로 갖는 배열 생성

const arr = new Array(10, 11, 12);
console.log(arr); // [ 10, 11, 12 ]

const arr2 = new Array("가");
console.log(arr2); // [ '가' ]

 

 

new 연산자와 함께 호출 하지 않아도 똑같이 동작 한다.

const arr = Array(10, 11, 12);
console.log(arr); // [ 10, 11, 12 ]

const arr2 = Array("가");
console.log(arr2); // [ '가' ]

 

3. Array.of

 ES6에서 도입되었으며 Array 생성자 함수와는 다르게 1개의 숫자라도 인수를 요소로 갖는 배열을 생성한다.

const arr = Array.of(1);
console.log(arr); // [ 1 ]

 

4. Array.from

ES6에서 도입되었으며 유사배열객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

 

 

이터러블을 변환하여 배열을 생성한다.문자열은 이터러블이다.

const arr = Array.from("abcde");
console.log(arr); // [ 'a', 'b', 'c', 'd', 'e' ]

*이터러블 객체 : symbol.iterator 메서드를 구현하여 for..of 문으로 순회 가능. 스프레드 문법과 배열 구조분해 문법으로 할당하여 사용사능한 객체이다. (ex. Array, String, Map, argments ..... )

 

length 프로퍼티만 있는 유사배열객체를 넣으면, undefined 로 채워진다.

const arr = Array.from({ length: 3 });
console.log(arr); // [ undefined, undefined, undefined ]

*유사배열 객체 : 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체. for 문으로 순회할 수 있다.

 

 

배열 요소 참조

대괄로 표기법으로 참조가 가능하다.

const arr = ["a", "b"];
console.log(arr[0]); // a
console.log(arr[1]); // b

 

배열 매서드 ( 빨간색 표시는 원본 배열 변경)

Array.isArray

 배열이면 true, 아니면 false

// true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());

// false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(1);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ 0: 1, length: 1 })

 

Array.prototype.indexof

 전달된 인수가 배열에 있다면 첫번째로 검색된 요소의 인덱스 반환

 없으면 -1 을 반환한다.

 두번째 인자는 검색을 시작할 인덱스 이다.

const arr = ["a", "b", "c", "d"];


console.log(arr.indexOf("a")); //  1

console.log(arr.indexOf("A")); //  -1

console.log(arr.indexOf("b", 2)); //  -1

console.log(arr.indexOf("c", 2)); //  2

 

 

Array.prototype.push

 배열의 끝 부분에 요소 추가하고 배열의 길이를 반환한다.

const arr = [4, 5, 6, 7];
const result = arr.push(8);
console.log(result); // 5
console.log(arr); // [ 4, 5, 6, 7, 8 ]

 

Array.prototype.pop

 배열의 끝 부분 요소 제거하고 제거된 요소를 반환한다.

const arr = [4, 5, 6, 7];
const result = arr.pop();
console.log(result); // 5
console.log(arr); // [ 4, 5, 6 ]

 

Array.prototype.unshift

 배열의 첫 부분 요소 추가하고 배열의 길이를 반환한다.

const arr = [4, 5, 6, 7];
const result = arr.unshift(2, 3);
console.log(result); // 6
console.log(arr); // [ 2, 3, 4, 5, 6, 7 ]

 

Array.prototype.shift

 배열의 첫 부분 요소 제거하고 제거된 요소를 반환한다.

const arr = [4, 5, 6, 7];
const result = arr.shift();
console.log(result); // 4
console.log(arr); // [ 5, 6, 7 ]

 

 

Array.prototype.concat

 인수로 전달된 배열 또는 값을 원본 배열의 마지막 요소로 추가 하여 새로운 배열을 반환한다.

const arr1 = [4, 5, 6, 7];
const arr2 = [8, 9];
const result = arr1.concat(arr2);
console.log(result); // [ 4, 5, 6, 7, 8, 9 ]

 

 스프레드 문법으로 대체 가능

const result = [ ...arr1, ...arr2 ]

 

 

Array.prototype.splice

 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용한다.

splice(start, deleteCount, items)

 start : 원본 배열 요소 제거 시작 인덱스

 deleteCount : start 부터 제거한 요소 개수

 items (옵션 ) : 제거한 위치에 삽입할 요소

const arr = [4, 5, 6, 7];

//인덱스 1 부터 2개 요소를 제거하고 그 자리에 새로운 요소 50, 60, 70 을 삽입한다.
const result = arr.splice(1, 2, 50, 60, 70);
console.log(result); // [ 5, 6 ]
console.log(arr); // [ 4, 50, 60, 70, 7 ]

 

Array.prototype.slice

  전달된 인자의 범위를 복사하여 배열로 반환한다.

const arr = [4, 5, 6, 7];

// 배열 인덱스 1에서 인덱스 3이전(3포함x) 까지의 숫자를 복사하여 반환
const result = arr.slice(1, 3);
console.log(result); // [ 5, 6 ]

 

Array.prototype.join

 원본 배열의 모든 요소를 문자열로 변환 후 구분자로 연결한 문자열을 반환한다.

 기본 구분자는 콤마(",") 다.

const arr = [4, 5, 6, 7];
const result = arr.join();
console.log(result); // 4,5,6,7
const result2 = arr.join("");
console.log(result2); // 4567

 

Array.prototype.reverse

 배열의 순서를 뒤집는다. 원본 배열이 변경된다.

const arr = [4, 5, 6, 7];
const result = arr.reverse();
console.log(result); // [ 7, 6, 5, 4 ]
console.log(arr); // [ 7, 6, 5, 4 ]

 

Array.prototype.fill

 ES6 에서 도입 되었으며, 전달받은 인수로 배열의 모두 채운다.

const arr = [4, 5, 6, 7];
const result = arr.fill(1);
console.log(result); // [ 1, 1, 1, 1 ]
console.log(arr); // [ 1, 1, 1, 1 ]

 

 

Array.prototype.includes

 ES7 에 도입 되었으며 전달된 인자가 배열에 있으면 true 없으면 false를 반환한다.

const arr = ["a", "b", "c", "d"];


console.log(arr.includes("a")); // true

console.log(arr.includes("A")); // fasle

 

  두 번째 인수로 시작 인덱스를 설정 할 수 있다.

  두 번째 인수가 음수일 경우 시작 인덱스는 lengrh + index 가 된다.

 

indexOf 는 NaN 을 확인할 수 없다.

[NaN].indexOf(NaN) !== -1; // -> false
[NaN].includes(NaN);       // -> true

 

Array.prototype.flat

 ES10(ECMAScript 2019) 에서 도입되었으며, 인수로 전달한 깊이만큼 배열을 평탄화 한다.

const arr = [4, [5, [6, [7]]]];
const result = arr.flat();
console.log(result); // [ 4, 5, [ 6, [ 7 ] ] ]
const result2 = arr.flat(2);
console.log(result2); // [ 4, 5, 6, [ 7 ] ]
const result3 = arr.flat(3);
console.log(result3); // [ 4, 5, 6, 7 ]

 

배열고차 함수

Array.prototype.sort ( Sort 실행순서 분석 참조 )

 

 기본적으로 오름 차순으로 요소를 정렬

 내림차순으로 정렬하고 싶으면 reverse 매서드 사용

const arr = ["d", "p", "k", "z", "a", "b"];
const result = arr.sort();
console.log(result); // [ 'a', 'b', 'd', 'k', 'p', 'z' ]
console.log(arr); // [ 'a', 'b', 'd', 'k', 'p', 'z' ]

 

sort 매서드는 기본 정렬 순서를 유니코드 코드 포인트의 순서를 따른다.

그래고 배열의 요소를 일시적으로 문자열로 변환한 후 정렬 하기 때문에 숫자는 아래와 같이 정렬 된다.

const arr = [10, 1, 2, 17, 100, 40, 30];
const result = arr.sort();
console.log(result); // [ 1, 10, 100, 17, 2, 30, 40 ]
console.log(arr); // [ 1, 10, 100, 17, 2, 30, 40 ]

 

 

const arr = [10, 1, 2, 17, 100, 40, 30];

//숫자 배열 오름차순 정렬
arr.sort((a, b) => a - b);
console.log(arr); // [ 1,  2, 10, 17, 30, 40, 100 ]

//숫자 배열 내림차순 정렬
arr.sort((a, b) => b - a);
console.log(arr); // [ 100, 40, 30, 17, 10,  2,  1 ]

 

 

 

Array.prototype.forEach

 forEach 메서드는 for문을 대체할 수 있는 고차 함수

 배열의 요소를 콜백 함수로 전달받아 순차적으로 실행 한다.

// forEach 메서드는 콜백 함수를 호출하면서 3개(요소값, 인덱스, this)의 인수를 전달한다.
[1, 2, 3].forEach((item, index, arr) => {
  console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
});
/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

 

Array.prototype.map

<map 매서드의 구조>

 첫번째 인자 : callback 함수

 두번째 인자 : (생략가능) 콜백 함수 내부에서 this 로 인식할 대상 특정 생략 시 this 는 전역 객체

Array.prototype.map(callback[, thisArg])
callback : function(currentValue, index, array)

 

 

map 매서드의 callback 함수의 첫번째 인자에 index 두번째 인자에 currentValue 를 작성 하였다. 

하지만 순서에 따라서 인자를 인식 하기 때문에 index 에 배열의 값이 들어가고, currentValue 에 배열의 index 값이 전달된다.

const newArr2 = [10, 20, 30].map(function(index, currentValue) {
  console.log(index, currentValue);
  return currentValue + 5;
});
console.log(newArr2);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [5, 6, 7]

Array.prototype.filter

 자신을 호출한 배열에서 필터링 조건을 만족하는 특정 요소만 추출하여 새로운 배열을 만들고 싶을 때 사용 한다.

 콜백 함수의 반환값이 ture인 값만 배열로 반환한다.

const arr = [10, 1, 2, 17, 100, 40, 30];

const result = arr.filter((el) => el > 20);
console.log(result); // [ 100, 40, 30 ]

 

 

Array.prototype.reduce

 콜백 인자의 a 에는 이전에 계산한 값이 들어가고 b에는 현재 순회중인 배열의 값이 들어간다.

 

const arr = [10, 1, 2, 17, 100, 40, 30];

// 배열의 모든 값을 곱하기
const result = arr.reduce((a, b) => a * b);
console.log(result); // 40800000

// 배열의 모든 값을 더하기
const result2 = arr.reduce((a, b) => a + b);
console.log(result2); // 200

 

 

Array.prototype.some

 배열의 요소중 1개라도 참이면 true를 반환한다. 모두 틀리면 false

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].some((el) => el < 2); // true

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].some((el) => el > 10); // fasle

 

Array.prototype.every

배열의 요소가 모두 참이어야 true를 반환한다. 1개라도 틀리면 false

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].every((el) => el > 0); // true

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].every((el) => el < 2); // false

 

Array.prototype.find

 배열의 요소중 참인값 첫번째 요소 1개만 반환

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].find((el) => el > 3); // 4

// filter 는 모두 배열로 반환한다.
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].find((el) => el > 3); //[ 4, 5, 6, 7, 8, 9, 10 ]

 

Array.prototype.findindex

 

 

Array.prototype.flatMap

 map 메서드와 flat메서드를 순차적으로 실행하는 효과 

 대신 평탄화 깊이 지정할 수 없고 1단계만 평탄화 한다.

 중첩 배열의 평탄화 깊이를 지정해야 한다면 map 메서드와 flat 메서드를 각각 호출 한다.

const arr = ["abcd", "efghi"];
const result = arr.map((el) => el.split(""));
console.log(result); // [ [ 'a', 'b', 'c', 'd' ], [ 'e', 'f', 'g', 'h', 'i' ] ]
console.log(result.flat()); // [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i' ]

const result2 = arr.flatMap((el) => el.split(""));
console.log(result2); //// [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i' ]