JavaScript의 WITH 문(with statement)은 특정 코드 블록 내에서 사용할 기본 객체(default object)를 지정하기 위해 사용됩니다. WITH 문을 활용하면 길고 반복적인 객체 참조를 생략할 수 있어 코드를 훨씬 간결하게 작성할 수 있습니다.
WITH 문이 실행되면 지정된 객체가 스코프 체인(scope chain)의 맨 앞에 추가됩니다. 따라서 블록 내부에서는 객체 이름 없이 해당 객체의 속성에 곧바로 접근할 수 있습니다.
기본 문법
with (객체) {
// 객체 이름 없이 속성에 직접 접근 가능
}예제 코드
다음은 JavaScript에서 WITH 문을 사용하는 예제입니다. 버튼을 클릭하면 obj 객체의 firstName과 lastName 속성을 WITH 문으로 간단하게 참조합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript with statement</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 obj 객체의 first 및 lastname 속성 값을 확인할 수 있습니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
};
BtnEle.addEventListener("click", () => {
with (obj) {
resEle.innerHTML = "Welcome " + firstName + " " + lastName;
}
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 WITH 문 덕분에 obj.를 붙이지 않고도 firstName과 lastName 속성에 바로 접근하여 아래와 같은 결과가 표시됩니다.
WITH 문 사용 시 주의 사항
WITH 문은 코드를 짧게 만들어 주지만 몇 가지 단점이 있습니다.
- 코드만 보고 어떤 객체의 속성에 접근하는지 파악하기 어려워 가독성이 떨어집니다.
- 변수 탐색 과정이 추가되어 성능이 저하될 수 있습니다.
- 디버깅과 최적화가 어려워집니다.
실제로 ECMAScript 5부터 엄격 모드(strict mode)에서는 WITH 문의 사용이 금지되어 있습니다. 현대 JavaScript 개발에서는 구조 분해 할당(destructuring)이나 짧은 변수 참조 등을 대신 사용하는 것이 권장됩니다.