JavaScript 핵심 개념 (1. Scope)

Achievement Goals

• JavaScript의 Scope의 의미와 적용 범위를 이해할 수 있다.
• JavaScript의 Scope 주요 규칙을 이해할 수 있다.
  • 중첩 규칙
  • block level vs. function level
  • let, const, var의 차이
  • 전역 변수와 전역 객체의 의미
• Closure의 의미와 Closure가 가지는 Scope Chain을 이해할 수 있다.
• Closoure의 유용한 몇 가지 패턴을 이해할 수 있다.
• Parameter 갯수가 유동적인 함수를 만들 수 있다.
• ES6에서 사용하는 Rest Parameter 및 ES5의 방법인 arguments 키워드를 이용할 수 있다.
• Default parameter를 사용할 수 있다.
• 객체 지향 프로그래밍의 기본 개념을 이해할 수 있다.
  • class, instance 등의 용어를 이해할 수 있다.
  • new 키워드를 사용해 instance를 생성할 수 있다.
  • ES6 키워드 class를 사용할 수 있다.
• prototype을 이용해 클래스의 원형을 만드는 방법을 이해할 수 있다.

---

Scope

스코프는 변수 접근 규칙에 따른 유효 범위이다. JavaScript는 기본적으로 함수가 선언되는(lexical) 동시에 자신만의 스코프를 가진다.
JavaScript는 다음 두 가지의 Scope를 가진다.

• 전역 범위 (Global scope)
• 지역 범위 (Local scope)

Global scope

모든 함수나 {} 중괄호 밖에서 선언된 변수는 전역 범위에 위치한 전역 변수가 된다. 전역 변수는 코드 전체에서 사용할 수 있다.

const hello = 'Hello, world!'; // Global variable
function sayHello() {
  console.log(hello);
}
console.log(hello); // 'Hello, world!'
sayHello(); // 'Hello, world!'

Local scope

함수 내부나 {} 중괄호 내부에서 선언된 변수는 지역 범위에 위치한 지역 변수가 된다. 지역 변수는 해당 {} 중괄호 내부에서만 사용할 수 있다. 밖에서 사용하려 들으면 ReferenceError가 발생한다.

function sayHello() {
  const hello = 'Hello, world!'; // Global variable
  console.log(hello);
}
console.log(hello); // Uncaught ReferenceError: hello is not defined
sayHello(); // 'Hello, world!'

---

Scope 주요 규칙

• Scope는 중첩이 가능하다.
• 전역 스코프는 최상단의 스코프로, 전역 변수는 어디서든 접근이 가능하다.
• 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선 순위를 가진다.

const hello = 'Hello, world!';
function sayHello() {
  const hello = 'Hello, scope!'; // 지역 변수가 우선 순위가 높다.
  console.log(hello); // 'Hello, scope!'
}
console.log(hello); // 'Hello, world!'
sayHello();

Function Scope vs. Block Scope

Block Scope

{} 중괄호로 시작하고, 끝나는 단위의 스코프

for (let i = 0; i < 5; ++i) {
  console.log(i); // 01234
}
console.log(i); // Uncaught ReferenceError: i is not defined
``

#### Function Scope

함수 단위의 스코프

```js
function sayHello() {
  var hello = 'Hello, javascript!';
  console.log(hello); // 'Hello, javascript!'
}
console.log(hello); // Uncaught ReferenceError: hello is not defined
sayHello();

var vs. let

var는 function scope를 가지고 let은 block scope를 가진다
var의 경우, block scope는 {} 중괄호가 없는 것과 같다.
또한,var와 달리 let은 중복 선언이 불가능하다.

for (var i = 0; i < 5; ++i) {
  console.log(i); // 01234
}
console.log(i); // 5

{
  var hello = 'Hello, javascipt!';
}
console.log(hello); // 'Hello, javascipt!'

{
  let hello = 'Hello, javascipt!';
}
console.log(hello); // Uncaught ReferenceError: hello is not defined

var hello = 'Hello, javascipt!';
var hello = 'Hello, HTML!';

let hello = 'Hello, javascipt!';
let hello = 'Hello, HTML!'; // Uncaught SyntaxError: Identifier 'hello' has already been declared

var는 범위를 예측하기 어려우므로, let 키워드가 권장된다.

const

let과 동일하게 block scope를 지니고 선언과 동시에 초기화를 해야만 한다. 값이 할당되고 나면 더이상 변경할 수 없다.

const PI = 3.141592;
PI = 3.14; // Uncaught TypeError: Assignment to constant variable.

	let	const	var
유효 범위	Block Scope	Block Scope	Function Scope
값 재정의	가능	불가능	가능
재선언	불가능	불가능	가능

---

전역변수와 Window 객체

Window 객체

Window 객체는 전역 범위를 대표하는 객체이다. 전역 범위에서 선언된 함수와 var 키워드를 이용해 선언된 변수는 window 객체와 연결된다. 전역 범위에는 너무 많은 변수를 선언하지 않도록 주의해야 한다.

var hello = 'Hello, JavaScript.';
console.log(hello === window.hello); // true
function foo() {
  console.log('bar');
}
console.log(foo === window.foo); // true

선언 없이 초기화된 변수

절대로, var, let, const 없이 변수를 초기화하지 말아야 한다. 함수 범위 내에서 생성되었음에도 window 객체와 연결되어 전역 범위에서 있게 된다.

function sayHello() {
  hello = 'Hello, I\'m in Window.';
  console.log(hello); // 'Hello, I'm in Window.'
}
sayHello();
console.log(hello); // 'Hello, I'm in Window.'
console.log(hello === window.hello); // true

이런 실수를 방지하고 싶은 경우, Strict Mode를 사용하면 된다.

'use strict';

function sayHello() {
  hello = 'Hello, I\'m in Window.'; // Error!
  console.log(hello);
}
sayHello();