자바스크립트 완벽가이드 - 6.18 with

지난 4장에서 변수의 유효 범위와 유효 범위 체인(변수 이름 판별을 위해 순서대로 검색되는 객체 리스트)에 대해 논한 바 있다. 

with 문은 유효 범위 체인을 임시로 변경하려 할 때 쓰인다. 

문법은 다음과 같다.

with (객체)

문장

위 문장은 유효 범위 체인의 첫머리에 '객체'를 추가한다. 그러고 나서 '문장' 을 실행한 다음,

유효 범위 체인을 원래의 상태로 되돌려 놓는다.

실제 코딩에서 ith 문을 사용하면 상당히 많은 양의 타이핑을 절약할 수 있다.

 

예를 들어, 클라이언트 측 자바스크립트에서는 매우 깊이 중첩된 객체 계층 구조를 다루는 일이 무척 흔하다. 일례로 HTML 폼에서 어떤 엘리먼트에 접근하려면 아래와 같은 표현식을 타이핑해야 한다.

frames[1].document.forms[0].address.value

위의 폼을 여러 번 접근해야 한다면 with 문을 사용해서 유요 범위 체인에 위의 폼을 추가하는 것이 편할 수 있다.

with (frames[1].document.forms[0]) {

// 여기선 폼 엘리먼트에 직접 접근할 수 있다. 예를 들어보자.
name.value = "";
address.value = "";
email.value = "";

}

위와 같은 기법으로 여러분의 타이핑을 절감할 수 있다. 폼 프로퍼티 이름에 각각 frames[1].document.forms[0] 같은 접두사를 더이상 붙이지 않아도 된다. with에 의해 추가된 객체는 일시적으로 유효 범위 체인의 일부가 된다. 자바스크립트가 address 같은 식별자를 판별하려고 유효 범위 체인을 검색하면 임시로 추가된 이 객체를 발견한다.

위와 같이 with 문을 사용하면 가끔 편리할 때가 있음에도, 많은 사람이 with 문을 사용하기 어려워 한다.

with를 사용하는 자바스크립트 코드는 최적화하기가 어렵기 때문에, with 문을 사용하지 않고 작성된 동등한 코드에 비해 느리게 실행될 수 있다. 게다가 with 문 내부에서 함수 정의나 변수 초기화를 했다면 비직관적이고 예기치 않은 작동을 불러일으킬 수 있다.^[각주:1] 이러한 이유로 인해 with 문은 가급적 사용하지 않는 편이 좋다.

타이핑을 절약할 수 있는 또 다른 완전히 적법한 방법을 소개하려 한다.

직전의 코드를 이 방법으로 다시 작성하면 다음과 같다.

var form = frames[1].document.forms[0];
form.name.value = "";
form.address.value = "";
form.email.value = "";

1. 이 작동과 그에 대한 원인을 여기서 설명하기엔 너무나도 복잡하다. [본문으로]