[React] 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요?

이경하·2022년 8월 16일
0

React

목록 보기
4/10
post-thumbnail

✍️ 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요?

👊 배열(array)

  • 관련 있는 데이터를 하나의 변수에 할당해 관리하기 위해 사용하는 데이터 타입
  • 하나의 배열은 여러 자료형을 가질 수 있는 특징

👊 유사배열(array-like object)

  • 말 그대로 배열과 유사한 객체
  • 배열같이 생겼지만 key가 숫자이고 length 속성 값을 가지고 있는 객체
    배열처럼 yoosa[0], yoosa[1], yoosa.length 같은 것 활용 가능
    하지만 배열 메서드 사용 불가
  • 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고싶을때 사용
👉 유사배열을 사용하기 위한 조건
1. 숫자 형태의 indexing이 가능
   - 각 요소에 0부터 시작하는 숫자 형태의 index가 있어야 한다.

2. length 프로퍼티가 있다
   - 객체가 가지고 있는 요소의 갯수를 저장하는 length 프로퍼티는 배열의 특징이라고 할 수 있는데,
     유사 배열 역시 length 프로퍼티가 있어야 유사배열이라고 할 수 있다
     ex) let arrayLikeObject = { 0: 'a', 1: 'b', 2: 'c', length: 3 }
     위와 같이 key가 숫자로 되어있고 length프로퍼티를 가지고 있으면 유사배열이라고 할 수 있다.

3. 배열의 기본 메소드를 사용할 수 없다
   - 유사 배열이 배열과 다른 가장 큰 이유는 기본적은 배열의 메소드를 사용할 수 없다
     이 점이 유사배열을 활용하는 목적이 되기도 하는데,
     내부의 요소들을 배열처럼 다루지만 배열의 메소드 사용은 막고 싶은 경우에는
     일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열을 만들어 활용하기도 한다.

4. Array.isArray(유사배열) == false
   - 유사 배열은 배열과 비슷하지만 배열은 아니기 때문에 false를 리턴

✍️ 유사배열에서 배열의 메서드를 사용하고 싶을때

👊 Array.from()

유사 배열 객체나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 생성(MDN), Array.from()으로 유사 배열 객체이 있는 value를 복사해 배열로 만들면 배열 메서드를 사용 가능

예제: 클릭하기
- 얕은 복사
  변수를 복사했다고 생각했지만 실제로는 연결되어있는 것을 의미
  좀 더 자세히 이야기하자면,변수를 복사했지만 참조한 곳은 동일하기 때문에
  같은 변수를 가리키고 있는 것
  
- 깊은 복사 copy.deepcopy
  깊은 복사를 사용하기 위해서는 copy 모듈의 deepcopy 함수를 사용해야 함
  깊은 복사는 내부에 있는 객체 모두 새롭게 만들어주는 작업
  모든 것 다 새롭게 복사. 그냥 독립적이 되어버림.
  

👊 forEach 메서드

forEach 메서드를 빌려 call, apply, bind 함수를 호출하는 방법 중 하나로, 다른 객체에 내포되어있는 함수를 내 것처럼 사용할 수 있도록 함

메서드설명: 클릭하기
profile
경듀님

0개의 댓글