11일차 - 2022.03.11

안병욱·2022년 3월 12일

오늘 공부한 내용 요약

( 모던 JavaScript 튜토리얼 학습 )

1. 오래된 var

var는 초기 자바스크립트 구현 방식 때문에 let과 const로 선언한 변수와는 다른 방식으로 동작합니다

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다.
블록 밖에서 접근이 가능함. 이때 test가 전역변수가 됨

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}
 
alert(test); // true

if 문이 끝났어도 변수에 여전히 접근할 수 있다.
var 이 아닌 let 이였다면 오류발생

반복문에서도 동일한 현상이 발생

코드블록이 함수 안에 있다면 var은 함수레벨 변수가 된다

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error

Var 을 사용하면 변수를 여러번 다시 선언할 수 있다 (let은 안됨)

var user = "Pete";
var user = "John"; 

alert(user); // John

Var 선언전에 사용할 수 있다
var 선언 위치와 상관없이 함수 본문이 시작부터 사용가능

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

------위와 아래는 같음--------

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();

변수가 끌어올려 지는 현상 - 호이스팅(hoisting)
선언은 호이스팅 되지만 할당은 되지 않는다

function sayHi() {
  alert(phrase);

  var phrase = "Hello"; 
}
sayHi();       --> 선언과 할당이 동시에 일어남 / 아래와 같이 동작
--------------------------
function sayHi() {
  var phrase; // 선언은 함수 시작 시 처리됩니다.

  alert(phrase); // undefined

  phrase = "Hello"; // 할당은 실행 흐름이 해당 코드에 도달했을 때 처리됩니다.
}
sayHi();

이처럼 모든 var 선언은 함수 시작 시 처리되기 때문에, var로 선언한 변수는 어디서든 참조할 수 있습니다

즉시 실행 함수 표현식 (IIFE)
var도 블록레벨 스코프를 가지도록 고민한 결과 발생

(function() {

  let message = "Hello";

  alert(message); // Hello

})();      -> 함수 표현식이 만들어지고 바로 호출되서 실행되는 구조

자바스크립트는 function을 만나면 함수선언문이 시작될거라 인식하게 되는데 이름이 없거나 선언즉시 호출도 안되기 때문에 에러.
괄호를 사용하면 자바스크립트가 함수선언문이 아닌 표현식으로 인식하도록 할 수 있음 (함수표현식은 이름 없어도 되고 즉시 호출도 가능)

function을 괄호로 감싸지 않으면 에러 발생

function() { // <-- Error: Function statements require a function name

  let message = "Hello";

  alert(message); // Hello

}();

함수 이름을 넣더라도 괄호로 function을 감싸지 않으면 에러

function go() {

}();

괄호를 사용하지 않아도 함수 표현식으로 인식하게 하려면 IIFE를 만들면 됨

(function() {
  alert("함수를 괄호로 둘러싸기");
})();

(function() {
  alert("전체를 괄호로 둘러싸기");
}());

!function() {
  alert("표현식 앞에 비트 NOT 연산자 붙이기");
}();

+function() {
  alert("표현식 앞에 단항 덧셈 연산자 붙이기");
}();

2. 전역 객체

전역객체를 사용하면 어디서나 사용할 수 있는 변수나 함수를 만들수 있음
브라우저 환경에서는 window를 사용, 보편적으로 globalThis 사용
globalThis는 제안 목록에 추가 된 지 얼마 안 된 기능이기 때문에,
비 크로미움 기반 브라우저에선 지원하지 않습니다
전역 객체의 프로퍼티는 직접 접근할 수 있음

alert("Hello"); 

window.alert("Hello");

2개 동일한 결과

중요한 변수라 모든곳에 사용하게 하려면 전역객체에 직접 프로퍼티를 추가하면 됨

모든 스크립트에서 현재 사용자(current user)에 접근할 수 있게 이를 전역 객체에 추가함

window.currentUser = {
  name: "John"
};
alert(currentUser.name);  // John

지역 변수 'currentUser'가 있다면
// 지역 변수와 충돌 없이 전역 객체 window에서 이를 명시적으로 가져올 수 있음
alert(window.currentUser.name); // John