객체와 관련된 키워드 in, with

1. in 키워드

in 키워드를 for 키워드와 별도로 사용해 해당 키가 객체 안에 있는지 확인 할 수 있다.

코드 1

var blog = {
    naver : '네이버',
    daume : '다음',
    티스토리 : 'tistory',
}
 
var blog_output = '';
blog_output += "'naver' in blog : " + ('naver' in blog) + '\n';
blog_output += "'kakao' in blog : " + ('kakao' in blog);
 
alert(blog_output);

위의 코드를 실행시켜 보면

이와 같은 결과를 확인 할 수 있는데

naver 속성은 blog 객체의 안에 있으니까 true 가 출력이 되지만

kakao 속성은 blog 객체의 안에 없으므로 없으므로 false 를 출력하는 결과를 확인 할 수 있다.

2. with 키워드

with 키워드는 복잡하게 사용해야 하는 코드를 짧게 줄여주는 키워드 이다.

예를들어 코드 2번을 보자.

코드 2

// 객체를 선언
var student = {
    이름 : '홍길동',
    국어 : 92,
    수학 : 98,
    영어 : 96,
    과학 : 98
}
 
// 출력
var output = '';
output += '이름 : ' + student.이름 + '\n';
output += '국어 : ' + student.국어 + '\n';
output += '수학 : ' + student.수학 + '\n';
output += '영어 : ' + student.영어 + '\n';
output += '과학 : ' + student.과학 + '\n';
output += '총점 : ' + (student.국어 + student.수학 + student.영어 + student.과학);
alert(output);

코드 2번을 보면 객체의 속성을 출력할 때 식별자 student 를 여러번 사용하니 코드가 굉장히 복잡해 보인다.

이럴 때 with 키워드를 사용하는데 with 키워드는 다음과 같은 형태로 사용한다.

with(객체){
    // 코드
}

객체를 넣어주면 괄호 안에서 객체를 명시할 필요 없이 속성을 쉽게 사용할 수 있다.

코드 3번을 확인해 보자.

코드 3

// 객체를 선언
var student = {
    이름 : '홍길동',
    국어 : 92,
    수학 : 98,
    영어 : 96,
    과학 : 98
}
 
// 출력
var output = '';
with(student){
    output += '이름 : ' + 이름 + '\n';
    output += '국어 : ' + 국어 + '\n';
    output += '수학 : ' + 수학 + '\n';
    output += '영어 : ' + 영어 + '\n';
    output += '과학 : ' + 과학 + '\n';
    output += '총점 : ' + (국어 + 수학 + 영어 + 과학);
}
alert(output);

객체.속성으로 썻던걸

with 에 어떤 객체인지 정의 해주고 사용하니 코드가 훨씬 간결해 보인다.

만약!

with 키워드를 사용하는 객체의 속성 이름과 외부 변수의 이름이 같으면 충돌이 발생한다.

코드 4번을 확인해 보자.

코드 4

// 객체를 선언
var student = {
    이름 : '홍길동',
    국어 : 92,
    수학 : 98,
    영어 : 96,
    과학 : 98,
    output : '이미 있지롱'
}
 
// 출력
var output = '';
with(student){
    output += '이름 : ' + 이름 + '\n';
    output += '국어 : ' + 국어 + '\n';
    output += '수학 : ' + 수학 + '\n';
    output += '영어 : ' + 영어 + '\n';
    output += '과학 : ' + 과학 + '\n';
    output += '총점 : ' + (국어 + 수학 + 영어 + 과학);
}
alert(output);

코드 2, 3 번에서는 코드를 실행시켰을땐

이름, 국어, 수학 영어, 과학, 총점이 제대로 찍혔었는데

이 코드의 결과는..

사진과 같이 찍힌다.

student 객체의 속성으로 output 가 이미 정의되어 있어서

이렇게 될 경우 window 객체 내부의 output 변수를 사용 하겠다고 지정해 주어야 한다.

코드 5번을 확인해 보자.

코드 5

// 객체를 선언
var student = {
    이름 : '홍길동',
    국어 : 92,
    수학 : 98,
    영어 : 96,
    과학 : 98,
    output : '이미 있지롱'
}
 
// 출력
var output = '';
with(student){
    window.output += '이름 : ' + 이름 + '\n';
    window.output += '국어 : ' + 국어 + '\n';
    window.output += '수학 : ' + 수학 + '\n';
    window.output += '영어 : ' + 영어 + '\n';
    window.output += '과학 : ' + 과학 + '\n';
    window.output += '총점 : ' + (국어 + 수학 + 영어 + 과학);
}
alert(output);

/* 이 코드는 jsfiddle 로는 실행시 원하는 결과가 제대로 출력이 안되니, 에디터 등의 툴을 사용해서 보시길 권장합니다. */

--------------------------------------------------------------------

window 객체는 javascript 최상위에 위치한 '객체' 이다.

사실, 자바스크립트의 모든 변수와 함수는 window 객체의 속성과 메서드 이다.

alert() 함수도 window.alert() 메서드 형태로 사용할 수 있다.