[JAVASCRIPT] ARRAY

ARRAY, 배열

• 배열 객체의 프로토타입 (Array.prototype) 은 여러 메소드를 제공한다. 
• 배열 메소드에는 원본 배열을 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하는 메소드가 존재한다.
• 자주 쓰이는 메소드의 경우 ★ 표시

Array.from

• 유사 배열 객체나 반복 가능한 객체 (iterate) 를 얉은 복사를 통해 새로운 배열 객체를 리턴한다.

console.log(Array.from('foo')); // Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x)); // Array [2, 4, 6]

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

Array.isArray

• 전달된 인수가 배열이면 true 아니면 false를 리턴한다.

Array.isArray([]); // true
Array.isArray(new Array()); // true
Array.isArray(); // false
Array.isArray({}); // false
// 등등 나머지 자료형에는 false 를 리턴한다.

Array.prototype.indexOf

• 원본 배열에서 인수로 전달된 요소를 검색해 인덱스를 반환한다.

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

// 2와 일치하는 인덱스 번호 반환
arr.indexOf(2); // 1 
// 없는경우 -1 반환
arr.indexOf(5); // -1 
// 두번째 인수는 시작할 인덱스, 생략시 처음부터
arr.indexOf(3,2); // 2

Array.prototype.push

• 원본 배열의 마지막 요소로 추가하고 변경된 length를 반환한다.
• 원본 배열을 직접 변경

const arr = [1, 2];
arr.push(3); // [1, 2, 3];

Array.prototype.pop

• 원본 배열의 마지막 요소로 제거하고 변경된 length를 반환한다.
• 원본 배열을 직접 변경

const arr = [1, 2, 3];
let result = arr.pop();
console.log(result); // 2
console.log(arr); // [1, 2]

Array.prototype.unshift

• 인수로 전달받은 모든값을 배열의 첫번째 요소로 추가한다.
• 원본 배열을 직접 변경

const arr = [1, 2, 3];
let res = arr.unshift(4, 5, 6);
console.log(res); // 6  length 를 반환
console.log(arr); // [4, 5, 6, 1, 2, 3]

Array.prototype.shift

• 원본 배열의 첫 번째 요소를 제거하고 제거한 요소 반환
• 원본 배열을 직접 변경

const arr = [1, 2, 3];
let res = arr.shift();
console.log(res); // 1
console.log(arr); // [2, 3]

Array.prototype.concat ★

• 인수로 전달된 값을 원본 배열의 마지막 요소로 추가후 새로운 배열을 반환
• 원본 배열 미변경

const arr1 = [1, 2];
const arr2 = [3, 4];
let res1 = arr1.concat(arr2); // [1, 2, 3, 4]
let res2 = arr1.concat(3); // [1, 2, 3]
console.log(arr1); // [1, 2]

Array.prototype.splice 

• 배열의 제거, 추가 변경 등에 사용되는 메소드 (인덱스, 제거할 갯수, 추가할 요소)
• 원본 배열 직접 변경

const arr = [1, 2, 3, 4, 5]; // 인자를 하나만 받을경우 시작 인덱스부터 전부 제거
let res = arr.splice(1);
console.log(res); // [2, 3, 4, 5]
console.log(arr); // [1]

const arr = [1, 2, 3, 4, 5]; // 인자를 두개 받을경우 시작인덱스부터 두번째 인자 수 만큼 제거
let res = arr.splice(1, 1);
console.log(res); // [2]
console.log(arr); // [1, 3, 4, 5]

// 인자를 두개 받을경우 시작인덱스부터 두번째 인자 수 만큼 제거후 3번째 요소 추가
const arr = [1, 2, 3, 4, 5];
let res = arr.splice(1, 2, 7);
console.log(res); // [2, 3]
console.log(arr); // [1, 7, 4, 5]

const arr = [1, 2, 3, 4, 5]; // 1번째 인덱스에 7만 추가
let res = arr.splice(1, 0, 7);
console.log(res); // []
console.log(arr); // [1, 7, 2, 3, 4, 5]

const arr = [1, 2, 3, 4, 5]; // 복합
let res = arr.splice(1, 3, 10, 20, 30);
console.log(res); // [2, 3, 4]
console.log(arr); // [1, 10, 20, 30, 5]

Array.prototype.slice

• 범위의 요소를 복사하여 배열로 반환한다. (  Shallow Copy )
• splice 와 기능적으로 유사하나 혼동을 주의하자.
• 원본 배열 미변경

const arr = [1, 2, 3];

arr.slice(); //  [1, 2, 3]
arr.slice(1); // [2, 3]  해당 인덱스부터 복사
arr.slice(0,1); // [1] 해당 인덱스부터 지정 인덱스까지 복사
arr.slice(-2); // [2, 3]
console.log(arr); // [1, 2, 3]

Array.prototype.join

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

const arr = [1, 2, 3];

arr.join(); // "1,2,3"
arr.join(''); // "123"
arr.join('-'); // "1-2-3"

Array.prototype.reverse

• 배열 순서를 뒤집는다. 변경된 배열 리턴
• 원본 배열 직접 변경

const arr = [1, 2, 3];

arr.reverse(); // [3, 2, 1]
console.log(arr); // [3, 2, 1]

Array.prototype.fill

• ES6 ( ECMAScript 2015 )
• 전달 받은 값을 처음부터 끝까지 채운다.
• 원본 배열 직접 변경

const arr = [1, 2, 3];

arr.fill(0);
console.log(arr); // [0, 0 ,0];

const arr = [1, 2, 3]; 
// 전달 받은 인자를 받은 인덱스 부터 채운다.

arr.fill(0, 1);
console.log(arr); // [1, 0 ,0];

const arr = [1, 2, 3, 4];
// 전달 받은 인자를 두번째 인자로받은 인덱스 부터// 3번째 인자로 받은 인덱스까지

arr.fill(0, 1, 3);
console.log(arr); // [1, 0, 0, 4];

Array.prototype.includes

• ES7
• 배열 내 특정 요소가 포함 되있는지 확인하여 boolean 을 반환한다.

const arr = [1, 2, 3];

arr.includes(2); // true
arr.includes(4); // false 
// 두번째 인자로 시작할 인덱스를 받는다. 1번째 부터 1이 있는지 확인한다.
arr.includes(1, 1); // false

Array.prototype.flat

• ES10 ( ECMAScript 2019 )
• 배열의 깊이 만큼 배열을 평탄화 한다. (고차 배열을 일차 배열로 변환한다)
• 원본 배열 미변경

[1, [2, [3, [4]]]].flat(); // [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(1); // [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(2); // [1, 2, 3, [4]]
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]

Array.prototype.sort

• 배열의 요소를 정렬한다. 기본적으로 오름차순 정렬을 한다.
• 원본 배열 직접 변경

const fruits = ["Banana", "Orange", "Apple"]; 
// ascending
fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Orange"]
// 한글도 마찬가지로 정렬된다.

문자열은 정렬의 문제가 없지만 숫자 요소로 이루어진 배열은 문제가 발생한다.
["10", "20"] 스트링 형태의 숫자형도 자동으로 캐스팅 되기 때문에 마찬가지로 문제발생.
유니코드 포인터 의 순서를 따르기 때문에 발생하는 문제

const arr = [1, 2, 3, 10, 25, 45];

arr.sort();
console.log(arr);// [1, 10, 2, 25, 3, 45]

const arr = [1, 2, 3, 10, 25, 45];
arr.sort((a, b) => a - b);
console.log(arr);// [1, 2, 3, 10, 25, 45]
arr.sort((a, b) => b - a);
console.log(arr);// [45, 25, 10, 3, 2, 1]

Array.prototype.forEach ★

• forEach(엘레먼트, 인덱스, 원본배열)
• 자신의 내부에서 반복문을 실행한다. 반환값은 언제나 undefined
• for 문과 달리 break, continue 사용이 불가능하다.
• 조작에 따라 원본 배열 변경가능

const arr = [1, 2, 3];

arr.forEach((elem, i, origin) => {
	console.log(elem, i , origin);
});

// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]

Array.prototype.map ★

• 리턴값으로 구성된 새로운 배열을 반환한다.
• 원본 배열 미변경

const arr = [1, 2, 3];
const res = arr.map((elem, i, origin) => elem**2 );
console.log(res);//[1, 4, 9]
console.log(arr);//[1, 2, 3];

Array.prototype.filter 

• 콜백 함수의 반환값이 true 인 요소로만 구성된 새로운 배열 을 반환한다.
• 원본 배열 미변경

const arr = [1, 2, 3, 4, 5];
const res = arr.filter((elem, i, origin) => elem % 2 );
console.log(res);// [1, 3, 5]

Array.prototype.reduce ★

• 배열 메소드의 결정체
• 대분분의 배열 메소드는 전부 reduce로 표현 가능하다.
• 원본 배열 미변경

기본 사용법

const list = [1, 2, 3, 4];
const res = list.reduce((acc, val, i, arr) => acc + val, 0);
console.log(res);// 10

평균 구하기

const list = [1, 2, 3, 4, 5];
const res = list.reduce((acc, val, i, { length }) => {
    return i !== length - 1 ? (acc + val) : (acc + val) / length ;
}, 0);
console.log(res);// 3

최댓값

const list = [1, 2, 3, 4, 5];
const res = list.reduce((acc, val) => acc > val? acc : val, 0);
console.log(res);// 5

배열을 객체로 만들기

const list = ["영수", "철수", "도지", "머스크", "화성"];
const res = list.reduce((acc, val, i) => (acc[val] = i, acc ), {});
console.log(res);// {영수: 0, 철수: 1, 도지: 2, 머스크: 3, 화성: 4}

Array.prototype.some

• 자신을 호출한 배열을 순회하면서 콜백함수의 반환값이 한번이라도 참이면 true, 모두 거짓이라면 false 를 반환
• || or 연산자와 유사하다

[5, 10, 20].some(elem => elem > 10);// true
[5, 10, 20].some(elem => elem > 20);// false

Array.prototype.every

• 자신을 호출한 배열을 순회하면서 콜백함수의 반환값이 모두 참이면 true, 한번이라도 거짓이라면 false
• && and 연산자와 유사하다.

[5, 10, 20].every(elem => elem > 10);// false
[5, 10, 20].every(elem => elem < 100);// true

Array.prototype.find

• 호출한 배열의 요소를 순회하며 반환값이 true 인 첫번째 요소를 반환한다.
• 결과값은 배열이 아닌 해당 요소 값이다.
• filter 메소드는 배열을, find 메소드는 요소값을 반환한다.

const list = [
{id: 1, name: "철수"},
{id: 2, name: "영희"},
{id: 3, name: "동준"},
];

list.find((elem) => elem.id === 2);// {id: 2, name: "영희"}

Array.prototype.findIndex

• 호출한 배열의 요소를 순회하며 반환값이 true 인 첫번째 요소의 인덱스를 반환한다.
• 만약 해당요소가 존재하지 않는다면 -1 을 리턴한다.

const list = [
{id: 1, name: "철수"},
{id: 2, name: "영희"},
{id: 3, name: "동준"},
];

list.findIndex((elem) => elem.id === 3);// 2

Reference

• 모던 자바스크립트 (이웅모)

---

There might be incorrect information or outdated content.