이 문제들을 다 풀면 scope 이해 끝

문제의 출처는 코드스테이츠에 있습니다.

 

이해가 되는 것 같다가도 다시 다른 문제를 보면 앞의 문제가 이해가 안되는 것들 기록

이 문제들이 scope를 이해하기에 아주 아주 좋은 문제들인 것 같다!!!

 

 

 

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

 

var x = 30;
function get (x) {
  return x;
}
var result = get(20); // --> 20

여기서는 var x 는 30이고, get(20)에서는 매개변수를 그대로 리턴하라는 함수이기 때문에 리턴값이 20이 나온다.

즉, 여기서 var x의 x와 get(x)의 x 는 다른 아이

 

---

 

var x = 30;

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

set(10);
var result = get(20); // --> 10

여기서는 var x 가 30이고 set을 통해 x 를 10으로 재선언해주었다.

그리고 get() 을 통해 x 를 리턴해주었기 때문에 리턴값이 10이 나온다.

* 여기서 get(20)의 20은 함수 생성 시에 매개변수(parameter)를 활용하지 않았기 때문에 아무런 의미가 없는 20 이라는 것

 

---

 

var x = 30;

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

set(10);
var result = get(20); // --> 20

여기서 var x 는 set(10) 을 통해 x의 값이 10으로 바뀌었지만

get() 함수에서 매개변수(parameter)로 넣어준 x 가 x 를 그대로 리턴하고 있으므로 get(20) 의 리턴값은 전달인자(argument)인 20이 된다.

 

 

---

 

var x = 30; // 1번 var x

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

set(10);
var result = get(20); // --> 30

여기서는 x를 2번에서 새로 선언해줬기 때문에 set 함수 안의 x 는 10이고

get 함수 안의 x 는 1번에서 선언된 x 가 그대로 나오는 것이다.

 

 

---

 

var x = 10;

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

return inner();
}

var result = outer(); // --> 20

여기서 global scope 의 x 는 10, local scope의 x 는 20

---

 

var x = 10; // 1번 var x

function outer () {
  var x = 20; // 2번 var x

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

outer(); // outer의 x값은 30이지만 리턴은 되지 않는다.
var result = x; // --> 10

여기서도 outer()의 x 값은 2번 var x를 통해 30이 나오지만 outer () 함수 안에서는 아무 리턴을 해주지 않고 있으므로 리턴값은 undefined이다.

result의 값은 1번 var x를 해 준 10이 나온다.

즉, 1번 var x 와 2번 var x 는 다른 것!

 

 

---

 

var x = 10; // 1번 var x

function outer () {
  x = 20; // 2번 x
  
  function inner () {
    var x = x + 20; // 3번 var x
    return x; // --> NaN
  }
  inner();
}

outer(); // 
var result = x; // --> 20

여기서는 1번에서 선언해준 x 의 값이 10 이었는데 outer() 의 x = 20 을 통해 20으로 바뀌어 버렸다.

그런데 3번 var x 에서는 다시 var을 적어줬기 때문에 undefined = undefined + 20과 같다. 그래서 리턴되는 값은 NaN 이 된다.

그리고 result의 x 값은 outer()을 실행한 후이므로 x 가 20으로 이미 바뀐 상태이기 때문에 20이 출력된다.

 

 

---

 

var x = 10; // 1번 var x

function outer () {
  x = 20;

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

outer();
var result = x; //40

여기서는 1번 x 가 outer(), inner() 를 통해 x가 계속 바뀌게 되기 때문에 40이 출력된다.

 

 

결국 var 와 return을 주의 깊게 살피는 것이 중요하다!!!