[📆 2025.04.09] Array, array‐like object, two‐dimensional array, for...in, vs for...of - [멋쟁이사자처럼부트캠프 프론트엔드13기]

📚 오늘 공부한 내용

• 참조 타입
• 유사 배열 객체(Like-Array Object)
• 2차원 배열, 다차원 배열
• for in, for of

---

🧠 배운 점 & 정리

• 참조 타입 (Array, 배열)

  • 배열
    • 하나의 변수에 여러개의 값을 지정하는 데이터 구조
    • 순서정보 (index) 를 이용하여 각 요소를 참조 (0 부터 시작)
  • 생성
    • 크기를 미리 지정하지 않음
    • Array 생성자 함수 로 생성
      • var score = new Array();
    • JSON 표기법 이용
      • var score = [];
  • 예제
    • 초기화
      • Array 클래스로 생성 및 초기화
        • var score = new Array(90, 70, 100);
      • JSON 표기법으로 생성 및 초기화
        • var score = [ 90 , 70 , 100];
    • 요소추가
      • index 나 배열 메소드 이용
      • score[3] = 86;
    • 요소 읽기
      • index 나 배열 메소드 이용
      • score[3]
    • 배열 요소의 수
      • length 속성
    • push vs length의 차이
      하드 코딩으로 5 6 7 등등 이렇게 하면 배열이 바뀌게 된다면 다시 수정을 해야 한다 그래서 알아서 찾아주는 length를 사용함, 다만 push는 기본적으로 배열의 마지막에 데이터를 추가 하는것이기 때문에 push를 사용하는게 좋다
      ✅ arr[arr.length] = 값 vs arr.push(값) 비교표

      항목	arr[arr.length] = 값	arr.push(값)
      기본 개념	length를 사용해 마지막에 수동으로 값 추가	마지막에 값을 자동으로 추가
      직관성	❌ 덜 직관적, 가독성 낮음	✅ 직관적이고 가독성 좋음
      다중 추가	❌ 불가능 (하나씩만 가능)	✅ 가능 (arr.push(1, 2, 3))
      체이닝 가능 여부	❌ 없음	✅ 가능 (arr.push(1).push(2))
      사용 추천도	❌ 가급적 지양	✅ 배열 마지막에 추가할 땐 적극 사용
      코드 유지보수	❌ 인덱스를 하드코딩하면 수정 어려움	✅ 자동 인덱싱으로 유지보수 쉬움

      • gpt 답변
        결론부터 말하면 arr[arr.length] = 값 와 arr.push(값) 는 거의 같은 동작을 해.

        둘 다 배열의 마지막에 값을 추가하는 방식이야.

        하지만 약간의 차이점이 존재해! 아래에 정리해줄게. 👇

        ---

        ✅ 공통점

        항목	설명
        동작	배열의 맨 마지막 인덱스에 값을 추가함
        결과	배열 길이가 증가하고, 마지막에 값이 추가됨

        예:

        let arr = [1, 2, 3];
        
        arr[arr.length] = 500; // arr은 [1, 2, 3, 500]
        arr.push(600);         // arr은 [1, 2, 3, 500, 600]

        ---

        ⚠️ 차이점

        구분	arr.push(value)	arr[arr.length] = value
        직관성	✅ 더 직관적이고 명확	❌ 덜 직관적
        메서드 호출	push()는 함수 호출	대괄호를 이용한 직접 할당
        다중 추가	여러 값을 동시에 추가 가능 arr.push(1, 2)	❌ 한 번에 하나만 추가 가능
        Array.prototype 함수	push는 JS 내부 메서드라 체이닝 가능	불가능

        ---

        ✅ 예시 비교

        let a = [1, 2];
        
        a.push(3, 4); // 가능
        console.log(a); // [1, 2, 3, 4]
        
        a[a.length] = 5; // 가능
        console.log(a); // [1, 2, 3, 4, 5]
        
        a[a.length] = 6, 7; // 이렇게 하면 6만 들어감 (주의)
        console.log(a); // [1, 2, 3, 4, 5, 6]

        ---

        👀 실무에서는?

        • push() 를 더 많이 써!
        • 가독성, 직관성, 안정성 면에서 더 좋기 때문이야.

      • 정리

        • 배열의 마지막에 값을 추가하고 싶을 때, 인덱스를 하드코딩하지 말자.
          • 예: arr[5] = 10 ← 배열이 바뀌면 다시 수정해야 하므로 비효율적이다.
        • 대신, arr.length를 사용하면 마지막 인덱스를 자동으로 찾아 추가할 수 있다.
          • 예: arr[arr.length] = 10
        • 그러나 더 직관적이고 가독성 좋은 방법은 push() 메서드를 사용하는 것이다.
          • 예: arr.push(10)
        • push()는 다음과 같은 장점이 있다:
          • 배열 끝에 값을 자동으로 추가한다.
          • 여러 값을 동시에 추가할 수 있다. (예: arr.push(1, 2, 3))
          • 코드 가독성과 유지보수가 쉽다.
        • 따라서 배열의 끝에 값을 추가할 땐 push()를 사용하자!

---

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

  • 유사 배열 객체란
    • 배열과 비슷하게 사용할 수 있는 객체
    • 사용법을 보면 배열 같지만 실제 배열이 아닌 일반 객체
  • 특징
    • index 를 통한 접근 : 배열처럼 index 를 사용해서 각 요소에 접근 가능
    • length 속성 : 배열처럼 length 속성이 있어서 for 구문을 이용하면 모든 요소 참조 가능
    • 배열 메서드 없음 : forEach, map 등의 배열 메서드가 없음
    • arguments, NodeList, String 등의 내장 객체가 유사 배열 객체로 만들어져 있음 ⇒ 추후 배울 예정
  • ❗필요한 이유
    • 주로 읽기를 목적으로 사용되는 객체일 경우 배열 요소를 제어하는 메서드가 필요 없음
    • 배열보다 더 적은 비용으로 생성 가능
  • 배열로 변환
    Array.from(obj) 을 사용하면 쉽게 배열로 변환 가능
    
  그치만~~ 배열대신에 유사배열 객체를 직접 만들어서 쓸 일은 많지 않다. 마치 배열인거 처럼 쓰고 있지만 알고보니 배열이 아니였다…..

  • 예시

    const arr = {
      length: 3,
      0: "orange",
      1: "yellow",
      2: "green",
    };
    
    printArr(arr);

---

• 2차원 배열, 다차원 배열

  • 배열 안에 또 다른 배열들이 들어있는 배열
  • 행렬이나 테이블 형식의 데이터를 표현할 수 있음

  구분 ⇒ k ∨ i	[0]	[1]	[2]	[3]
  [0]	2	4	6	8
  [1]	3	6	9	12
  [2]	4	8	12	16
  [3]	5	10	15	20

  var numbers = [
    [2, 4, 6, 8 ],
    [3, 6, 9, 12],
    [4, 8, 12, 36],
    [5, 10, 15, 20]
  ];

  // 1차원 배열 출력하기
  console.log(numbers[0]); // [2, 4, 6, 8 ]
  console.log(numbers[1]); // [3, 6, 9, 12]
  console.log(numbers[2]); // [4, 8, 12, 36]
  console.log(numbers[3]); // [5, 10, 15, 20]

  // 2차원 배열 출력하기
  console.log(numbers[0][0]); // 2
  console.log(numbers[0][1]); // 4
  console.log(numbers[1][0]); // 3
  console.log(numbers[3][2]); // 15

---

• for in, for of

  • for of 관련 문서
    
    for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

    // 객체 생성
    const array1 = ["a", "b", "c"];
    
    // for of
    for (const element of array1) {
      console.log(element); 
    }
    /*
    출력 값
    a, b, c
    */  

  • for in 관련문서
    
    for...in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)

    // 객체 생성
    const object = { a: 1, b: 2, c: 3 };
    
    for (const property in object) {
      console.log(`${property}: ${object[property]}`);
    }
    
    /*
    출력 값
    "a: 1"
    "b: 2"
    "c: 3"
    */ 

  • 📌 for...in vs for...of

    한줄요약: for...in은 객체의 이름표(키)를 하나씩 꺼낼 때 쓰고, for...of는 배열이나 글자처럼 하나씩 꺼낼 수 있는 것의 내용(값)을 하나씩 꺼낼 때 써! ✅

    구분	for...in	for...of
    🔍 용도	객체의 키(key)를 반복	배열, 문자열 등 이터러블(iterable)의 값(value)을 반복
    🔁 반복 대상	객체, 배열 (키 기준)	배열, 문자열, Map, Set 등 (값 기준)
    🔑 반환값	속성 이름(문자열) 또는 인덱스	값(value)
    ⚠️ 주의사항	배열 순회 시 인덱스를 문자열로 반환하므로 주의 필요	객체에는 사용할 수 없음 (오류 발생)

    ---

    💡 언제 어떤 걸 써야 할까?
    | 상황 | 사용 |
    | --- | --- |
    | 객체의 key를 하나씩 순회해야 한다 | for...in |
    | 배열이나 문자열의 값만 필요하다 | for...of |

---

🔗 배웠던 파일

• 24-01 JSON 문법으로 코드 만들기
• 25 객체의 속성 관리
• 26 배열 생성, 읽기, 쓰기
• 27 for of, for in
• 28 유사 배열 객체
• 29-01 2차원 배열

---

❓ 생긴 질문 / 더 알아볼 것

• 배열에 대해서 조금 더 자세히 알아보고 공부해야겠다...수업 중간 중간에 조금 졸았던 것 같아서 막바지에는 따라가기 힘들었던 경향이 있다. 최대한 빨리 따라잡을 수 있도록 딥다이브책이나 공식문서를 보면서 익혀가야겠다!

---

🔗 참고 자료

• Array 객체 | mdn
• 유사배열 | MJ Kim 블로그
• n차원 배열 | freecodecamp
• for...in | mdn
• 노션 정리 링크