[Poiemaweb] JavaScript 15~16

비 블록 레벨 스코프 - 자바스크립트는 블록 레벨 스코프를 사용하지 않으므로 함수 밖에서 선언된 변수는 코드 블록 내에서 선언되었다할지라도 모두 전역 스코프을 갖게됨

if (true) {
  var x = 5;
}
console.log(x);

자바스크립트는 함수 레벨 스코프(함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것)를 따름
let keyword를 사용하면 블록 레벨 스코프를 사용할 수 있음

var x = 0;
{
  var x = 1;
  console.log(x); // 1
}
console.log(x);   // 1

let y = 0;
{
  let y = 1;
  console.log(y); // 1
}
console.log(y);   // 0

전역 변수의 사용은 변수 이름이 중복될 수 있고, 의도치 않은 재할당에 의한 상태 변화로 코드를 예측하기 어렵게 만드므로 사용을 억제

함수(지역) 영역에서 전역변수를 참조할 수 있으므로 전역변수의 값도 변경 가능
내부 함수의 경우, 전역변수는 물론 상위 함수에서 선언한 변수에 접근/변경이 가능

var x = 10;

function foo() {
  x = 100;				// var 키워드 생략 시 전역변수 참조
  console.log(x);		// 100
}
foo();
console.log(x); 		// 100

중첩 스코프는 가장 인접한 지역을 우선하여 참조

var x = 10;

function foo(){
  var x = 100;
  console.log(x);

  function bar(){   // 내부함수
    x = 1000;
    console.log(x); // 1000
  }

  bar();
  console.log(x);	// 1000
}
foo();
console.log(x); // 10

동적 스코프 - 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 것
렉시컬 스코프 또는 정적 스코프 - 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {	// 함수 bar는 전역에 선언되으므로 상위 스코프는 전역 스코프
  console.log(x);
}

foo(); // 1
bar(); // 1

대부분의 프로그래밍 언어는 렉시컬 스코프를 따름

암묵적 전역 - 선언하지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼티로 동적 생성
y는 변수 선언없이 단지 전역 객체의 프로퍼티로 추가되었을 뿐->y는 변수 X->y는 변수 호이스팅이 발생 X
변수가 아니라 단지 프로퍼티인 y는 delete 연산자로 삭제할 수 있지만, 전역 변수는 프로퍼티이지만 delete 연산자로 삭제할 수 없음

// 전역 변수 x는 호이스팅이 발생한다.
console.log(x); // undefined
// 전역 변수가 아니라 단지 전역 프로퍼티인 y는 호이스팅이 발생하지 않는다.
console.log(y); // ReferenceError: y is not defined

var x = 10; // 전역 변수

function foo () {
  // 선언하지 않은 식별자(암묵적 전역)
  y = 20;
  console.log(x + y);
}

foo(); // 30
console.log(y);	//20

delete x; // 전역 변수는 삭제되지 않는다.
delete y; // 프로퍼티는 삭제된다.

console.log(window.x); // 10
console.log(window.y); // undefined

즉시실행함수를 이용한 전역변수 사용 억제 - 즉시 실행 함수는 즉시 실행되고 그 후 전역에서 바로 사라짐
전역변수를 만들지 않으므로 라이브러리 등에 자주 사용

(function () {
  var MYAPP = {};

  MYAPP.student = {
    name: 'Lee',
    gender: 'male'
  };

  console.log(MYAPP.student.name);
}());

console.log(MYAPP.student.name);

strict mode - 자바스크립트 언어의 문법을 보다 엄격히 적용하여 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생
전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가하여 적용(But 전역에 적용하는 것은 바람직하지 않음)
strict mode는 즉시실행함수로 감싼 스크립트 단위로 적용하는 것이 바람직