01. scope에 대한 이해

Javascript Scope에 대한 이해

1. 개요

자바스크립트를 이해하는데 아주 중요한 요소인 동적 생성 메모리 공간과 var, this 키워드에 대해 알아본다.

2. 설명 및 예시

첫번째, 동적 생성 메모리 공간

프로그래밍을 하는 동안 일정기간 동안 데이터를 저장해서 사용할 수 있다.

자바스크립트에서는 크게 두가 종류의 메모리 공간을 사용할 수 있다고 생각하면 된다.

1. 오브젝트( Object )의 key-value 공간

오브젝트 내에서 키, 밸류 형태의 값을 생성해서 사용한다.

- 예시

var object = {

key: value

}

- 사용방법

object.key 또는 object["key"]

2, 함수의 스코프 공간

함수 내에서 var 키워드와 함께 생성해서 사용한다.

- 예시

function setVariables() {

var variable = value;

}

두번째, 스코프에 대한 이해

자바스크립트에서 변수가 생성된 후 언제까지 유지되고, 어떻게 접근해서 사용할 수 있을까?

이 부분을 이해하기 위해서 몇가지 알아야 할 개념이 있다.

1, 지역변수

설명: 함수 내에서 var 키워드를 사용하고 있는 변수, 함수가 종료되는 시점까지만 사용가능하고 이 후 사라진다. 함수 내 또는 함수에 포함된 객체 내에서만 접근가능하다.

- 예시

function testScope() {

var scope = "지역변수";

var objectA = function() {

alert( scope );    // 출력 - '지역변수'

}

var objectB = {

scope: "오브젝트 속성",

call: function() {

alert( scope );    // 출력 - '지역변수'

alert( this.scope );    // 출력 - '오브젝트 속성'

}

}

objectA();

objectB.call();

}

testScope();

alert( scope );    // 출력 - 'undefined'

2, 전역변수

최상위 객체(window) 내에 생성된 변수는 브라우저가 꺼지기 전까지 메모리에 존재한다. var 키워드가 붙지 않고, 어디에서도 접근 가능하다.

3, this 키워드

여러개의 객체가 중첩되어 사용되고, 원하는 위치의 객체 내 키, 밸류에 접근하고 싶을 때 사용된다. this는 현재 위치해 있는 객체를 가리킨다. 변수의 스코프를 이용해서 확인해 볼 수 있다. 아래의 예시에서 this 키워드를 사용했을 때 출력값을 확인해보자.

- 예시

function testScope() {

var scope = "지역변수";

var objectA = function() {

// 아래 var 키워드가 사용된 변수 호이스팅으로 인해 상위 scope 값인 '지역변수'가 출력이 안된다.

alert( scope );    // 출력 - 'undefined'  

var scope = "오브젝트A 지역변수";

alert( scope );    // 출력 - '오브젝트A 지역변수'

}

var objectB = {

scope: "오브젝트B 속성",

call: function() {

alert( scope );        // 출력 - '지역변수'

alert( this.scope );   // 출력 - '오브젝트B 속성'

}

}

objectA();

objectB.call();

}

testScope();