Javascript 배열 다루기 (1)

pds·2022년 11월 8일

TIL

목록 보기

2/60

배열 기본

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형임
[] 대괄호를 사용해 생성한다.
key가 순서가 있는 index이고 이를 활용해 접근할 수 있는 특수한 객체형 자료라고 볼 수 있음
- 순서가 있는 자료를 저장하고 관리하는 용도에 특화된 객체라고 생각하자

typeof([1, 2, 3, 'a', true]); // object
// 객체임
const array = [1,2,3];
const array2 = array;
array2[0] = 9999;
console.log(array); [9999, 2, 3];

배열 요소 접근하기

인덱스를 통해 접근 가능

const a = [1,2,3];
a[0]; // 1

배열 길이 확인하기

const a = [1,2,3];
a.length; // 3

특정 요소의 위치 찾기


const a = [1,2,1,3,1];
// 맨 앞의 요소 찾기
console.log(a.indexOf(1)); //0

// 특정 인덱스 이후의 맨 앞 요소 찾기
console.log(a.indexOf(1, 1)); // 2;

// 마지막 요소 찾기
console.log(a.lastIndexOf(1)); // 4

배열 다루기

맨 뒤에 요소 추가하기

push() 함수를 사용해 현재 배열의 맨 뒤에 요소를 추가할 수 있다.

const a = [1,2,3];
a.push(4);
console.log(a); // [1,2,3,4]

인덱스를 통해 해당 위치에 요소를 추가할 수 있다.
삽입으로 인해 중간에 요소가 없는 상태가 될 경우 undefined 처리됨

const a = [1,2,3];
a[0] = 5;
a[6] = 4;
console.log(a); // [5, 2, 3, 비어 있음 × 3, 4]

맨 뒤 요소 제거하기

pop() 함수를 통해 맨 뒤 요소를 제거한다.

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

맨 앞에 요소 추가하기

unshift() 함수를 통해 맨 앞에 요소를 추가한다.
수행 시 새로운 배열의 길이를 반환해준다.

const array = [1,2,3,4,5];
array.unshift(99); // 6
console.log(array); // [99,1,2,3,4,5]
array.unshift(44,55); // 8
console.log(array); // [44,55,99,1,2,3,4,5]

맨 앞의 요소 제거하기

shift() 함수를 통해 맨 앞의 요소를 제거한다.
배열에서 제거한 요소를 반환하며 빈 배열일 경우 undefined 를 반환함

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

shift() unshift() 주의점

느리다. 맨 앞의 요소를 제거하면 뒤의 것들을 앞으로 땡겨야 하며 맨 앞에 요소를 추가하면 뒤의 것들을 뒤로 밀어야 한다.
따라서 배열이 가진 요소가 많을수록(길이가 길 수록) 수행속도가 느려지고 메모리 연산이 많아지기 때문에 주의해야함
push 와 pop 은 맨 뒤의 인덱스에 대한 요소만 다루기 때문에 1번의 연산으로 끝나며 length만 변경된다.

concat()

배열에 값 또는 배열을 이어붙인다.
기존 배열은 변경되지 않으며 추가된 새로운 배열을 반환한다.

const a = [1,2,3];
const b = "hello";
const c = [4,5];
const result = a.concat(b); // [1,2,3,"hello"]
const result2 = c.concat(a); // [4,5,1,2,3]

splice()

기존 요소를 삭제, 교체 또는 새 요소를 추가해 원본 배열을 직접 변경한다.

splice(start, deleteCount,...item): deletedArray

start

배열 변경을 시작한 인덱스 값
배열 길이보다 큰 양수값으로 설정 시 배열 마지막 인덱스부터 시작한다.
음수 입력 시 배열 끝에서부터 시작하여 우측으로 진행하며 절대값이 배열 길이보다 크면 0으로 설정됨

deleteCount

시작지점으로부터 제거할 요소의 수를 말함
생략 시 시작지점으로부터 모두 제거

item

배열에 추가할 요소들

return

지워진 요소들을 담은 배열을 리턴한다.

const a = [1,2,3,4,5];
const b = a.splice(1,3); // [1]번째 인덱스부터 3개를 지운다.
console.log(a); // [1,5]
console.log(b); // [2,3,4]

slice()

slice(begin, end): slicedArray

begin 부터 end 인덱스 직전까지에 대한 복사본을 반환하며 원본 배열은 변경되지 않는다.

start

추출을 시작할 인덱스 번호
undefined일 경우 첫 번째 인덱스로 설정된다.

end

추출을 종료할 인덱스 번호로 end 인덱스는 포함되지 않는다.

return

추출한 요소를 담는 새로운 배열

배열 다룰 때 주의점

내부 객체는 얕은 복사됨에 주의해야한다. concat이나 slice 처럼 원본이 안 바뀌고 새로운 결과를 만들어내는 것들에 대해서이다.
number, string, boolean, undefined 같은 primitive type은 복사 시 다른 메모리에 할당하기 때문에 괜찮지만 Object 같은 reference type은 얕은 복사 시 같은 주소를 가리키기 때문에 내부 값을 공유한다!

// has reference type
const defaultArray = [{a: 1}, {b: 2}];
const slicedArray = defaultArray.slice(1); // [{b: 2}]
slicedArray[0].b = 99999
console.log(defaultArray); // [{a: 1}, {b: 99999}];

// has primitive type
const array = [1,2,3];
const sliced = array.slice(0,1);
sliced[0] = 999;
console.log(array); // [1,2,3]