# 33 가지 Javascript 필수 개념 - 7. Expression vs Statement

본 내용은 아래의 링크를 참조하여 작성되었습니다

(github.com/leonardomso/33-js-concepts#7-expression-vs-statement)

 

 

* 표현식(Expression) 과 문장(Statement)

JS 는 특이하게 문법적으로 "표현식" 과 "문장" 이라는 두개의 카테고리로 나뉠 수 있다.

아주 간단히 이야기하면, 표현식(Expression)은 값을 만들어 낼 수 있는 것이고,

문장(Statement)은 그 자체로 어떤 값을 만들어 낼 수 없는 것을 말한다.

 

예를들면,

 

let num = 10;
num * 2;
num + 2;
console.log(num);

이런 코드가 있다 치면

let num = 10; 은 Statement 이지만, 

num * 2;

num + 2; 는 Expression 으로 취급된다

 

let num = 10; 이란 구문 자체가 어떤 value 를 만들어 내는게 아니라 그냥 선언을 하는 것이기 때문이다

반면에 num * 2 와 num + 2 는 이 구문 자체가 20, 12 라는 value 를 만들어 내기 때문에 Expression 으로 취급된다.

그리고 변수 num 은 그 자체로 state(상태) 로 취급된다. (부여하는 값에 따라 변동 가능한 대상이므로)

 

 

좀 더 구체적으로 각각이 될 수 있는 대상을 살펴보면,

 

(1) Expression

2 + 2 * 3 / 2
 
(Math.random() * (100-20)) + 20
 
functionCall()
 
window.history ? useHistory() : noHistoryFallback()
 
1+1, 2+2, 3+3
 
declaredVariable
 
true && functionCall()
 
true && declaredVariable

 

위의 코드 전부는 Expression 으로 취급된다.

각 구문 하나하나가 자체적으로 value 를 낼 수 있기 때문이다.

 

(2) Statement

: JS 에서 Statement 로 취급 되는 대상은

 - 1. if

 - 2. if-else

 - 3. while

 - 4. do-while

 - 5. for

 - 6. switch

 - 7. for-in

 - 8. with (deprecated)

 - 9. debugger

 - 10. variable declaration

이며, 이 각각은 문법을 알면 알 수 있지만, 이것 자체로는 어떤 값을 만들어내지는 못한다

조건문, 반복문, 변수 선언 등 이런게 구문 자체가 value 를 리턴하는 것은 아니란 의미다.

 

 

그렇다면 이런 내용은 왜 학습해야 하는 걸까?

개인적인 생각으로는 그 이유가 "함수" 에 있다고 생각한다

JS 의 가장 중요한 개념이 함수이기도 하지만,

함수는 어떻게 보면 Expression 이기도 하고 Statement 이기도 하기 때문이다.

 

 

 

* Function Declarations, Function Expressions, Named Function Expressions

 

(1). Function Declarations

함수를 선언한것 자체로는 Statement 로 취급된다

function foo(func) {
 return func.name;
}

 

함수 선언의 특징은 호이스팅(Hoisting) 된다는 점이다.

그래서, 만약에 아래와 같이 코드를 작성했을때,

 

var num1 = 10;
var num2 = 20;
var result = add(num1, num2); // 30
function add(param1, param2) {
    return param1 + param2 ;
}

 

함수가 선언된것 보다 먼저 add 를 호출 했음에도 

두 인자를 더하는 30을 얻을 수 있게 된다.

(Hoisting 에 관한 내용 참조 : gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html)

 

 

(2) Function Expressions

JS 에선, 함수를 직접 선언하는 것 말고도 변수에 담아 표현식으로 나타낼 수 도 있다.

var add = function (arg1, arg2) {
 return arg1 + arg2;
}

 

함수의 선언문(Function Declarations) 와 함수 표현식(Function Expression) 의 차이점은

호이스팅 되느냐 안되느냐의 차이가 있다.

Function Expression 은 호이스팅이 되지 않는다

그래서 아래 같이 코드를 쓰면 오류가 난다

var num1 = 10;
var num2 = 20;
var result = add(num1, num2);
var add = function(arg1, arg2) {
 return arg1 + arg2;
}

 

 

(3) Named Function Expressions

Named Function Expression 은 위의 두 가지를 섞어놓은 형태라고 볼 수 있다

var num1 = 10;
var num2 = 20;
var addVariable = function addFunction(param1, param2) {
    return param1 + param2 ;
}

 

예를들면, 위 처럼 변수에 함수를 할당하면서 

동시에 익명의 함수가 아니라 함수의 이름을 addFunction 이라고 이름을 붙여주는 형태가

Named Function Expression 이다.

 

이때 함수의 호출은 함수의 이름(addFunction)으로 하는게 아니라 함수 표현식과 마찬가지로

변수 이름(addVariable)으로 호출 한다

var num1 = 10;
var num2 = 20;
var addVariable = function addFunction(param1, param2) {
    return param1 + param2 ;
}
var result = addFunction(num1, num2); // addFunction is not defined
var result2 = addVariable(num1, num2); // 30

 

이 경우, 함수 이름을 함수 선언 부에 또 다시 작성하여

재귀함수 쓰듯 다시 불러올 수 있다

 

var num1 = 10;
var num2 = 20;
var addVariables = function addFunction(arg1, arg2) {
  var reg = arg1 + arg2;
  if (reg === 30)  {
    reg = addFunction(reg, 10);
  }
  return reg;
}
var result = addVariables(num1, num2);
console.log(result); // 40
 

 

한가지 주의 할 것은 일부 브라우저의 경우 

Named Function Expression 을 두번 실행하는 경우가 있으므로

주의 해야 한다

(참조 : blog.niftysnippets.org/2010/09/double-take.html)

 

 

 

- References

1. gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

2. blog.niftysnippets.org/2010/09/double-take.html