[Javascript] 배열 , new Array, Attay.of, Array.from, isArray, instanceof Array, at, includes, indexOf,lastIndexOf, join, push, unshuft,pop,splice,fill,reverse,concat,slice,flat,

I. 자바스크립트의 배열은 다르다.

다른 언어들의 배열 전형적인 배열

• 한 배열에는 같은 자료형의 데이터만 포함 가능
• 데이터의 메모리 주소가 연속으로 나열됨
• 접근은 빠름, 중간요소의 추가나 제거는 느림

자바스크립트의 배열

• ⭐️ 배열의 형태와 동작을 흉내내는 특수 객체
• 한 배열에 다양한 자료형의 데이터가 들어갈 수 있음
• 연속나열이 아님 - 💡 엔진에 따라 요소들의 타입이 동일하면 연속 배열하기도...
• 접근은 상대적으로 느림 (일반 객체보다는 빠름), 중간요소의 추가나 제거는 빠름
• 💡 특정 자료형 전용 배열도 있음 - 더 빠름 🔗 MDN 문서 보기

---

 

II. 배열 생성 방법들

1. 배열 리터럴

const arr1 = []; // 빈 배열

const arr2 = [1, 2, 3];

const arr3 = [1, , 2, , 3] // 빈 요소(undefined) 표함 배열 생성

​

console.log(arr1.length, arr1);

console.log(arr2.length, arr2);

console.log(arr3.length, arr3);

• arr3의 프로퍼티들 확인 빠진 인덱스 있음, 인덱스 수 < length

2. 생성자 함수

• 표준 빌트인 객체들 중 하나
• 👉 MDN 문서 보기

const arr = new Array();

​

console.log(arr);

console.log(arr.length);

• 콘솔에서 펼쳐서 확인해 볼 것 길이값만 있음

 

const arr = new Array(3);

​

console.log(arr);

console.log(arr.length);

 

console.log(

arr[0], arr[1], arr[2]

);

• 인자가 숫자 하나면 길이값은 있지만 요소가 없는 배열 생성 접근시 undefined

 

const arr1 = new Array(1, 2, 3);

const arr2 = new Array('ABC');

const arr3 = new Array(true);

​

console.log(arr1);

console.log(arr2)

console.log(arr3)

• 인자가 숫자가 아니거나 둘 이상이라면 해당 값들로 배열 생성

3. 정적 메서드 of

// 인자가 하나의 숫자라도 이를 요소로 갖는 배열 생성

const arr1 = Array.of(3);

​

const arr2 = Array.of(1, 2, 3);

const arr3 = Array.of('ABC', true, null);

​

console.log(arr1);

console.log(arr2);

console.log(arr3);

4. 정적 메서드 from

배열, 유사배열객체, 이터러블을 인자로 받아 배열 반환

const arr1 = Array.from([1, 2, 3]);

const arr2 = Array.from('ABCDE');

const arr3 = Array.from({

'0': true,

'1': false,

'2': null,

length: 3

});

​

console.log(arr1);

console.log(arr2);

console.log(arr3);

💡 유사배열객체: length와 인덱싱 프로퍼티를 가진 객체

const arrLike = {

0: '🍎',

1: '🍌',

2: '🥝',

3: '🍒',

4: '🫐',

length: 5

};

​

// 일반 for문으로 순회 가능

for (let i = 0; i < arrLike.length; i++) {

console.log(arrLike[i]);

}

 

// for ... of 문은 이터러블에서만 사용 가능

for (const item of arrLike) {

console.log(item);

}

 

// 배열은 이터러블, 성능도 향상

for (const item of Array.from(arrLike)) {

console.log(item);

}

• 이후 배울 Map, Set 등의 이터러블로부터도 배열 생성 가능

 

⚠️ Array.from은 얕은 복사 - 1단계 깊이만 복사

const arr1 = [1, 2, 3];

const arr2 = Array.from(arr1);

arr2.push(4);

​

console.log(arr1, arr2);

 

arr1[0] = 0;

​

console.log(arr1, arr2);

const arr1 = [{x: 1}, {x: 2}];

const arr2 = Array.from(arr1);

arr2.push({x: 3});

​

// 참조타입 요소의 내부값이 바뀔 경우

arr1[0].x = 0;

console.log(arr1, arr2);

 

⭐️ 두 번째 인자: 매핑 함수

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

const arr2 = Array.from(arr1, x => x + 1);

const arr3 = Array.from(arr1, x => x * x);

const arr4 = Array.from(arr1, x => x % 2 ? '홀' : '짝');

​

console.log(arr2);

console.log(arr3);

console.log(arr4);

• 매핑 mapping : 각 요소가 특정 알고리즘을 거쳐 새 값으로 반환됨
• 곧 배울 인스턴스 메서드 map이 보다 자주 사용됨

I. 특정 값을 반환하는 기본 메서드들

1. (정적) isArray - 배열인지 여부를 반환

console.log(

Array.isArray([1, 2, 3]),

Array.isArray('123'),

Array.isArray('123'.split(''))

);

💡 instanceof Array와의 차이

const arrays = [

[], [1, 2, 3], new Array(),

// ⚠️ instanceof에서는 결과가 다름

Array.prototype // 배열임

];

​

const notArrays = [

1, 'abc', true, null, {}

];

 

for (const item of arrays) {

console.log(

item,

Array.isArray(item),

item instanceof Array

);

}

 

for (const item of notArrays) {

console.log(

item,

Array.isArray(item),

item instanceof Array

);

}

• Array.isArray가 보다 권장됨 다른 프레임의 Array도 판별
• 👉 관련 MDN 문서

2. at - 주어진 인자를 인덱스로 값을 반환

• ⭐️ 음수를 사용하여 뒤에서부터 접근 가능

const arr = [

'한놈', '두시기', '석삼', '너구리', '오징어'

];

​

console.log(

arr.at(1), arr.at(2)

);

 

console.log(

arr.at(-1), arr.at(-2)

);

3. includes - 인자로 주어진 요소 유무 확인

const arr = [1, 2, 3, 'abc', true];

​

console.log(

arr.includes(2),

arr.includes('abc'),

arr.includes(true),

);

 

console.log(

arr.includes(4),

arr.includes('가나다'),

arr.includes(false)

);

⚠️ 참조형 데이터의 경우

const obj1 = { x: 1, y: 2 };

const obj2 = { x: 1, y: 2 };

​

const arr = [

obj1,

{ x: 3, y: 4 }

];

​

console.log(

arr.includes(obj1),

arr.includes(obj2),

arr.includes({ x: 1, y: 2 }),

arr.includes({ x: 3, y: 4 })

);

4. indexOf, lastIndexOf - 앞/뒤에서 첫 번째 값의 인덱스 반환

• 없을 시 -1 반환

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

​

console.log(

arr.indexOf(2),

arr.lastIndexOf(2),

arr.indexOf(4)

);

5. join - 인자로 주어진 값으로 구분하여 요소들을 문자열로 연결하여 반환

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

const arr2 = [

1, true, null, undefined, '가나다', { x: 0 }, [1, 2, 3]

];

 

console.log(

arr1.join() // 인자가 없다면 쉼표`,`로

);

 

console.log(

arr1.join('')

);

 

console.log(

arr1.join(' ')

);

 

console.log(

arr2.join(':')

);

console.log(

classIntro(3, '김민지', '영희', '철수', '보라')

); // 호이스팅

​

function classIntro (classNo, teacher, ...children) {

​

// [ 4-3강 예제 ]

​

// let childrenStr = '';

// for (const child of children) {

// if (childrenStr) childrenStr += ', ';

// childrenStr += child;

// }

// return `${classNo}반의 선생님은 ${teacher}, `

// + `학생들은 ${childrenStr}입니다.`

​

return `${classNo}반의 선생님은 ${teacher}, `

+ `학생들은 ${children.join(', ')}입니다.`

}

---

 

II. 배열을 변경하는 기본 메서드들

1. push, unshift - 배열에 값을 추가

• 결과의 길이를 반환

a. push - 값을 뒤에 추가

const arr = [1, 2, 3];

const x = arr.push(4);

​

console.log(x, arr);

 

const y = arr.push(5, 6, 7); // 최종 길이 반환

​

console.log(y, arr);

b. unshift - 값을 앞에 추가

const arr = [5, 6, 7];

const x = arr.unshift(4);

​

console.log(x, arr);

 

const y = arr.unshift(1, 2, 3);

​

console.log(y, arr);

특징과 비교

• 수정된 배열의 길이를 반환
• 부수효과 - 원본 배열을 변경 배열 마지막 강에 배울 스프레드 문법을 보다 권장
• 💡 push보다 unshift가 더 느림 - 이후 요소들을 밀어내야 하므로

2. pop, shift - 배열에서 값을 제거하여 반환

a. pop - 값을 뒤에서 제거하여 반환

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

const x = arr.pop();

​

console.log(x, arr);

 

const y = arr.pop();

​

console.log(y, arr);

b. shift - 값을 앞에서 제거하여 반환

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

const x = arr.shift();

​

console.log(x, arr);

 

const y = arr.shift();

​

console.log(y, arr);

• 💡 pop보다 shift가 더 느림 - 이후 요소들을 당겨야 하므로

3. splice - 원하는 위치에 요소(들)을 추가 및 삭제

2개 이상의 인자를 받음

• start : 배열 변경을 시작할 위치
• deleteCount : 제거할 요소의 개수
• item(s) : 추가할 하나 이상의 요소

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

​

// 2번 인덱스부터 2개 요소 제거

arr.splice(2, 2);

​

console.log(arr);

 

// 3번 인덱스부터 요소 제거 없이 'a' 추가

arr.splice(3, 0, 'a');

​

console.log(arr);

 

// 1번 인덱스부터 3개 요소 제거 후 '가', '나', '다' 추가

arr.splice(1, 3, '가', '나', '다');

​

console.log(arr);

⚠️ 배열의 delete - empty 값을 남김

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

delete arr[2];

​

console.log(arr);

 

// 💡 때문에 배열의 값 삭제에는 splice 사용

arr.splice(2, 1);

​

console.log(arr);

4. fill - 배열을 특정 값으로 채움

// 중간의 빈 값도 채움

const arr1 = [1, 2, , , 4, 5];

arr1.fill(7);

​

console.log('1.', arr1);

 

// 💡 특정 값으로 채운 배열 생성시 유용

const arr2 = new Array(10);

arr2.fill(1);

​

console.log('2.', arr2);

 

// 인자가 둘일 때: (채울 값, ~부터)

arr2.fill(2, 3);

​

console.log('3.', arr2);

 

// 인자가 셋일 때: (채울 값, ~부터, ~ 전까지)

arr2.fill(3, 6, 9);

​

console.log('4.', arr2);

5. reverse - 배열의 순서를 뒤집음

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

console.log(arr);

 

// 💡 메서드 자체도 뒤집힌 배열을 반환

arrRev = arr.reverse();

​

// 원본 배열 뒤집힘

console.log(arr, arrRev);

 

arrRev[0] = 0;

​

// ⭐ 반환된 배열은 원본과 같은 배열을 참조! (복사가 아님)

console.log(arr, arrRev);

---

 

III. 새 배열을 반환하는 기본 메서드들

• ⭐️ 원본 배열을 수정하지 않음
• 얕은 복사본

1. concat - 배열에 다른 배열이나 값을 이어붙인 결과를 반환

const arr1 = [1, 2, 3];

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

const arr3 = [true, false];

 

const arr4 = arr1.concat(arr2);

​

console.log(arr4);

 

const arr5 = arr1.concat(arr2, 3);

​

console.log(arr5);

 

const arr6 = arr1.concat('ABC', arr2, arr3, 100);

​

console.log(arr6);

 

// ⭐️ 원본 배열들에는 변화 없음

console.log(arr1, arr2, arr3);

• 해당 배열 뒤로 인자로 하나 이상 주어진 다른 배열이나 값을 이어붙인 결과를 반환

2. slice - 인자로 주어진 범주의 값을 잘라 반환

1~2개 인자를 받음

• begin : 시작 위치
• end : 종료 위치

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

​

const arr2 = arr1.slice(3);

const arr3 = arr1.slice(3, 7);

​

console.log(arr2, arr3);

 

// 원본에는 변화 없음

console.log(arr1);

3. flat - 인자로 주어진 깊이만큼 배열을 펼쳐 반환

💡 flat 평평하게 한다는 의미

[

1,

[2, 3],

[4, 5, 6],

7

]

​

↓ ↓ ↓

​

[

1,

2,

3,

4,

5,

6,

7

]

 

const orgArr = [

1, 2,

[3, 4],

[5, [6, [7, 8]]]

];

​

// 인자가 없으면 1을 넣은 것과 같음

const arr0 = orgArr.flat();

const arr1 = orgArr.flat(1);

​

const arr2 = orgArr.flat(2);

const arr3 = orgArr.flat(3);

 

console.log('N:', arr0);

console.log('1:', arr1);

console.log('2:', arr2);

console.log('3:', arr3);

 

// 원본에는 변화 없음

console.log('org:', orgArr);

💡 위의 메서드들은 얕은 복사

const orgArr = [

1, { x: 2 }, [{ x: 3 }, {x: 4}], 5

];

​

const arr1 = orgArr.concat(6);

const arr2 = orgArr.slice(0, 3);

const arr3 = orgArr.flat();

​

orgArr[0] = 0;

orgArr[1].x = 20;

orgArr[2][0].x = 30;

​

console.log(orgArr);

console.log(arr1);

console.log(arr2);

console.log(arr3);

• 원시값과 참조값 비교