[TIL] Javascript 배열과 유사배열

자바스크립트에서 유사배열과 배열의 차이는 무엇일까?
유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까?

 

배열(Array)이란?

배열은 참조 자료형 데이터 타입으로 한개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.

 

var arr = [ 1, '2', ture ];
var arr1 = [ undefined, null, false, NaN, 1000 ];

배열의 값은 어떤 값이라도 배열의 요소로 추가할 수 있으며 종류가 다른 값들도 함께 담을 수 있다.

 

[1, 2, 3, 4, 5]라는 배열이 있을 때

배열은 순서가 있는 값을 의미하며 배열에 들어있는 값을 요소(element)라고 한다.

배열의 순서는 인덱스(index)라고 하고 배열의 순서는 0부터 시작된다.

0번째 index , 1번째 index, 2번째 index…배열 정의는 대괄호[](square bracket)로 한다.

배열 안에 각각의 요소(elemet)는 쉼표(comma)로 구분한다.

 

배열에 접근하는 방법

배열을 조회하려면 index를 이용한다. 3번째 index를 조회하려면 arr[3] 이렇게 사용한다. (조회 결과는 4) 배열을 변경할 때도 index를 이용한다. 3번째 index의 값을 200으로 변경하려면 arr[3] = 200 이렇게 사용한다. (변경된 결과는 [1, 2, 3, 200, 5])

 

배열 사용시 주의점

var points = new Array(40, 100, 1, 5, 25, 10); 	// Bad
var points = [40, 100, 1, 5, 25, 10];          	// Good

생성자 new Array() 대신 []를 사용하는것이 좋다.

 

 

유사 배열 객체(Array-Like Object)란?

배열처럼 보이지만 키 값이 숫자로 이뤄져있고, length 프로퍼티가 반드시 존재하는 객체

let arr = {
  0: 'i',
  1: 'am',
  2: 'iron',
  3: 'man',
  length: 4
};

 

예시

HTML

<div class="text">Hello</div>
<div class="text">World</div>
<div class="text">I'm</div>
<div class="text">Array-Like Object</div>

JavaScript

const texts = document.querySelectorAll('.text');
console.log(texts);

결과

{
  0: div.text,
  1: div.text,
  2: div.text,
  3: div.text,
  length: 4,
}

유사 배열 객체

 

• 유사 배열 객체를 직접 사용한다기 보다는 브라우저가 데이터를 유사배열로 반환하기때문에 알아야 하는 개념이다.
• 일반 객체와 달리 forEach, map, filter, reduce 같은 배열 메서드를 사용할 수 없다.
• 일반 객체처럼 프로퍼티로 접근이 불가능하다.
• 객체처럼 index를 이용한 접근이 가능하다.
• 대표적으로 문자열, DOM 객체 (NodeList 등)이 있다.

 

유사배열을 수정하는 방법

1. Array.from() 메서드는 유사 배열 객체(array-like object)을 얕게 복사해 새로운Array 객체를 만든다.
2. 배열에 내포되어있는 기능들을 유사배열에서 사용하기 위해 ‘call, apply, bind’를 사용한다. (apply와 call은 함수를 호출하는 방법 중 하나로, 다른 객체에 내포되어있는 함수를 내것처럼 사용할 수 있게 해준다.)

 

<유사배열을 만드는 방법>

1. 객체 리터럴인 {} 안에 인덱스를 프로퍼티¹로 하여 값을 적는다.
2. 값의 개수만큼 length 프로퍼티만 추가하면 됩니다. 

const group1 = {
    0: '매버릭',
    1: '루스터',
    2: '행맨',
    3: '피닉스',
    
    length: 4,
  };
  
  for (let i = 0; i < group1.length; i++) {

    console.log(group1[i]);
  }
	// 매버릭, 루스터, 행맨,  피닉스

<유사배열을 수정하는 방법>

group1.push('아이스맨'); //TypeError: group1.push is not a function
						//유사배열객체는 push()매서드 사용할 수 없다.

Array.prototype.push.apply(group1,['아이스맨']);
Array.prototype.push.call(group1, '코요테');

console.log(group1); 
//{'0': '매버릭', '1': '루스터', '2': '행맨', '3': '피닉스','4': '아이스맨', '5': '피닉스', length: 6 }

let arr = Array.from(group1); //arr 변수에 배열의 형태로 저장할 수 있다.
arr.push('페이백'); //arr는 배열이기 때문에 push 매소드를 사용할 수 있다.
console.log(arr); //[ '매버릭', '루스터', '행맨', '피닉스', '페이백' ]

 

 

 

 

💡Reference💡

https://velog.io/@surim014/웹을-움직이는-근육-JavaScript란-무엇인가-part-7-Arrays

https://velog.io/@onezerokang/유사-배열-객체와-배열의-차이

https://intrepidgeeks.com/tutorial/javascript-similar-array

https://hanamon.kr/javascript-배열-기초/