181114 - TIL

---

주제: 자바스크립트 

강의: 자바스크립트 부트캠프

날짜: 2018.11.14

강의자: 김민태님

---

### 라이프 사이클

자바스크립트의 자원들, 값, 변수, 함수 등은 생애주기를 가진다

### 스코프

모든 값은 저장되며 저장되기 위해서는 저장소가 필요한데, 값이 저장되는 장소를 스코프라고 한다.

• 전역스코프 - 단하나만 존재, 글로벌스코프가 생겼다는건 소프트웨어의 시작을 의미한다. 코드의 관점에선 언제나 존재하는 것
• 함수스코프(지역스코프) - es2015까지는 지역스코프, 함수스코프 같은 의미
• 블럭스코프(es2015에서 추가됨) - 함수가 아닌 블럭에 의해서 만들어진 스코프, 블럭은 코드블럭. if문이나 반복문의 {} 사이안에서 존재하는 스코프

스코프는 중첩될 수 있다.

바깥 쪽에선 안쪽을 알 수 없다. 안 쪽에선 바깥쪽을 알 수 있다

함수를 호출할 때 지역스코프를 만든다. 

//블럭스코프

var title = '전역 스코프';

function displayTitle() {

var title = '함수 스코프';

if (title) {

let title = '블럭 스코프';

console.log(title);//블럭스코프

}

console.log(title);//함수스코프

}

displayTitle();

console.log(title);//전역스코프

## var vs. let

• let - let으로 만든 변수는 블럭스코프를 만들 수 있다
• var - 함수 스코프 밖에 만들 수 없다. 블럭스코프를 만들 수 없다. 위 예제에서 if문안에 var를 쓰면 오류가 난다. var는 블럭스코프를 못 만들기 때문에 title변수가 중복으로 오류가 난다

var 변수 키워드를 사용하지 않고 변수명에 값을 넣는다면 자바스크립트는 전역까지 찾다가 변수명이 없다면 변수를 만들어버린다.- 구 브라우저에서(ie9이하) 문제없이 돌아간다. 최신 브라우저는 오류남! 

var days = ['월','화','수'];

for(var i=0; i<days.length; i++) {

console.log(days[i]);

}

console.log(i);// 3; i++로 3까지 증가했다가 i<days.length에서 걸려서 끝나기 때문에 var로 만든 i는 3.

for(let j=0; j<days.length; j++) {

console.log(days[j]);

}

console.log(j);//프로그램 에러! let으로 만든 j는 for문안에서만 존재하기 때문에 for문 밖에선 j를 읽을 수 없다

## 호이스팅

var사용시에 쓰임…

function displayPerson() {

console.log(`name : ${name}`);//var로 만든 변수는 스코프안에 진입하는 순간 var name을 일단 스코프내에 변수는 만든다. 하지만 대입문은 아직 실행전이기 때문에 undefined가 나온다

console.log(`age : ${age}`); //프로그램에러!, let은 코드 실행시 변수생성이 안되었기 때문에 오류가 난다.

var name = '홍길동';

let age = 25;

}

displayPerson();

함수실행시점에 함수 내에 만들어진 var로 만들어진 변수를 (변수생성 위치에 상관없이 ) 일단 끌어모아서 변수를 생성하는 것을 호이스팅이라고 한다

## 클로저

function makeUnit(unit) {

return function(value) {

return `${value}${unit}`;

}

}

let px = makeUnit('px’);//호출되고 그 값이 리턴된 시점에 makeUnit함수는 종료.

let em = makeUnit('em');

console.log(px(11));//하지만 px를 호출할때 unit값이 살아있다. 클로저!

console.log(px(24));

console.log(em(32));

//위 코드를 화살표 함수로 바꾼다면 이렇게

let makeUnit = unit => value => `${value}${unit}`;

let px = makeUnit('px');

let em = makeUnit('em');

console.log(px(11));

console.log(px(24));

console.log(em(32));

노트 요약

---

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다