• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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

필수. 객체

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
js JS - 숫자를 한글로 읽기/변환
js JS - 숫자 천자리 표시 기호 쉼표(콤마) 제거 함수 (= getInt함수 = 겟인트함수)
js JS - 랜덤이미지 (= 랜덤배너)
js JS - 텍스트 첫글자만 글자색 변경 (= 맨앞글자 색상 변경)
js JS - 자바스크립트 성능 향상 위한 코드 작성법 (= JavaScript Performance)
DOM_Style JS - aspectRatio 속성 - 요소의 종횡비율(= 가로세로비율) 지정 (= aspectRatio속성…
js JS - with 키워드 - 객체 이용해 구문작성 (= with키워드 = 위드키워드)
js JS - 입력한 패스워드 확인 (보이기/숨기기) 토글 버튼 넣기
js JS - JavaScript로 (SlideUp/SlideDown) (FadeOut/FadeIn) 토글 버튼 …
DOM_Element JS - outerHTML 속성 - 속성, 시작태그, 종료태그 포함한 HTML 요소 설정/반환 (= oute…
Array JS - includes() 메서드 - 배열에 지정값 포함 여부 검사체크 (= includes메서드 = 인클…
js JS - 이미지 위에 마우스허버 시 툴팁창(Tooltip) 띄우기 ※ 클래스 속성값과 동일한 타이틀 속성 생…
Array JS - at() 메서드 - 지정 색인번호의 배열값 반환 (= at메서드 = 엣메서드/앳메서드)
Array JS - entries() 예제 - 객체배열반복자 반환 (= entries메서드 = 엔트리즈메서드)
Array JS - flat() 예제 - 배열 평탄화 (= flat메서드 = 플랫메서드) ※ 중첩배열(=다단계배열)의 …
Array JS - flatMap() 메서드 - 배열 매핑 후 지정함수 적용한 새 평면배열 생성 (= flatMap메서…
Array JS - Array.from() 메서드 - 객체로부터 배열 생성 (= Array.from메서드 = 어레이프럼…
Array JS - keys() 메서드 - 배열키로 구성된 배열 반환 (= keys메서드 = 키즈메서드)
Math JS - Math.log2() 메서드 -
Math JS - Math.log10() 메서드 -
66/67
목록
찾아주셔서 감사합니다. Since 2012