ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [java script]유사 배열과 배열의 차이
    React 2022. 7. 22. 16:28

     배열(Array)이란? 

    하나의 변수명 아래에 데이터 아이템의 리스트를 저장하는 간편한 방법.

     

    예시

    var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
    shopping[0] = 'tahini';
    shopping;
    // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]

     

     

     유사 배열 객체는 

    배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다.

    JS에서 querySelectorALL이나 document.body.children 유사 배열 객체에 담겨서 온다.

    유사배열은 쉽게 말해서 []로 감싸져있지만 배열이 아닌 것!

     

    유사배열 예시 

    var yoosa = {
      0: 'a',
      1: 'b',
      2: 'c',
      length: 3
    };

      JavaScript

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

     

    배열과 유사배열 둘의 차이

    유사 배열과 배열의 차이점은 객체에 length 프로퍼티와 프로퍼티 이름이

    숫자 0으로 시작하는 프로퍼티가 있다면 유사 배열입니다.

    Argument 객체와 DOM에서 요소를 가져올 때 NodeList의 경우도 유사 배열 객체입니다.

     

     

    Array.prototype 메서드 사용하기

    유사 배열 객체는 Array 프로토타입에 메서드를 사용할 수 없습니다. 따라서 Array에 프로토타입에 있는 메서드를 사용하려면 call 메서드를 통해 호출을 할 수 있습니다.

    출처: https://bearcomputer.tistory.com/35 [파란곰팅이의 컴퓨터마을:티스토리]

    let a = ["red", "green", "blue"];
    let b = {
      0: "red",
      1: "green",
      2: "blue",
      length: 3
    };
    
    Array.prototype.push.call(b,"white");
    console.log(b); // -> {0: 'red', 1: 'green', 2: 'blue', 3: 'white', length: 4}
    
    Array.prototype.forEach.call(b,(value) => console.log(value));
    // red
    // green
    // blue
    // white
    출처: https://bearcomputer.tistory.com/35 [파란곰팅이의 컴퓨터마을:티스토리]

     

    'React' 카테고리의 다른 글

    (React)useEffect에 대한 이해  (0) 2022.09.23
    리액트 훅 useCallback와 useMemo  (0) 2022.08.29
    [리액트] <video>태그와 <div> 사이에 생기는 공백  (0) 2022.08.20
    양방향 바인딩  (0) 2022.07.23
Designed by Tistory.