[TIL-013] 20.08.05

1. Summary(3 Line)

프리코스 8일차(3줄 요약)

- Scope의 범위에 따라 변수의 접근이 달라진다.

- let 키워드와 var 키워드 const 키워드를 자유자재로 다뤄야 한다.

- Koans 기본문제 마무리 하고 advanced 2문제 해결... (advanced는 꼭 해야된다...)

 

---

2. Today's Todo

• Scope
  1) Global Scope
  2) Local Scope
    - Function Scope
    - Block Scope
• Clousure

 

#1 Scope(스코프)

:  변수 접근 규칙에 따른 유효 범위

변수가 변수의 역할로 활동 가능한 범위 이다.

let greeting = 'Hello';			// 1~9줄은 Global Scope

function greetSomeone() {		// 3~6줄은 Local Scope
  let firstName = 'Josh';		// greetSomenone 함수
  return greeting + ' ' + firstName;	
}										

greetSomeone(); // => (1)
firstName; // => (2)

정답 : (1)'Hello Josh', (2)ReferenceError

let name = "Richard";

function showName() {
let name = "Jack"; // 지역 변수
// showName 함수 안에서만 접근 가능
console.log(name); // (1)
}

console.log(name); // (2)
showName();
console.log(name); // (3)

 

1) Global Scope (전역 스코프)

 1. 변수가 함수 바깥이나 중괄호 ({}) 바깥에 선언되었다면, 전역 스코프에 정의 된다.

const globalVariable = '우리의 코드 어디서든 사용 가능하답니다.'

2. 전역 변수를 선언하면 모든 곳에서 해당 변수를 사용할 수 있다. (함수에도 가능)

const 투니버스 = '투니버스에 재밌는거 많았는데...'
function 방송 () {
  console.log(투니버스)
}
console.log(투니버스) // '투니버스에 재밌는거 많았는데...'
방송() // '투니버스에 재밌는거 많았는데...'

 

전역 스코프에 변수를 선언 할 수는 있지만, 그러지 않는게 좋다고 한다. 

왜냐하면, 두 개 이상의 변수 이름이 충돌할 수도 있기 때문이다.

// Don’t do this!
let 만화 주인공 = '나루토'
let 만화 주인공 = '사스케' // Error, thing has already been declared

 

위의 코드에서 let 대신에 var를 쓴다면 두 번째 변수('사스케')가 첫 번째 변수('나루토') 를 덮어 쓰게 된다.

이러면 만화 주인공이 바뀌어 버린다... 코딩에서는 이러면 디버깅이 어려워기 때문에 

어쨋든 우리는 전역 변수가 아닌, 지역 변수로 변수를 선언해야 한다.

// Don’t do this!
var 만화 주인공 = '나루토'
var 만화 주인공 = '사스케' // Error, thing has already been declared
console.log(만화 주인공) // ‘사스케’

 

2) Local Scope (지역 스코프)

: 코드의 특정 부분에서만 사용할 수 있는 변수는 지역 스코프에 있다. 이를 지역 변수라고 한다.

신세계 상품권은 전국적(전역)으로 쓸수 있다면, 전통시장 상품권(화폐)는 해당 시장(지역)에서만 쓸 수 있다.

지역 스코프가 전통시장이고, 그 해당 전통시장 범위(지역)에서 사용할 수 있는 상품권이 곧 지역 변수 이다.

 

- Function Scope (함수 스코프)

: 함수 내부에서 변수를 선언하면, 그 변수는 선언한 변수 내부에서만 접근 가능

함수 바깥에서 해당 변수에 접근 할 수 없다.

function 방송 () {
  const 투니버스 = '투니버스에 재밌는거 많았는데...'
  console.log(투니버스)
}

방송() // 'Hello CSS-Tricks Reader!'
console.log(투니버스) // Error, hello is not defined

 

- Block Scope (블록 스코프)

: 중괄호({ }) 내부에서 const 또는 let 으로 변수를 선언하면, 그 변수들은 중괄호({ }) 블록 내부에서만 접근할 수 있다.

 

 

Scope의 규칙들

Rule 1) Local Scope vs Global Scope

- Scope는 중첩이 가능하다 (함수 안에 함수를 넣을 수 있다.)

- Globalv Scope는 최상단의 Scope로, 전역 변수는 어디서든 접근이 가능하다.

- 지역 변수는 함수 내에서 전역 변수 보다 더 높은 우선순위를 가진다.

 

Rule 3) 전역 변수와 window 객체

: 전역 범위를 대표하는 객체 window

- Global Scope에서 선언된 함수, 그리고 var 키워드를 이용해 선언된 변수는 window 객체와 연결

예시1) function(함수)
function foo() {
  console.log('bar');
}
foo === window.foo // true

예시2) var(키워드)
var myName = 'Paul';
myName === window.myName // true

예시3) let(키워드)
let myName = 'Paul';
myName === window.myName // true

Rule 4) 선언 없이 변수를 사용하면 전역변수

: 선언 키워드 (var, let, const) 없이 변수를 초기화 하지 마라!!

function showAge() {
age = 90; // age는 전역 변수로 취급됩니다
console.log(age);
}
showAge(); // 90
console.log(age); // 90

 

function showAge() {
age = 90; // age는 전역 변수로 취급됩니다
console.log(age);
}
showAge(); // 90
console.log(age); // 90

 

즉, age === window.age // true

true 지만,  이렇게 사용하지 않는다. 이런 실수를 방지하고 싶을 경우, strict Mode를 사용하세요

Strict Mode를 적용합니다.  Strict Mode는 문법적으로 실수할 수 있는 부분들을 에러로 판단한다

 

'use strict';
function showAge() {
age = 90; // 여기서 에러가 발생합니다!.
console.log(age);
}
showAge(); // 90
console.log(age); // 90

 

 

 

#2 Closure(클로저)

: 내부 함수가 정의될 때 외부 함수의 환경을 기억하고 있는 내부 함수를 말한다.

외부 함수 안에서 선언된 내부 함수는 그 외부 함수의 지역 변수나 함수에 접근하여 사용할 수 있다.

클로저를 사용하는 이유는 정보은닉과 캡슐화를 제공할 수 있기 때문이다.

 

클로저 함수의 기본 형태

function closuer() { // 외부 함수 
  var count = 0; // 변수 정의 
  
  function inner() { // 내부 함수(클로저) 선언 
    return ++count; 
  } 
  return inner(); // 내부 함수 반환 
}


function closure() { // 익명 함수를 이용한 방법 
  var count = 0;  
  return function() { // 익명 함수(클로저) 반환 
    return ++count; 
  } 
}

클로저 함수 사용 예시

function outter() { // 외부 함수 안에 내부 함수가 들어가 있다.
  var data = 1;   // 지역변수 data
  
  function inner() { // 내부 함수 
    return data;   // 외부에 있는 data 변수를 사용하고 있다.
  } 
  
  return inner();  // inner 함수를 반환 
}

 

클로저 함수 호출

var func = outter(); outter 함수의 반환 값은 func 변수에는 inner 함수만 저장된다.
console.log(func); // 1

 

클로저의 활용

// HTML : 버튼을 누를 때마다 print 함수가 호출됩니다.
<button onclick="print()">버튼</button>

// JavaScript
// 클릭한 횟수를 기억 
var click = (function () { 
  var count = 0; 
  return function () { 
    ++count; 
    return count; 
  }; 
})(); 

// 버튼을 누를 때 마다 누른 횟수 출력 
function print() { 
  console.log(click()); 
}

print 함수 안에 있는 click 함수는 이름이 없는 클로저를 반환하고 호출하고 있습니다.

클로저는 click 함수의 count변수 값을 계속 기억하고 있으므로 버튼을 누른 횟수를 출력할 수 있습니다.

또한 전역 변수를 대체하여 클로저를 사용할 수 있어서 전역 변수의 남용을 막을 수 있고

변수 값을 은닉하는 용도로도 사용할 수 있습니다.