스코프

변수의 유효접근 범위

전역 스코프

const globalVariable = 'some value'

지역 스코프

• 함수 스코프: 함수 내부에서만 변수 접근가능

function sayHello () {
  const hello = 'Hello'
  console.log(hello)
}
sayHello() // 'Hello'
console.log(hello) // undefined

• 블록 스코프: 블록 내부에서만 변수 접근 가능

• let, const(ES6)로 블록 기반 스코프 사용가능

{
  const hello = 'Hello'
  console.log(hello) // 'Hello'
}
console.log(hello) // undefined

스코프 체인

상위 스코프에 찾는 변수가 없다면 전역 스코프에 도달할때까지 바깥쪽 스코프로 나가는 것

• 스코프 함수가 선언될 때 결정
• 실행 컨텍스트: 함수가 실행될 때 변수객체(arguments, variable), scope chain, this

hoisting

• 선언문이 최상위로 끌어올려지는 동작 (함수>변수)
• 실행 컨텍스트 만들어질 때 발생

foo();
bar();
function bar(){
};

function bar(){
};
foo();
bar();

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

var foo;
foo();//TypeError
bar();//ReferenceError
foo=function(){
var bar=...self...
};

클로저

: 내부함수가 외부함수의 context에 접근할 수 있는 것
-> 함수가 선언되었을 떄 실행 환경은 해당 컨텍스트가 종료된 후에도 메모리상에 남아 접근 가능

for(var i=1;i<=5;i++){
    setTimeout(function timer(){
     console.log(i);
        },i*1000);
}
// 6 6 6 6 6
for(var i=1;i<=5;i++){
   (function(){
     var j=i;
     setTimeout(function timer(){

     console.log(j);
        },i*1000);
    })();
}
// 1 2 3 4 5
for(let i=1;i<=5;i++){
     setTimeout(function timer(){
     console.log(i);
   },i*1000);
}
// 1 2 3 4 5

이벤트

자바스크립트

• 싱글 스레드 언어
• 비동기로 동작

처리과정

• Heap: 메모리 할당이 발생하는 곳
• Call Stack: 실행된 코드의 환경을 저장
• Web APIs: DOM, AJAX, setTimeout 등 브라우저가 제공하는 API
• Task Queue: 이벤트 발생 시 실행해야 할 callback 함수 차례대로 저장
• Event loop: Call Stack이 비어있을 경우, Task queue에서 함수를 꺼내 Call Stack에 추가

DOM Event

var handler=function(){
    console.log("click");
};

window.addEventListener("click", handler); // 등록
window.removeEventListener("click" ,handler); // 제거