Javascript 배열 다루기 (1)

pds·2022년 11월 8일
0

TIL

목록 보기
2/60
post-thumbnail

배열 기본

  • 배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형임

  • [] 대괄호를 사용해 생성한다.

  • 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() 주의점

  • 느리다. 맨 앞의 요소를 제거하면 뒤의 것들을 앞으로 땡겨야 하며 맨 앞에 요소를 추가하면 뒤의 것들을 뒤로 밀어야 한다.

  • 따라서 배열이 가진 요소가 많을수록(길이가 길 수록) 수행속도가 느려지고 메모리 연산이 많아지기 때문에 주의해야함

  • pushpop 은 맨 뒤의 인덱스에 대한 요소만 다루기 때문에 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]


2일차 TIL후기

자바스크립트 사용할 때 헷갈리는 것들을 항상 개발자 도구 켜서 직접 해보면서 찾고 그랬었는데.. 했던거 또 까먹고 또 까먹고 그랬었다.

특히 splice slice 이 노답 2형제는 매일 헷갈려서 매일 직접 쳐보고 사용했는데 지금은 좀 친해진 것 같다.

주제를 정해두고 공식문서랑 책 쭉 보면서 정리하니까 집중도 잘되고 기억에 오래남을 것 같다!!

내일은 입학시험 때문에 자바스크립트는 안할 것 같고 간단하게 시험 맛 좀 보고 후기를 쓸 것 같다.

내일 모레는 아직 다루지 않은 배열의 메소드들을 마저 다룰 생각이다!

Reference

profile
강해지고 싶은 주니어 프론트엔드 개발자

0개의 댓글