---- 변수 호이스팅: var가능 , let, const 는 TDZ때문에 호이스팅 제지됨 -----
console.log(x); // 선언은 아래에 있지만, var x;라고 최상위로 올라가 선언됨. 값은 undefined다
var x = 5;
console.log(x) // 값: 5
---- 함수 호이스팅: 함수선언식(O) / 표현식은 (X) -----
fnc(); // 함수는 전체가 끌어올려져서 실행됨. console출력됨
function fnc(){
condole.log('함수선언식');
}
TDZ: Temporal Dead Zone
변수가 선언되었지만 초기화되기 전까지 액세스할 수 없는 상태를 말한다
var, let, const 다 호이스팅이 일어난다.
하지만 '변수 선언 키워드' 특성에 따라 다르다.
const ,let ,var는 다 호이스팅이 이루어 진다. 선언키워드 마다 특성이 다르다. 총 3개의 선언, 초기화, 할당의 과정을 거치게 된다. 선언이 되고 초기화가 이루어 지지 않으면 사용이 안된다. 그것을 TDZ라고 한다.
var : 함수스코프
let : 블록스코프
const : 블록스코프
선언, 초기화가 동시에 var a ; => undefined
선언단계
선언+초기화+할당 동시에 되야함
할당단계
초기화단계 (실제 코드에서 실행)
할당단계
[var] 선언과 동시에 초기화가 일어난다. undiefine가 초기화가 같이 일어나서 에러가 나지 않고 사용이 가능하다.
[let] 선언과 초기화가 따로 분리 되어있다. 선언을 하고, 초기화를 해주지 않으면 사용이 안되서 에러가 난다.
[const] 처음부터 선언, 초기화, 할당을 하지 않으면 사용 자체가 안된다.
Error name is not defined at <anonymous> => 초기화 되기전에 변수를 사용하려 해서 발생한 오류 Missing initializer in const declaration => 변수를 선언할 때 초기화가 누락되었을 때 발생
함수 선언식
fnc(); // 변수나 선언이 스포크 맨 위로 끌어올려진것을 의미
function fnc(){
condole.log('함수선언식');
}
함수 표현식
1.
const test = function () {
console.log('함수표현식');
}
text();
2.
const btn = document.querySelector('#btn');
btn.addEventListener('click', function() { // function 부분도 값처럼 사용하기에 표현식이다
console.log('btn click event');
});
기명 함수 표현식
자기 자신을 호출하는 '재귀함수' 때 사용되는 함수 표현식이다
1. 함수 표현식으로 함수가 할당된 변수에는 자동으로 name이라는 프로퍼티를 가지다
const sayHi = function printHiInConsole() {
console.log('Hi');
};
console.log(sayHi.name); // printHiInConsole
2. 재귀호출: 자기 자신을 부를 호출
let countdown = function printCountdown(n) {
console.log(n);
if (n === 0) {
console.log('End!');
} else {
printCountdown(n - 1);
}
};
let myFunction = countdown;
countdown = null;
myFunction(5); // 정상적으로 동작
다른 함수에게 인수(argument)로 전달되어, 그 함수가 특정 시점이나 조건에 따라 호출하는 함수. 비동기적 프로그래밍에서 주로 사용된다
// 콜백 함수 예제
function greet(name, callback) {
console.log("안녕하세요, " + name + "님!");
callback(); // 콜백 함수 호출
}
function sayGoodbye() {
console.log("잘가세요!");
}
// 함수 호출
greet("예시", sayGoodbye);
고차함수
다른 함수를 인수로 받거나 함수를 반환하는 함수 함수를 추상화하고 코드를 더 모듈화할 수 있다
// 함수를 인수로 받는 고차 함수
function applyOperation(x, y, operation) { // operation 함수
return operation(x, y);
}
function add(x, y) { // 두 수를 더하는 함수
return x + y;
}
function multiply(x, y) { // 두 수를 곱하는 함수
return x * y;
}
console.log(applyOperation(5, 3, add)); // 출력: 8
console.log(applyOperation(5, 3, multiply)); // 출력: 15
