배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형임
[]
대괄호를 사용해 생성한다.
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(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(begin, end): slicedArray
begin
부터 end
인덱스 직전까지에 대한 복사본을 반환하며 원본 배열은 변경되지 않는다.start
추출을 시작할 인덱스 번호
undefined
일 경우 첫 번째 인덱스로 설정된다.
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]
자바스크립트 사용할 때 헷갈리는 것들을 항상 개발자 도구 켜서 직접 해보면서 찾고 그랬었는데.. 했던거 또 까먹고 또 까먹고 그랬었다.
특히 splice
slice
이 노답 2형제는 매일 헷갈려서 매일 직접 쳐보고 사용했는데 지금은 좀 친해진 것 같다.
주제를 정해두고 공식문서랑 책 쭉 보면서 정리하니까 집중도 잘되고 기억에 오래남을 것 같다!!
내일은 입학시험 때문에 자바스크립트는 안할 것 같고 간단하게 시험 맛 좀 보고 후기를 쓸 것 같다.
내일 모레는 아직 다루지 않은 배열의 메소드들을 마저 다룰 생각이다!