작성 - 2020.8.5

오늘은 어제에 이어 Koans를 풀며 기본 개념에 대해서 다시 한 번 이해하는 시간을 가지고 Scope와 Closure에 대해서 학습했다. 먼저 Koans에 대해서, 지난 주 시간에 치이며 빠르게 MND와 블로그를 찾아보고 문제를 풀기 위한 내용을 위주로 공부하다 보니 ‘이 Method는 정확히 무엇인가?’ 혹은 해당 Method의 arguments가 의미하는바는 무엇인지에 대해서 정확히 자답하기 힘들었다.
노션 페이지를 정리하기 시작했다. 처음 만든 페이지는 html과 css, java script 삼형제 페이지다. 학습한 내용이나 습득한 메소드에 대해서 나의 말로 정리할 예정이다. 물론 블로깅도 중요하다. 노션은 개인 정리 문서로 활용할 예정이고 블로그의 ‘TIL’항목들은 노션에서 나의 말로 정제된 내용을 올릴 것이다. 아니… 반대로 해야하나…?

노션 최고다!!

1. Scope
   스코프는 자바스크립트 화면을 이루고 있는 최소한의 환경 단위다. Java Script는 기본적으로 함수가 선언되는(Lexical)동시에 자신만의 Scope를 가지게 된다. 스크립트에 선언되는 변수는 반드시 환경 내에서만 사용 가능하다. 따라서 모든 프로그래밍 언어는 각각의 변수 접근 규칙을 갖고 있다. 한 마디로 스코프는 선언한 변수가 유효한지를 판단하는 범위다.
   let greeting = 'hello'!
   function greetingSomeone() {
   let firstName = 'HB';
   return greeting + ' ' + firstName;
   }
   greetingSomeone() // 'hello! HB'
   firstName //ReferenceError

개발자 콘솔을 열었을 때 기본적으로 보이는 화면은 Global Scope라고 할 수 있다. 그리고 함수 생성으로 Curly Brackets이 만들어지고, 그 안에 내용이 추가되는데, 이 컬리 브라켓 내부가 하나의 Local Scope이다.
Global Scope, 즉 전역 스코프와 Local Scope 즉 지역 스코프의 특징은 다음과 같이 나뉜다.
1) Global Scope (전역 스코프)
1. 변수가 함수 바깥이나 중괄호({}) 바깥에서 선언되면 전역 스코프에 정의된다.
2. 전역 변수로 선언하면, 코드 모든 곳에서 해당 변수를 사용할 수 있다.
(함수에서도 사용 가능)

2) Local Scope (지역 스코프)
1. 코드의 특정 부분에서만 사용할 수 있다.
2. 자바스크립트에는 두 가지 지역 변수가 존재한다.

2 -1. 함수 스코프(Function Scope)
함수 내부에서 변수를 선언하면 그 변수는 선언한 변수 내부에서만 접근할 수 있다.
function sayHello() {
const hello = 'Hello!';
console.log(hello)
}

sayHello() // 'Hello!'
console.log(hello) // Error, hello is not defined

2–2. 블록 스코프(Block Scope)
중괄호({}) 내부에서 const나 let으로 변수를 선언하면, 그 변수들은 중괄호 블록 내부에서만 접근할 수 있다.
함수를 선언할때는 중괄호를 사용해야 하기 때문에, 블록 스코프는 함수 스코프의 서브셋(subset)이다.
{
const hello = 'Hello!';
console.log(hello) // 'Hello!';
}
console.log(hello) // Error, hello is not defined

2. 함수의 Hoisting과 Scope

1) 함수의 호이스팅 (Function Hoisting)
함수가 선언식으로(function declaration) 선언되면, 현재 스코프의 최 상단으로 호이스팅 된다.
// This is the same as the one below
sayHello()
function sayHello () {
console.log('Hello CSS-Tricks Reader!')
// This is the same as the code above
function sayHello () {
console.log('Hello CSS-Tricks Reader!')
}
sayHello()
함수가 표현식(function expression)으로 선언되면 함수는 스코프 최상단으로 호이스팅 되지 않는다.
sayHello() // Error, sayHello is not defined
const sayHello = function () {
console.log(aFunction)
}
따라서, 함수를 호출하기 전에는 반드시 선언해야 한다.

2) 함수의 스코프간 관계
함수가 각각 선언되면, 서로의 스코프에 접근할 수 없다.
function first () {
const firstFunctionVariable = 'I’m part of first'
}
function second () {
first()
console.log(firstFunctionVariable)
// Error, firstFunctionVariable is not defined
}
함수 second는 변수 firstFunctionVariable 에 접근할 수 없다.

3) 네스팅된 스코프(Nested Scopes)
함수가 다른 함수 내부에서 정의 되었다면, 내부 함수는 외부 함수의 변수에 접근할 수 있다. 이런 행동을 렉시컬 스코핑(Lexical Scoping)이라고 부른다.
단, 외부 함수는 내부 함수의 변수에 접근할 수 없다.
function outerFunction () {
const outer = 'I’m the outer function!'

function innerFunction() {
const inner = 'I’m the inner function!'
console.log(outer) // I’m the outer function!
}

console.log(inner) // Error, inner is not defined
}

3. Scope의 접근 규칙들
   Rule01 // Local Scope 와 Global Scope
   로컬 스코프는 글로벌 스코프의 변수나 함수를 접근하 수 있다.
   바깥쪽 스코프는 그 안쪽 변수나 함수를 접근하는 것이 불가능하다.
   Scope는 중첩이 가능하다 : 함수 안에 함수를 넣을 수 있다.
   Global Scope는 최상단의 Scope로, 전역 변수는 어디서든 접근이 가능하다.
   지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가진다.
   Rule02 // 전역 변수와 window 객체

1. global scope function
   (개발자 도구창에서)

window = 글로벌 스포크 객체
function foo(){
console.log('bar');
}
window
=>객체 안에 foo가 들어간다
foo === window.foo
true

2. var
   var myName = 'paul';
   myName = window.myName

*전역범위에 너무 많은 변수를 선언하지 말아야 한다
Rule 3. 선언 없이 변수를 사용하면 전역변수로 할당된다.
function showAge(){
age = 90;
console.log(age);
}
showAge()// 90
console.log(age); //90
age === window.age
선언 없이 초기화되면 전역 변수로 취급된다.

4. Clouser
   1) Clouser 란?
   클로저는 스코프의 연장으로, 함수 내부에 선언된 함수나, 외부 함수의 변수에 접근할 수 있는 작동원리를 일컫는 용어다. 클로저는 외부 함수의 변수를 사용할 수 있기 때문에 대개 return하여 사용한다.
   function outerFunction () {
   const outer = 'I see the outer variable!' return function innerFunction() {
   console.log(outer)
   }
   }
   outerFunction()() // I see the outer variable!

2) 클로저 함수의 목적
2–1)사이드 이펙트(Side effects) 제어하기
함수에서 값을 리턴할때를 제외하고 무언가 행할 때, 사이드 이펙트(side effects)가 발생한다. 예를 들어 console.log를 선언하는 것도 사이드 이펙트다.
function (x) { console.log('A console.log is a side effect!') }
2–2) Private 변수와 클로저
함수 내 변수는 함수 바깥에서 접근할 수 없다. 그 변수들은 접근할 수 없기 때문에 ‘Private 변수’라고 불린다.
그러나, 해당 변수들에 접근해야 할 필요가 종종 발생한다. 이것 또한 클로저를 활용해서 할 수 있다.
function secret (secretCode) {
return {
saySecretCode () {
console.log(secretCode)
}
}
}
const theSecret = secret('CSS Tricks is amazing')
theSecret.saySecretCode()
// 'CSS Tricks is amazing'
클로저 함수는 본인은 그 상위 함수의 변수를 사용할 수 있지만, 그 차상위층 함수가 클로저 함수 혹은 변수에 접근할 수 없다는 특징 때문에 함수별 독립적인 활동이 필요할 때나, 외부 함수의 변수를 할당을 통해 템플릿처럼 사용할 수 있다는 특징이 있다.
클로저 함수를 이용한 활용법의 예제는 다음과 같다.

1. 외부 함수를 선언하여 하나의 템플릿 함수처럼 사용할 수 있다.
   function htmlMaker(tag) {
   let startTag = '<' + tag + '>';
   let endTag = '</' + tag + '>';
   return function(content) {
   return starTag + content + endTag;
   }
   }
   let divMaker = htmlMaker('div')
   divMaker('안녕하세요') //
   안녕하세요
   
   let h1Maker = htmlMaker('h1')
   h1Maker('h1크기입니다.') //

   h1크기입니다.

2. 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법으로 함수별로 독립적인 계산이 가능하다.