SPACE RUMI

Hi, I am rumi. Let's Splattack!

[STUDY] 스터디/Deep Dive JS

js Array

백루미 2022. 12. 31. 09:53
반응형

배열 이란?

여러개의 값을 순차적으로 나열한 자료구조. 나열한 값을 요소라고 부른다.
0이상의 정수인 Index를 갖는다.

JS에 배열이라는 type은 존재하지않는다. 배열은 객체 타입이다. (해시테이블로 구현된 객체이다.)


자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조인데(밀집배열) 자바스크립트의 배열은 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져있지 않을수도있다.(희소배열)
따라서 엄밀히 말하면 자료구조에서 말하는 일반적인 배열의 동작을 흉내낸 특수객체다.

const empty = [ ,2, ,4];

console.log(empty.length); //4
console.log(empty) // [비어 있음, 2, 비어 있음, 4]

const arr = new Array(2);
console.log(arr) // [비어 있음 × 2]

const arr10 = Array(10); //new 연산자 없어도 생성자 함수로 동작
console.log(arr10) // [비어 있음 × 10]

 

Array.of

인수를 요소로 갖는 배열을 생성

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

 

Array.from

유사배열객체, 이터러블객체를 인수로 전달받아 배열로 변환하여 반환.
두번째인수에 콜백함수를 전달할수있다.(콜백 반환값으로 구성된 배열을 반환함)

Array.from('Hi') // ['H','i']
Array.from({0:'a',1:'b'}) // ['a','b']

Array.from({length:3},(_,idx) => idx); // [0,1,2]

 

프로퍼티는 length에 영향을 주지않는다

const arr = [1,2,3];

arr['1'] = 2; 
arr['test'] = 3;

console.log(arr) // [비어있음, 2, test:3]
console.log(arr,length) // 2

 

배열은 사실 객체이므로 delete 연산자를 사용할 수 있다.

희소배열이 되므로 사용하지않는게 좋다.

const arr = [1,2,3];

delete arr[1];
console.log(arr); // [1, 비어 있음, 3]

 

Array.isArray

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

 

Array.prototype.concat

기준이 되는 배열에, 인자로 넘긴 배열을 합쳐 원본배열을 변경하지않고 새로운 배열을 반환한다.
** concat 메서드는 스프레드 문법으로 대체할 수 있다.

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

const concatArr1 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
const concatArr2 = [...arr1, ...arr2] // [1, 2, 3, 4, 5, 6]

concatArr1 === concatArr2 // false

 

Array.prototype.splice

원본 배열을 변경하고, 변경한 배열을 리턴한다.
세번째 요소를 넘기지 않으면 제거된 요소를 교체하지 않고 제거만 한다.

origin = [1,2,3]
const test = origin.splice(0,1,10,11);

console.log(origin) // [10, 11, 2, 3]
console.log(test) // [1]
// 0번째 인덱스부터 1번째 인덱스, 1인 값을 10, 11로 교체하고 1이 들어있는 배열을 반환

 

Array.prototype.slice

인수로 전달된 범위의 요소를 복사하여 배열로 반환. 원본 배열은 변경되지 않는다.
인수를 생략하면 원본 배열의 복사본을 반환한다 (얕은복사)

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

arr.slice(0,1); // 0번째부터 1까지(index 1 미포함) [1]
arr.slice(1,3); // 1번째부터 3까지(index 3 미포함) [2,3]

 

Array.prototype.flat

ES10에서 도입. 인수로 전달한만큼 재귀적으로 배열을 평탄화 한다. 기본값은 1

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

 

...529~551

반응형