2020.4.28 TIL

Scope

함수 및 변수의 접근 권한
어디까지 접근이 가능하고 유효한지 범위를 나타내 주는 개념.
함수 및 변수가 활동할 수 있는 범위라고 생각을 하는 중.

Static scope

JS에서는 함수의 선언과 동시에 자신만의 Scope를 가짐.
static을 번역하자면 정지 상태의, 고정된이라는 뜻이다. 함수만이 가질 수 있는 고정된 그라운드. 그렇기에 함수 내에서 사용된 변수(전역 변수인 var가 아닌 let)는 전역이나 다른 함수에서 사용할 수 없다.

JS는 기본적으로 function 단위로 스코프를 가졌는데, JS가 발전하면서 block 단위로 스코프를 가지게 되었다.

block Vs. function

for(let i = 0; i < 5; i++) {
  console.log(i)
}
//block{} 단위로 이루어지는 스코프. 이것을 벗어나서 i를 쓰게 된다면 레퍼런스 에러를 띄운다.

function foo() {
  var i = '안녕하세요';
  for(let i = 0; i < 5; i++) {
    console.log(i); // 1번째 (0 1 2 3 4)
  }
  console.log(i); // 2번째 (안녕하세요)
}
console.log(i); // 3번째 (레퍼런스 에러)
//function 단위로 이루어지는 스코프. 함수 바깥에 있는 i는 레퍼런스 에러를 띄운다.

스코프는 중첩이 가능하며, 하위 스코프가 상위 스코프에 접근이 가능하다.

function foo() {
  let a = 'apple';
  function foo2() {
    let b = 'banana'
    console.log(a);
    console.log(b);
  }
  foo2();
}
foo();

Global scope

전역 스코프 window
window도 객체이기 때문에 스코프가 있다. 우리가 만약 전역에 변수를 할당하거나 함수를 놓게 되면, 그것은 전역 스코프에 있는 것이 되기 때문에 window.변수 혹은 window.함수 이렇게 객체 형식으로 쓰이게 되며, 편의성을 위해 window는 생략을 하게 되었음. 그렇기 때문에 전역 스코프에 있는 모든 것들은 어디에서든 접근이 가능하다.

hoisting

var를 사용을 하게 되면 hoisting이 가능하게 된다. 호이스팅은 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지... 는 것처럼 보이는 것. (사실은 그 위치에 있음) 초기화가 아닌 선언만 끌어올림.

cat('귀여워');
function cat(input) {
  console.log(input);
}
//귀여워

Dynamic scope

this
4.29 업데이트 예정

Closure

외부 변수 사용 가능한 내부 함수
보통 함수를 return 하는 형태로 사용을 함
스코프와 클로저는 아주.. 긴밀한 관계를 가지고 있다고 생각을 함

클로저를 사용하는 대표적인 예

curring

하나의 값을 고정한 후, 내부함수의 값만을 변형함.

function tagMaker(tag) {
  let startTag = `<${tag}>`;
  let endTag = `</${tag}>`;
  return function textArea(input) {
    return `${startTag}${input}${endTag}`
  }
}
let divTag = tagMaker('div');
divTag('안녕하세요?');
//<div>안녕하세요?</div>

익명 함수

함수 안의 함수를 익명으로 할 수 있음. 물론 클로저가 아닌, 바로 값을 낼 때의 함수도 익명 함수를 사용할 수 있지만 권장하지는 않음. 차라리 일회성은 {}괄호를 사용하는 것이 좋다.

function add(x) {
  return function(y) {
    return function(z) {
      return x + y + z
    }
  }
}
add(5)(6)(7) //18
//클로저가 아닌 바로 값을 낼 때의 함수
(function() {
  return function() {
    return function() {
      return '3'
    }
  }
}) ()()(); //3