[javascript 기초 강좌] 11. 객체 관련 명령어 [ for ~ in, with ]

 

 

 

객체 관련 명령어에 대해서 알아봅니다.

 

객체 관련 명령어는 for ~ in 과 with 가 있습니다.

 

for ~ in 문은 반복적으로 객체의 변수를 출력하는 명령어는입니다.

 

with 문은 객체변수를 미리 정의하여 보다 간편하게 사용할 수 있게 만듭니다. 객체변수의 유효범위 체인을 변경하는데 사용됩니다.

 

 

 

먼저 for ~ in 문에 대해 설명합니다.

작성방법은 다음과 같습니다.

for(변수 in 객체변수){
    처리할 내용들;
    ...
}

 

 

예제 소스입니다.

function Car(col, num){
    this.color = col;
    this.number = num;
}
 
myCar = new Car("파랑","서울 35 다 8984");
 
document.write("myCar 객체의 속성을 출력합니다.<p>");
 
for(var x in myCar){                                  // 맴버변수 수만큼 출력
    document.write(x + " : " + myCar[x] + "<br>");    // myCar[x] == myCar["color"]
}

 

1# : Car 이라는 생성자 함수를 만듭니다.

6# : 클래스를 생성합니다.

10# : 클래스 변수 myCar 를 이용하여 for ~ in 문을 작성합니다. x는 루프를 돌 클래스의 프로퍼티(내부 변수) 입니다.

 

결과는 다음과 같습니다.

 

 

 

다음으로는 with 문에 대해 설명합니다.

설명하기 앞서 구글에서 흥미로은 정보들을 얻었는데 with 문은 사용을 하지 않는 것을 권고한다고 합니다. 객체변수들을 미리 정의하여 보다 간편하게 사용할 수 는 있지만 유효범위를 설정한다는 것은 여러 문제를 일으킬 수 있기 때문입니다. with문으로 새로운 유효범위 scope를 설정하면 추가적인 자원이 소모될 것이고 이는 곧 퍼포먼스와 이어지기 때문이다라는 이유가 가장 많았습니다.

 

하지만 with문이 무엇인지 어떻게 사용해야 하는지는 알고 지나가는 것을 추천합니다.

 

작성방법입니다.

with(객체변수){
    속성명 = 값;    // 객체변수.속성명
    메소드명();     // 객체변수. 메소드명()
}

 

예제입니다.

function Car(col, num){
    this.color = col;
    this.number = num;
}
 
myCar = new Car("파랑" , "서울 35 다 8984");
 
with(document){
    write("myCar 객체의 속성을 출력합니다.<p>");
    
    with(myCar){
            write("색깔(color) : " +color+ "<br>");
            write("번호(number) : " +number+ "<br>");
        }
}

1# : Car 이라는 생성자 함수를 만듭니다.

6# : 클래스를 생성합니다.

8# : document 객체를 이용하여 with문을 작성합니다.

9# : write 함수만으로 화면에 text를 출력할 수 있습니다. 본래는 document.write("내용"); 이러한 방법으로 사용해야 하는데 document 객체는 이미 with문으로 하여 유효범위가 설정되었기 때문에 생략 가능합니다.

11# : 클래스 변수 myCar를 이용하여 with문을 작성합니다.

12# : myCar 변수의 유효범위가 설정되었기 때문에 myCar의 프로퍼티(내부 변수)를 그냥 써주는 것만으로도 myCar의 프로퍼티에 접근 할 수 있습니다.

 

결과는 다음과 같습니다.