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();
'자바스크립트' 카테고리의 다른 글
04. Node 개발자동화 테스트 Grunt 설치( 맥북에어 ) (0) | 2016.05.22 |
---|---|
03. 자바스크립트 OOP구현과 상속에 대해... (0) | 2016.02.26 |
02. jQuery를 이용한 데이터 출력 방법 (0) | 2016.02.02 |
02. HTML5 Canvas 에서 그리기... (0) | 2012.05.29 |
01. HTML5 Canvas 이해... (0) | 2012.04.21 |