[SEB FE] Section 1
Unit10 - [JavaScript] 핵심 개념과 주요 문법
- JavaScript Koans
회고
오늘은 페어와 함께 JavaScript Koans를 마무리 했으며 이번 과제도 역시 혼자 했다면 상당히 헤매면서 오래걸렸을 거 같다. '빨리 가려면 혼자 가고, 멀리 가려면 함께 가라.'라는 아프리카 속담이 있다던데... 정확한 거 같다.
이번 문제는 새로운 개념을 학습하는 것은 아니고 지금까지 배웠던 개념들을 문제를 통해 상기시키고 또한 안 배웠던 개념도 문제로 나왔는데...스스로 찾아보라는(?) 깊은 뜻이 있었다. ^_^;
날씨가 비로 인해 새벽처럼 계속 어두워서 뭔가 기분이 졸린 상태였으나 그래도 무사히 문제도 풀고 잘 마친 거 같아 뿌듯하다.(하핫) 오늘 하루도 잘 마무리 하고 내일도 화이팅~!
JavaScript Koans
학습 목표
- JavaScript의 주요 개념인 아래의 내용에 대해 설명할 수 있다.
- JavaScript의 타입
- 변수 선언 키워드 let과 const
- 화살표 함수
- 스코프
- 배열
- 객체
- spread
- 구조분해할당
주요 개념 정리
Const
- 'const'로 선언된
변수에는 재할당(reassignment)이 금지된다. - 'const'로 선언된
배열의 경우 새로운 요소를 추가하거나 삭제할 수 있다. - 'const'로 선언된
객체의 경우, 속성을 추가하거나 삭제할 수 있습니다.
scope
- scope는 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳을 말한다.
함수 선언문과 함수 표현식 그리고 호이스팅의 관계
함수 선언문
function getName() {
console.log('name');
}함수 표현식
var name = function() {
console.log('name');
};호이스팅
호이스팅은 무엇인가?
-
호이스팅(Hoisting)의 사전적 의미는
끌어 올리다라는 뜻을 가지고 있다. 자바스크립트에서도 같은 의미로 쓰인다. 함수 안에 있는 변수나 함수 맨위로 끌어올린다는 것이다. -
실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser가 내부적으로 끌어올려서 처리한다.
호이스팅의 대상
var와함수 선언문이 호이스팅의 대상이다.let과const그리고함수 표현식은 해당되지 않는다.
함수 선언문의 호이스팅
function count() {
console.log('count는 2이다.');
}
count();-
만약 함수 표현식이 이런 식으로 되어 있다면 오류가 난다. 왜냐하면 자바스크립트에서는 위에서 아래로 코드를 읽기 때문이다.
-
그러나 함수 선언문의 경우 호출이 위에 있든 아래에 있든 상관없이 정상적으로 작동한다!
결론
-
해당 에러를 피하기 위해 함수나 변수를 사용하기 전에 항상 미리 선언을 해두고 사용하는 버릇을 들이는게 가독성과 디버깅에 좋다.
-
ES6 이후로 실제 현업에서는 var 키워드는 절대 쓰지 않으며 모든 함수를 무조건 const와 arrow syntax로 선언하기 때문에 최근 들어서는 사실상 크게 신경쓰지 않는 부분이라고 한다.
렉시컬 스코프와 클로저
렉시컬 스코프 (Lexical scope)
-
함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다.
-
즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다.
-
다른 말로, 정적 스코프라 부르기도 하다.
클로저 (closure)
-
클로저는 함수와 그 함수가 선언되었을 때의 렉시컬 환경(Lexical environment)과의 조합이라고 부르며, 내부 함수가 외부(enclosing) 함수 변수에 액세스(접근) 할 수 있는 자바스크립트의 기능을 말한다.
-
외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근할 수 있다. 그 이유는 자신이 생성될 때의 환경(Lexical environment)을 기억하고 있기 때문이다. 그렇기에 이러한 함수를 클로저(Closure)라고 부른다.
this
-
자바스크립트에서는 선언할 때 값이 결정되는 것이 있는데 그것을 클로저라고 하고, 반면 호출하는 방법에 의해서 값이 결정되는 것이 바로 this이다.
-
this가 바로 호출할 때 결정되는 것이고, 호출한 객체가 바로 this이다.
