* 스코프, 호이스팅, TDZ
-스코프
변수, 함수, 클래스가 접근할 수 있는 유효 범위. 스코프는 참조 대상 식별자(변수명, 함수명, 클래스명 등)를 찾아내기 위한 규칙이다.
전역변수(어디에서든지 참조가 가능한 값)는 전역 스코프를, 지역변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다.
지역 스코프에는 함수가 선언될 때 발생하여 해당 함수 내에서 만 접근이 가능한 함수 스코프와 블록{}내부에서 선언되어 해당 블록에서만 접근이 가능한 블록 스코프가 있다.
-호이스팅
코드가 실행되기 전 변수선언이나 함수선언이 해당 스코프의 최상단으로 끌어 올려진(것 같이 보이는) 현상이다. 이 현상은 선언이 코드 실행 보다 먼저 메모리에 저장되는 과정으로 인한 것이다.
-Temporal Dead Zone(TDZ)
선언 전에 변수를 사용하는 것을 허용하는 개념상의 공간이다. TDZ는 변수를 선언 및 초기화 하기전에 사용하게 되면 개념상의 공간인 TDZ 상태에서 사용하는 것 이기 때문에 ReferenceError 에러가 나타나게 된다
eg)
white; //ReferenceError
const white = '#FFFFFF';
white; //'#FFFFFF'
* 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
-함수 선언문과 호이스팅
함수 선언문이란, 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것이다. 함수 선언문은 함수 전체를 호이스팅한다. 정의된 범위의 맨 위로 호이스팅돼어 함수 선언 전에 함수를 사용할 수 있다는 것이다.
eg)
function sum(a, b) { //함수 선언식 - 함수 전체 호이스팅
return a + b;
};
sum(50, 50); // 100
-함수 표현식과 호이스팅
함수 표현식이란, 정의한 함수를 별도의 변수에 할당하는 것이다. 함수 표현식은 선언부만 호이스팅하게 된다.
eg)
var minus; // 함수표현식 - 선언부만 호이스팅
minus(100, 50) //Uncaught TypeError: minus is not a function
function (a,b) { //함수 표현식 - 할당부는 그대로
return a - b;
}
* let, const, var, function의 실행 원리
-let
값이 선언된 이후에도 값을 변경할 수 있다.
블록 스코프를 가진다.
eg)
let name = "rick"
if(name){
let name = "morty";
console.log(name); //morty 블록스코프 내
};
console.log(name); //rick 블록스코프 외
function hello() {
for (let i=0; i<12; i++) {
...
}
console.log(i)
}
hello(); //ReferenceError: i is not defined
블록바깥에서는 변수접근 불가능
-const
초기값을 변경할 수 없다.
블록스코프를 가진다.
TDZ영향을 받아서 초기화하기전에 가
eg)
const b = 1;
for(var i =0; i<10; i++) {
coonsole.log(b) //error
const b = 2;//초기값 변경불가능
}
-var
값이 선언된 이후에도 값을 변경할 수 있다.
함수스코프를 가진다.
호이스팅이 가능하다.
eg)
function func() {
var a = 1; //함수스코프
}
console.log(a) // error
for(var i =0; i<10;i++) {
var b = 2; // 전역스코프
}
console.log(b) // 2
var b;
function func() {
var a;
a = 1;
}
console.log(a) // error
-Function
일반적으로 반복되는 코드를 하나로 묶거나, 의미를 부여하고 역할을 나누기 위해 사용한다.
function 함수이름(인자1, 인자2, 인자3) {
// 명령문
}
함수이름(인수1, 인수2, 인수3); // 명령문에 있는 내용을 실행한다.
인자(Parameter 또는 매개변수)란 함수를 호출할때 전달 받기 위해 지정한 변수를 뜻하며, 몇개든 콤마를 이어붙여 입력받을 수 있다.
인수(Argument)란 인자에 전달하는 값 그 자체를 뜻한다.
함수는 return 키워드로 값을 반환할 수 있다.
함수를 실제로 구현해보자
요구사항 customers 변수로 입력받은 값의 사람들에게 커피 주문을 받는다.
hot 주문을 받은 경우 "따뜻한 커피 나왔습니다! [주문한 사람 이름]님" 처럼 출력하고 iced 주문을 받은 경우 "아이스 커피 나왔습니다! [주문한 사람 이름]님"처럼 출력한다.
function orderCoffee(customer) {
if ( customer.type === "hot" ) {
console.log('따뜻한 커피 나왔습니다! ' + customer.name + '님');
} else {
console.log('아이스 커피 나왔습니다! ' + customer.name + '님');
}
}
const customers = [
{ name: "민재", type: "hot" },
{ name: "둘리", type: "iced" },
];
for (const customer of customers) {
orderCoffee(customer);
}
// Print: 따뜻한 커피 나왔습니다! 민재님
// 아이스 커피 나왔습니다! 둘리님
* 실행 컨텍스트와 콜 스택
-실행 컨텍스트
자바스크립트 코드가 실행되는 환경을 의미한다
-콜 스택
코드가 실행되면서 생성되는 실행컨텍스트를 저장하는 자료구조이다.
* 스코프 체인, 변수 은닉화
-스코프 체인
스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다. 이 현상을 스코프 체인 이라고 하며 스코프가 중첩되어있는 모든 상황에서 발생한다.
-변수 은닉화
외부 객체로부터 '속성 값(데이터, 멤버 변수값)'을 감추는 특성이다.
