오늘도 역시 프리코스 복습 느낌으로 진행하였다.
오전에는 linting 툴인 eslint 와 testing 툴인 jest를 학습하여
페어님과 같이 실습하면서 적용해보았는데 우리 프로젝트 파일에 자꾸 eslint의
airbnb 셋팅이 적용이 안돼서 결국 새로 다시했더니 됐다.
처음엔 뭐가 문제였던거지..?
오후에도 페어분과 서로 pass me 코드를 리뷰하고 새롭게 es6 문법과 eslint를 적용하여
다시 코드를 작성하는 작업을 했다.
어제부터 git remote 로 공동작업을 하는 것을 반복하다 보니 이제 조금 익숙해졌다.
오늘 오전에 잠깐 스코프와 클로저에 대해 복습하는 시간이 있어 간단하게 정리 해야겠다.
scope
스코프는 변수와 그 값이 어디서 부터 어디서 까지 유효한지를 판단하는 범위
lexical scope
렉시컬 스코프는 스코프가 코드가 작성될 때 작성되어 결정되기때문에
우리가 코드를 작성하면서 스코프를 계산하고 확인할 수 있다.
자바스크립트는 대부분의 경우 렉시컬 스코프로 생성된다.
var,let,const 의 경우 모두 렉시컬 스코프.
dynamic scope
다이나믹 스코프는 스코프가 실행시에 결정된다.
그러기 때문에 실행되는 곳을 잘 생각해서 코드를 작성해야 한다.
this(excution context) 키워드의 경우 다이나믹 스코프 이다 .
4 rules
자바스크립트의 스코프는 크게 4가지의 특징이 있다.
1. 스코프는 중첩이 가능하다.
동일한 스코프 범위 내에서도 변수를 중첩하여 생성할 수 있다.
function foo(){
let a = 1;
let b = 2;
let c = 3;
}이렇게 같은 범위의 블록스코프를 가지는 여러 변수를 생성 가능.
let globalVar = 'I`m global'// window 객체와 연결
function hi(){
console.log(`hi, ${globalVar}`)
}2. block scope vs function scope
블록 레벨({}이 중괄호 단위)로 형성되는 블록 스코프와
함수 레벨로 형성되는 펑션 스코프 두가지 경우가 있다.
ES6 이전에 변수 선언에 사용되던 var 키워드는 펑션 스코프,
ES6 부터 새롭게 등장한 let,const 키워드는 블록 스코프로 형성된다.
for(var i = 0; i < 4; i++){
//
}
console.log(i) //4
for(let j = 0; j < 5; j++){
//
}
console.log(j) //ReferenceError 되도록이면 디버깅과 스코프 관리에 효율적인 let,const를 지향하도록 하자!
3.전역 스코프
함수 외부에서 선언된 모든 변수는 전역 범위로
전역 변수는 window 객체와 연결된다.
let a = 'hello world!' //이렇게 전역으로 선언한 변수는 window 객체와 연결되어
//window.a 가 된다.4.hoisting
var 변수 선언은 범위에 따라 선언과 할당으로 분리되어
변수 선언을 scope 상단으로 끌어올린다.
console.log(a) //undefined
var a = 1
console.log(b) //ReferenceError
let b = 2위처럼 되는 이유는 var의 경우는
var a;
console.log(a) //undefined
a = 1이렇게 var 변수의 선언이 scope 상단으로 hoist 되기때문
이러한 호이스팅 때문에 아래와 같은 문제가 생길수도 있다.
var a = 1;
function foo(){
console.log(a); //undefined
var a = 'potato'
}얼핏 보면 아래에서 변수 a가 재선언 되기전에 위에 이미 선언된 동일한 이름의 변수가
있기 때문에 1을 콘솔에 출력할것 같지만 아래처럼 호이스팅으로 변수 선언이 펑션스코프의
최상단으로 끌어 올려지기 때문에 console.log는 undefined를 출력한다.
var a =1;
function foo(){
var a; //undefined
console.log(a) //undefined
a = 'potato'
}
closure
클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수로
보통 함수를 리턴하는 형태로 클로저를 사용한다.
그러나 단순히 함수를 리턴한다고 해서 클로저는 아니다 !
const adder = function(x){
//리턴되는 함수가 외부함수의 변수 x의 접근하는 클로저 함수이다.
return function(y){
return x + y;
}
};
let add5 = adder(5);
let result = add5(3)
console.log(result) //8화살표 함수
그리고 위의 함수를 ES6의 문법인 화살표 함수를 통해
위의 adder 함수를 아래처럼 간단하게 작성할 수 있다.
const adder = x => y => x + ymdn의 화살표 함수 공식 문서에 따르면
매개변수가 1개일땐 괄호는 선택사항.
그러나 매개변수가 없다면 괄호는 필수
var func = x => x * x; //이렇게 괄호없이하면 뒤에는 자동적으로 return
var func = (x, y) => { return x + y; }; // block이 있으면, "return"이 필요헉헉 오늘도 분량조절 실패..!
