TIL 230304 초심으로 돌아가서~

필기시험을 볼 일이 있었다. 열심히 풀었으나 확인했더니 다 틀렸다! 하하하하하 😀 스코프와 호이스팅을 공부하는 시간을 가졌다!

 

콘솔에 출력되는 값은 무엇인가요?

Q1.  

답 : 에러

a를 출력하면 function이 나오고 b를 출력하면 undefined가 나온다. 그러므로 b를 호출하면 에러가 발생한다.

함수 b는 함수 선언식이 아니라 함수 표현식으로 선언되었으므로 호이스팅이 일어나지 않았다. 또한 var로 선언했으므로 a가 호출될 때 b함수가 할당되므로 에러가 난다.

var a = function b() {
  return 10;
};
console.log(typeof b()); // ReferenceError: b is not defined

 

이렇게 함수 선언식으로 함수를 선언하면 접근 가능하다.

function b() {
  return 10;
}
console.log(typeof b()); // number

 

Q2. 

답 : undefined

var x = 1, y = x = typeof y
console.log(y)

 

코드를 왼쪽부터 오른쪽으로 실행해서 number가 출력될 거라고 생각했는데 vscode에서 프리티어를 사용해 저장하면 형태를 이런 형태로 바꿔준다. y에 x를 할당하고 거기에 y의 타입을 할당하는게 아니라 y의 타입을 x에 할당한 뒤 그 값을 y에 할당한다.

하지만 y가 선언되기 전에 y의 타입을 호출했으므로 undefined이 되어 y에는 undefined이 할당된다.

var x = 1,
  y = (x = typeof y);
console.log(y);

 

var를 사용한다면 알고 있어야하는 개념인 것 같다. 하지만 let을 쓰면 에러를 띄워주므로 문제는 없어보인다. 👀

let x = 1,
  y = (x = typeof y);
console.log(y); // ReferenceError: Cannot access 'y' before initialization

 

Q3.

답 : undefined, 2

var는 선언과 할당이 별개로 이뤄지므로 호출시에는 호이스팅되어 선언만 끌어올려졌고 할당은 이뤄지지않아 undefined가 출력된다.

function a() {
  console.log(b);
  console.log(c());

  var b = 1;
  function c() {
    return 2;
  }
}

a();

 

b에 1을 할당하고 출력하면 잘 출력되는 것을 확인할 수 있다. 함수는 호이스팅되므로 2가 출력된다. 함수 안의 함수는 호이스팅이 일어나지 않는 줄 알았는데 일어난다.

function a() {
  console.log(b); // undefined
  console.log(c()); // 2

  var b = 1;
  console.log(b); // 1
  function c() {
    return 2;
  }
}

a();

 

 

var는 함수 스코프를 가지기 때문에 c함수 안에서 호출하면 undefined가 출력된다.

function a() {
  console.log(b); // undefined
  console.log(c()); // undefined, 2

  var b = 1;
  function c() {
    console.log(b);
    return 2;
  }
}

a();

 

Q4 - 1.

답 : park, undefined

obj.props.name은 닷노테이션으로 접근해서 park이 나온다.

var name = 'kim';
var obj = {
  name: 'lee',
  props: {
    name: 'park',
    getName: function () {
      return this.name;
    },
  },
};

console.log(obj.props.getName());

 

Q4 - 2.  test를 실행했을 때 park이 나오게 하려면 어떻게 해야하나요?

자바스크립트의 this는 실행 맥락에 따라 달라지기 때문에 test를 실행했을 때 this는 글로벌이고 this.name이 없기 때문에 undefined가 나온다. 그래서 test를 선언할때 bind함수로 this를 고정시켜 줄 수 있다.

obj.props.name까지 고정시켜줘야되는 줄 알았는데 그 상위 스코프까지만 엮어주면 되는 것 같다..!

var name = 'kim';
var obj = {
  name: 'lee',
  props: {
    name: 'park',
    getName: function () {
      return this.name;
    },
  },
};

console.log(obj.props.getName());

// 기존
// var test = obj.props.getName.bind
var test = obj.props.getName.bind(obj.props);
console.log(test());

---

결론! let과 const를 쓰면 호이스팅과 스코프 문제가 복잡해질 일이 딱히 없는 것 같다! let const 최고! var를 지양하자!!!! 🔥

this는 헷갈렸는데 다시 정리하는 시간이 됐다.😀