ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ‘for…in’ 반복문
    Study/JavaScript 2020. 6. 2. 14:09

    for..in 반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다. 

    for..in은 앞서 학습했던 for(;;) 반복문과는 완전히 다릅니다.

     

    for (key in object) {
      // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
    }

     

    아래 예시를 실행하면 객체 user의 모든 프로퍼티가 출력됩니다.

     

    let user = {
      name: "John",
      age: 30,
      isAdmin: true
    };
    
    for (let key in user) {
      // 키
      alert( key );  // name, age, isAdmin
      // 키에 해당하는 값
      alert( user[key] ); // John, 30, true
    }

    for..in 반복문에서도 for(;;)문처럼

    반복 변수(looping variable)를 선언(let key)했다는 점에 주목해 주시기 바랍니다.

     

    반복 변수명은 자유롭게 정할 수 있습니다. 'for (let prop in obj)'같이 key 말고 다른 변수명을 사용해도 괜찮습니다.

     

    객체 정렬 방식

    객체와 객체 프로퍼티를 다루다 보면 "프로퍼티엔 순서가 있을까?"라는 의문이 생기기 마련입니다.

     

    반복문은 프로퍼티를 추가한 순서대로 실행될지, 그리고 이 순서는 항상 동일할지 궁금해지죠.

    답은 간단합니다. 객체는 '특별한 방식으로 정렬’됩니다.

    정수 프로퍼티(integer property)는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬됩니다.

    자세한 내용은 예제를 통해 살펴봅시다.

    아래 객체엔 국제전화 나라 번호가 담겨있습니다.

     

     

    let codes = {
      "49": "독일",
      "41": "스위스",
      "44": "영국",
      // ..,
      "1": "미국"
    };
    
    for (let code in codes) {
      alert(code); // 1, 41, 44, 49
    }

     

    현재 개발 중인 애플리케이션의 주 사용자가 독일인이라고 가정해 봅시다.

    나라 번호를 선택하는 화면에서 49가 맨 앞에 오도록 하는 게 좋을 겁니다.

    그런데 코드를 실행해 보면 예상과는 전혀 다른 결과가 출력됩니다.

    • 미국(1)이 첫 번째로 출력됩니다.
    • 그 뒤로 스위스(41), 영국(44), 독일(49)이 차례대로 출력됩니다.

    이유는 나라 번호(키)가 정수이어서 1, 41, 44, 49 순으로 프로퍼티가 자동 정렬되었기 때문입니다.

     

     

    한편, 키가 정수가 아닌 경우엔 작성된 순서대로 프로퍼티가 나열됩니다. 예시를 살펴봅시다.

     

    let user = {
      name: "John",
      surname: "Smith"
    };
    user.age = 25; // 프로퍼티를 하나 추가합니다.
    
    // 정수 프로퍼티가 아닌 프로퍼티는 추가된 순서대로 나열됩니다.
    for (let prop in user) {
      alert( prop ); // name, surname, age
    }

     

    위 예시에서 49(독일 나라 번호)를 가장 위에 출력되도록 하려면

    나라 번호가 정수로 취급되지 않도록 속임수를 쓰면 됩니다. 각 나라 번호 앞에 "+"를 붙여봅시다.

    아래 같이 말이죠.

     

    let codes = {
      "+49": "독일",
      "+41": "스위스",
      "+44": "영국",
      // ..,
      "+1": "미국"
    };
    
    for (let code in codes) {
      alert( +code ); // 49, 41, 44, 1
    }

     

    이제 원하는 대로 독일 나라 번호가 가장 먼저 출력되는 것을 확인할 수 있습니다.

     

     

     

     

    출처 :

    https://ko.javascript.info/object#ref-738

     

    객체

     

    ko.javascript.info

     

    'Study > JavaScript' 카테고리의 다른 글

    'new' 연산자와 생성자 함수  (0) 2020.06.03
    method and this  (0) 2020.06.02
    크롬으로 디버깅하기  (1) 2020.06.02
    함수선언식 vs 함수표현식  (0) 2020.06.02
    Json이란 무엇인가.  (0) 2020.06.01

    댓글

Designed by Tistory.