JavaScript

[js] JS - with 키워드 - 객체 이용해 구문작성 (= with키워드 = 위드키워드)

목차

  1. with 예제 - 객체를 이용해 구문 작성
  2. with 정의
  3. with 구문

※ 폐기예고(Deprecated) 된 키워드이니 사용 금지. !!
※ 전문가들이 사용 금지 권유하는 키워드(eval/with) 중 하나. ㅡㅡ;

 

with 예제 - 객체를 이용해 구문 작성

 

<script>

var obj = {

    site: "홈짱닷컴",

    host: "Homzzang.com",

    open: 2012

}

 

with (obj) {

    console.log(site === "홈짱닷컴"); // true

    console.log(host === "homzzang.com"); // false

    console.log(open === "2012"); // false

    

    // 객체값 재설정

    host = "homzzang.com";

    open = "2012";

    role = "홈페이지 제작관리";    

}

 

console.log(obj.host === "homzzang.com"); // true    

console.log(obj.open === "2012"); // true

console.log(obj.role === "홈페이지 제작관리"); // false

</script>

 

결과보기


PS. 마지막 값이 false인 이유

 

  • host와 open은 원래 객체에 있던 속성인데, role은 with문 안에서 obj 객체에 없던 속성을 선언한 것이기 때문임.
  • with 문은 JavaScript에서 사용을 권장하지 않는 기능 중 하나이며, 코드를 읽기 어렵게 만들고 예상치 못한 동작을 발생시킬 수 있으므로 피하는 것이 좋음. 
  • with 문은 변수를 참조할 때 현재 스코프에 변수가 없으면 전역 스코프에서 변수를 찾으려고 시도함. 따라서 with 문 내에서 role을 선언할 때 실제로는 전역 스코프에 있는 role 변수가 만들어지게 됨.
  • 따라서, obj.role === "홈페이지 제작관리"를 평가할 때, obj 객체 내에 role 속성은 생성되지 않았으므로 전역 스코프에서 role 변수를 찾게 되고, 이 변수는 "홈페이지 제작관리"가 아닌 이전 값으로 남아 있을 것임.
  • 위와 같은 이유로 obj.role === "홈페이지 제작관리"는 false를 반환함. with 문은 코드를 읽기 어렵게 만들고 예기치 못한 부작용을 초래할 수 있으므로 사용을 피하는 것이 좋음. 대신에 명시적으로 객체 속성에 접근하는 것이 권장됨.

 

 

 


with 정의

 

객체를 매개변수로 받아서, 해당 객체를 이용해 다음에 오는 구문에 적용.

 


 

1.

사용폐기 된 코드이니, 사용 금지.

 

2.

MDN with 예제보기
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with

 

 

with 구문

 

with (object) {

    statement;

}


PS. statement가 단일구문일 경우, 중괄호 생략 가능.


[속성값]

 

object

필수. 객체

 



분류 제목
js JS - JS링크종류 / 이동주소 숨기기 / 팝업창 크기 조절 (= 음악방송링크 창크기 지정) ★ oncli…
js JS - 유튜브 동영상 (전체재생시간/현재재생시간) 체크 ※ youtube iframe (유튜브 아이프레임)…
js JS - contentDocument 속성 - 아이프레임(iframe)에 의해 생성된 document 객체 …
js JS - contentWindow 속성 - iframe (아이프레임)에 의해 생성된 window 객체 반환 …
js JS - 최대 입력 가능한 (문자열/숫자) 길이/개수 설정 ※ 음수 부호는 카운트에서 제외
js JS - autocomplete 속성 - INPUT 텍스트 자동완성 설정/반환 (= autocomplete속…
js JS - autofocus 속성 - INPUT 텍스트 자동포커스 설정/반환 (= autofocus속성 = 오…
js JS - defaultValue 속성 - INPUT 텍스트필드의 기본값 설정/반환 (= defaultValu…
js JS - disabled 속성 - INPUT 텍스트필드 비활성화 설정/반환 (= disabled속성 = 디스…
js JS - form 속성 - INPUT 텍스트 필드 포함하는 FORM 객체 반환 (= form속성 = 폼속성)…
js JS - list 속성 - INPUT 텍스트 필드에 입력 가능한 datalis(데이터리스트)t에 대한 참조 …
js JS - maxLength 속성 ★ - INPUT 입력 가능 최대 글자수 설정/반환 (= maxLength속…
js JS - name 속성 - INPUT 텍스트 필드의 네임 설정/반환 (= name속성 = 네임속성) ※ 인풋…
js JS - pattern 속성 - INPUT 텍스트 정규식패턴 설정/반환 (= pattern속성 = 패턴속성)…
js JS - placeholder 속성 - INPUT 텍스트 플레이스홀더 설정/반환 (= placeholder속…
3/5
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱닷컴 PC버전 로그인