자바스크립트의 '식'과 '문'
자바스크립트 언어의 양대 구성요소는 '식'과 '문'이다.
어떤 코드가 '값'으로 마무리되면 '식'이고 그 외는 모두 '문'이다.
'식'과 '문'을 구별하는 방법은 세미콜론(;)도 있다.
'식'
// '식'
let name = 'miniddo';
let age = 20;위의 예제처럼 '값'으로 마무리되는 구문, 즉 '식'에는 세미콜론(;)을 붙인다.
// '식'
let number = [1, 2, 3, 4];
let mapValue = number.map(num => {
console.log(num)
});
console.log(mapValue); // [undefined, undefined, undefined, undefined]map과 forEach은 반환'값'이 undefined인 함수호출 '식'이다.
'문'
'문'은 세미콜론(;)을 붙이지 않는다.
// '문'
let num = 10;
while(num <= 10) {
console.log(num);
num--;
}while문은 '값'을 반환하지 않고 반복문을 도는 역할만 하기 때문에 '문'이다.
같은 이유로 if문, switch문, for문도 '문'이다.
다만, 이러한 반복문의 경우 '문'으로 구분하기 애매한 부분이 있다.
반복문도 결국은 '값'을 변경하는 구문이기 때문에 상황에 따라서는 '식'으로 보기도 한다.
결론은 자바스크립트는 모든 것을 '값'으로 표현한다는 것이다.
자바스크립트 함수는 반환 '값'이 있다!
function foo() {
return 0;
}
const x = foo();
console.log(x); // 0함수도 예외는 아니다.
함수 구문 자체는 '문'처럼 보이지만 return하는 '값'이 있기 때문에 '식'으로 볼 수 있다.
따라서 함수 구문에는 세미콜론(;)을 붙이지 않지만, x라는 변수에 할당할 때는 세미콜론(;)을 붙인다.
함수의 종류
함수 정의문
function foo() {
return 1;
}가장 일반적인 형태의 함수로 함수 정의문은 세미콜론(;)을 붙이지 않는다.
함수식
const x = function foo() {
return 1;
};함수식은 함수 반환 값을 x에 할당하기 때문에 '식'으로 취급하여 세미콜론(;)을 붙인다.
따라서 함수의 이름인 foo는 의미가 없어지고 함수 이름을 생략하는 익명함수가 등장한다.
익명 함수
const x = function () {
return 1;
};즉, 함수식처럼 함수를 '값'으로 취급할 땐 함수 이름을 생략할 수 있다.
그러나 무조껀 이름을 생략할 수는 없다. 재귀 호출의 경우, 함수 이름이 있어야 재호출이 가능하다.
const x = function foo() {
foo(); // 재귀호출 - 함수 이름 생략 불가
return 1;
};즉시실행 함수
funtion() {
return 1;
}할당 받을 변수도 없고 이름도 없는 함수를 즉시실행 함수라고 한다.
하지만 이름이 없는 단독 함수는 오류가 발생하기 때문에, 함수 전체를 ( )로 감싸준다.
(function() {
return 1;
})()( )로 감싸준 함수 뒤에 ( )를 붙이면 즉시 호출이 일어난다.
이름이 없는 함수는 한 번만 호출되기 때문에 재호출이 불가능하다.
callback(콜백) 함수
callback(콜백) 함수?
다른 함수의 매개변수로 함수를 전달하고, 매개변수로 전달한 함수가 다시 호출되는 함수
즉, 매개변수로 받은 값을 직접 실행하는 것이 아닌 다른 함수한테 호출을 위임하는 함수를 말한다.
매개변수로 함수를 전달하는 것은 함수를 '값'으로 취급하기 때문에 가능하다.
function foo(x) {
x(); // 함수 호출
return 0;
}
const callValue = foo(function() { }); // 매개변수로 함수 전달HOC 함수
HOC(High Order Components)?
함수를 매개변수로 받고 반환도 함수로 하는 함수
function foo(x) {
x();
return function() {}; // 반환(출력) = 함수
}
const hocValue = foo(function() {}); // 매개변수(입력) = 함수