두번쨰 편
function abc(){
var a = ‘bbb’;
console.log(a) // bbb
function c(){
console.log(a); // undefined
(function(){
console.log(a); // undefined
a = ‘ccc’;
})();
var a;
console.log(a); //ccc
}
function d(){
console.log(a); //bbb
}
c(); // c 함수가 끝나면 밑에 a에 ddd를 넣는거다
a = ‘ddd’;
d();
};
abc();
이건
일단
abc() 함수에
a라는 변수 테이블을 만든다
그리고 bbb를 대입한다
그리고
function c() 테이블
function d() 테이블을 순차적으로 만든다
중요한건
아직 c함수 든 d함수 든 실행은 아직 안하고 그냥 선언만 된 인터프린터 시점인것이다.
아직 실행을 안해서 함수안의 내용은 만들어지지안았다 스코프도 만들어지지않음
그래서 밑에서 순서대로
c() 이렇게 실행을 하면 그제서야 스코프가 생기고 그안에 또 변수가있으면 변수테이블이 생긴다
그래서
c 함수안에 변수테이블이 만들어지고 그안에 a 가 생성이 된다
생성이 되고 그다음 콘솔로그로 실행이 된다
그럼 언디파인드 뜨고
그다음 즉시실행함수로 넘어가서
그안에 콘솔로그를 찍는다(함수안에 a가 있지만 var가 없으므로 선언을 안했으므로 아직 존재하지않는다(실행이안됨))
그럼 다음으로,,
a = ccc 인데 이거는 어디에 대입하느냐면 즉시실행함수안에 a가 없으므로 밖의 스코프에 a가있는지 찾아본다
있으면 그 a 에 ccc를 대입한다
그래서 즉시실행함수는 끝나고
밖의 스코프에 콘솔로그는 값이 ccc 가 찍히는거다
그리고 완전히 c함수는 끝이나고
그다음
a에 ddd를 대입한다 (여기서 a는 이미 위에서 선언되었던 a에 ddd를 덮어씌우기한다)
그리고 나서는
d함수를 실행한다
그럼 d함수 안에 콘솔로그는 a를 찍고 ddd가 찍히는것이다
###################
정리 하자면
처음에
글로벌영역에 abc함수를 선언하고
이 abc함수 안으로 들어가서!
그안에 변수a 그리고 함수c 함수d를 이름만 선언해놓는다 (아직 값은 입력되지 않은 상태)
그리고나서
이제 실행은 하는데 여기서 변수먼저 실행을하는거고
(특히 함수는 실행이 밑에서 c()이런식으로 실행을 해주지않으면 함수안의 내용은 실행이되지않는다)
a 에 bbb가 대입되고
자 이제 밑에서 c()이렇게 실행을 하면
c라는 함수안에 변수테이블이 만들어지고 a가있으니 a를 일단 선언만 해놓는다
그 다음에 본격적으로 실행을 하는거다
=========================
호이스팅
a = 2;
var a;
console.log(a);
이거는
var 가 있으니 a라는 변수테이블이 먼저 만들어지고
본격적으로 위에서부터 아래로 실행이되면
a에 2가 들어가게되고
밑에 콘솔로그에 2가 출력됨
============================
var a = 2; 일때 무슨일이 발생할까?
먼저 var a 인터프린터가 변수를 선언한다
그다음
a = 2
a 라는 변수를 찾는다. 없으면 글로벌 변수를 생성하고 값을 대입한다. or 있으면 변수에 값을 대입한다.
그리고
var = a 는 a 라는 변수테이블을 먼저 생성한후에
a = 2 a테이블에 2를 대입한다
이걸 쫙 펴논것이
var a = 2 이다
원래는
var = a
a = 2
이렇게임
—————————
var a = ‘g’ // 글로벌 영역에다 g를 대입했다
function () {
console.log(a); //undifined
var a = ‘l’
console.log(a); //
}
fn()
왜 위에 콘솔로그는 언디파인드가 나오냐면
이건 실행 순서를 알면된다.
일단
글로벌영역에서 var a 라는 변수테이블만들고 g을 대입하고 나서
fn함수로 넘어가서
var a = ‘l’ 는 먼저 var a(인터프리터 시점(해석시점)) 테이블을 만들고나서
바로 콘솔로그를 실행한다 a 를 찍어보니 undefined 인 것이다
그니까 인터프린터 시점이 중요한것이다
인터프린터 시점에서
함수안에서 변수는 일단 변수 명만 만들어 놓고 다시 실행?시켜서 쭉 값을 대입한다
그럼 맨위에 콘솔로그니까 a 를 읽어보니 undefined인것이고
그 다음 a에 l 을 대입하고나서
그밑에 콘솔로그를 실행시키고 이런구조이다.
===========
자바스크립트는
한번에 다 실행되는게 아니고
일단 한번 쭉 인터프린터를 거친다음(일단 등록된 변수명이나 함수명만 기록해두고나서)
그다음 다시 위에서 아래로 본격적으로 실행이되는 스타일이다.
변수는 그렇게 값이 주어지고
특히 함수는 그냥 실행이 되지않고 밑에서 함수를 호출하는 코드가 나와야 실행이 그제서야된다
그래서 주의할점은
함수실행 순서를 잘 지정해야원하는대로 결과가 나올수있다
- 팁은
- 함수안에서 변수를 콘솔로그쳐서 없으면 무조건 상위 스코프를 따라 찾는다
- ———
- c();
- a = ‘dd’;
- d();
- 이거는 실행순서가 c 함수이고 그다음 a 변수 그다음이 d함수이다
*많이들 헷갈리는 개념인데 스코프는 함수를 호출할 때가 아니라 선언할 때 생깁니다. 호출이 아니라 선언요!
*함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 스코프로부터 가장 가까운 곳에 있는 변수를 계속 참조하게 됩니다.
*놀라운 것은 여러분이 만들었던 변수들(함수 안에서 선언한 변수 제외)도 모두 window 객체 안에 등록됩니다! 진짜인지 물어보죠.
var really = 'Really?'
window.really; // 'Really?'
=================================
중효한점
자바스크립트에서 함수를 생성하는 방법은 3가지가 있다
—————
함수 선언식 function foo () {}
함수 표현식 var foo = function(){}
new function 객체 생성 var foo = new Function()
——————
*참고로 호이스팅은 에러가 나는것이 아닐떄를 말하는거다 그니까 이렇게 최상단에 선언을 하면 원래(다른프로그래밍이면)는 에러가 나야 정상?인데 에러는 안나고 언디파인드로 넘어가는 현상이나 아니면 그냥 호이스팅이 되어 출력이되는경우를 말한다. 이게 자바스크립트의 특징이다.
함수 선언식은 호이스팅을 해도 먹히고(왜냐면 함수가 자신이위치한 코드에 상관없이 함수선언문 형태로 정의한 함수의 유효범위는 코드의 맨 처음부터 시작하기떄문 이걸 호이스팅이라고함 / 함수 호이스팅은 함수를 사용하기 전에 반드시 선언해야한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만든다. 그래서 함수 표현식 사용을 권장하고있다)
함수 표현식은 호이스팅이 안된다 에러가난다
————————
함수 호이스팅일 발생하는 원인은 자바스크립트의 변수 생성(instantiation) 과 초기화(initialization)의 작업이 분리되서 진행되기 떄문이다.
그니까 자바스크립트는 먼저 한번 쫙 훍고이름만 등록(인스턴트시점)하고 그다음 다시한번 읽는(초기화)작업을 한다
생성은 선언이고 -> var a; (젤 처음에 등록되는 시점)
초기화는 할당이락보면된다 a = 1; (그 이후 값이 넣어지는 시점)
그니까 자바스크립트는
코드를 위에서아래로 먼저 선언을 해놓고
마치고
한번더 위에서 아래로 할당을 한다
——————————
//함수 선언문 (호이스팅 됨)
showName();
function showName(){
console.log(name);
var name = "David Kwon";
console.log(name);
}
//함수 표현식 (호이스팅 안됨 - 에러발생)
showName();
var showName = function(){
console.log(name);
var name = "David Kwon";
console.log(name);
};
//new Function 객체 생성 (호이스팅 안됨 - 에러발생)
showName();
var showName = new Function("", console.log("David Kwon"));
