Scope 이해하기 (By Checkpoint 1)

● 개념

 

: Scope refers to the current context of code, which determines the accessibility of variables to JavaScript. The two types of scope are local and global: Global variables are those declared outside of a block. Local variables are those declared inside of a block.

 

● 문제풀이 목적

 

: 전역 변수(Global varaiables)와 지역변수(Local variables)의 차이(Scope)를 이해한다.

 

 

1번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 30; 

function get () { return x; }

var result = get(20);

// get 함수는 인자로 아무것도 받지 않고 있으므로
// get 함수가 리턴하는 x는 전역의 x이다. 따라서 result의 값은 30이 된다

 

2번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 30;

function get (x) { return x; }

var result = get(20);

// get 함수는 인자를 받아서 받은 인자를 리턴한다. 따라서 result의 값은 20이 된다

 

3번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 30;

function get () { return x; }
function set (value) { var x = value; }

set(10);
var result = get(20);

// get 함수는 전역의 x를 반환하고, set 함수는 인자를 받아 set 블록 스코프 안에서의 x를 선언하고 있다
// 이제 함수 실행줄을 보면 set(10)은 x를 10으로 만들지만 
// set 함수 안에서만 유효하므로 get(20)을 했을때의 결과는 30이 될 것이다

 

4번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 30;

function get () { return x; }
function set (value) { x = value; }



set(10);
var result = get(20);

// get 함수는 전역의 x를 리턴하고, set 함수는 전역의 x를 받은 인자로 초기화 시키고 있다
// 함수 실행줄로 가서 set(10)이 실행되면 현재 전역 x는 10이 되고
// 이에따라 전역 x를 반환하는 get(20)의 값은 10이 된다

 

5번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 30;

function get (x) { return x; }
function set (value) { x = value; }

set(10);
var result = get(20);

// get 함수는 인자를 받아 받은 인자를 반환한다. set 함수는 인자를 받아 전역의 x를 초기화한다
// 코드 실행줄로 가서 set(10)을하면 전역의 x는 10으로 초기화되지만 
// get은 받은 인자를 리턴하는 것이므로 20이 반환된다

 

6번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 10;

function add (y) {
return x + y;
}

function strangeAdd (x) {
return add(x) + add(x);
}

var result = strangeAdd(5);

// add 함수는 인자를 받아서 전역의 x와 더한 값을 반환한다
// strangeAdd 함수는 인자를 받아서 해당 인자를 인자로 받는 두개의 add 함수의 결과를 합한 값을 반환한다 
// result는 strangeAdd(5)이다. 따라서 아래와 같이 실행되게 된다

// strangeAdd(5) => add(5) + add(5)
// add(5) => 10 + 5
// add(5) + add(5) === 15 + 15
// 위와 같은 과정을 거쳐서 결과는 30이 되게 된다

 

7번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 10;

function outer () {
var x = 20;
function inner () {
return x;
}
return inner();
}

var result = outer();

// result는 outer 함수의 결과값이다. outer 함수는 inner 함수의 결과를 반환한다
// 따라서 outer 함수가 실행되면 outer 함수 안의 x를 inner 함수가 리턴하고 
// 이 inner 함수를 outer 함수가 리턴하므로 결과는 20이 된다

 

8번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 10;

function outer () {
var x = 20;
function inner () {
x = x + 10;
return x;
}
inner();
}

outer();

var result = x;

// result는 outer 함수의 결과값이다. outer 함수는 inner 함수의 결과를 반환한다
// inner 함수는 전역의 x를 초기화하고 있다
// 따라서 outer 함수가 실행되면 inner 함수가 x를 리턴하고 결과는 10이 된다

 

9번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 10;

function outer () {
x = 20;
function inner () {
var x = x + 20;
return x;
}
inner();
}

outer();

var result = x;

// result는 outer 함수의 결과값이다. outer 함수는 inner 함수의 결과를 반환한다 
// 이번에는 outer 함수가 전역의 x를 초기화하고 있다
// 따라서 inner 함수의 결과는 x를 outer함수에 반환해도 
// 지역변수이기에 전역변수에 간섭할 수 없으므로 결과는 20이 된다

 

10번 - 다음의 코드를 실행시킨 후에 result 의 값은 무엇이 될까요?

 

var x = 10;

function outer () {
x = 20;
function inner () {
x = x + 20;
}
inner();
}

outer();

var result = x;

// outer, inner 모두 전역의 x를 초기화하고 있다
// outer에서는 20으로 inner에서는 x = 20 + 20 즉 40으로 따라서 최종적으로 전역의 x는 40이다