하나 이해하면.. 또 하나를 이해해야만 진전이 가능한… 미로같은 JS…😢
자바스크립트는 표현식(또는 식)와 문으로 구성 되어있다.
식은 문처럼 동작할 수 있지만, 문은 식처럼 동작할 수 없다.
식(expression)이란 하나의 값(value)를 반환하는 코드의 단위이다. 값은 기본값과 객체 등의 참조값도 될 수도 있다.
값으로 평가될 수 있는 문은 전부 식이다.
값자체도 식으로 인정한다.
// 값 식의 예
// 1. undefined
console.log(undefined);
// 2. null
console.log(null);
// 3. boolean
console.log(true);
console.log(false);
// 4. number
console.log(1);
console.log(NaN);
console.log(-2);
// 5. string
console.log("string");
연산자가 포함되어 하나의 값을 반환하는 경우도 식이 된다.
아무리 식이 길어도 하나의 값으로 반환하므로 식이다.
// 연산식의 예
10 + 10
(Math.random() * (100 - 10)) + 10
대부분 객체 생성을 위해 사용되는 리터럴 또한 값으로 반환되므로 식이 되며, 리터럴은 기본값이 아닌 참조값으로 사용된다.
// 리터럴의 예
function() {} // 함수 리터럴
[1,2,3] // 배열 리터럴
{key:value} // 객체 리터럴
/a/ // 정규 표현식 리터
함수호출 시에도, 함수는 호출한 값을 반환하므로 식이다. 반환 값이 없는 함수의 경우에도 undefined로 값을 반환하므로 이 역시 식이다.
문(statement)이란 프로그램을 구성하는 기본 단위이자 최소 실행 단위(지시문)이다.
문은 파싱된 이후에 아무것도 남지 않으므로 값으로 쓸 수 없다.
자바스크립트에서 사용되는 문은 미리 엄격하게 정의되어 있는 형식의 제어문인
조건문(if, if else, switch, case), 반복문(for, for in, while, do while, break, continue, label), 함수 선언문(return), 예외 처리 구문(try…catch) 등 이다.
// 제어문의 예
// 1. 조건문
if(1 > 10) {
console.log(1);
}
// 2. 반복문
for(let i = 0; i < limit; i++) {
console.log("true");
}
// 3. 함수 선언문
function x() {}
// 4. 예외 처리 구문
try {}
catch(e) {}
// 5. 변수 선언문
var x;
// 6. 변수 할당문(할당문의 변수에 값을 할당하므로 문인 동시에 식이다)
x = 2;
// 7. 함수 호출식/문
x(value);
식은 문의 일부일 수도 있고 자체적으로 문이 될 수도 있다.
식의 끝에 세미콜론”;”을 추가하면 표현식 문(Expression Statement)으로 변환 된다.
[ console.log(); 사용시 괄호 안 쪽에 세미콜론이 입력되었을 때 콘솔 에러가 나는 이유는 값을 반환해야 할 식이 문으로 선언 되었기 때문이다. 문은 값을 반환 하지 않기 때문에 식의 자리에 들어 갈 수 없다. ]
var x; // 변수 선언문은 값으로 평가가 불가하므로 식이 아니다.
2+2 // 연산식
x = 2+2; // x = 2+2는 식인 동시에 문이기도 하다.
console.log(x(3)) // 함수 호출식 -> 값을 반환하는 함수 호출이므로 식으로 쓴다.
x(3); // 함수 호출문 -> 값을 대입하여 함수를 파싱하는 명령을 한다.
여기서 중요한 차이점은 식은 값을 반환하고 그 값을 변수에 할당 할 수 있다.
식인 동시에 문이기도 한 위의 예제를 보면 2+2는 연산식이며 이 값을 변수 x에 할당하고 있다.
문은 변수에 할당이 불가능하다.
여기서 헷갈렸던 부분이 함수 선언문과 함수 표현식이 왜 다른지인데..
함수 선언문은 기본적으로 문이다. 함수 표현식은 익명함수라고도 불리고, 이는 함수를 생성하고 변수에 값을 할당하는 형태로, 연산자 “=” 를 이용하여 변수에 함수를 값으로 할당하므로 식이다.
값이 존재해야 하는 곳에 함수를 선언하면, 자바스크립트는 그 함수를 값으로 사용하려고 한다.
값이 들어가지 않는 곳에 함수를 선언하면 문으로 사용된다.
if() {
function x() {} // 함수 선언문
}
function x() {} // 함수 선언문
callFuncX(function(){ // 함수 표현식
})
Resources
Leave a Reply