[JS] 7. 표현식 & 문

모든 자바스크립트 개발자가 알아야 하는 33가지 개념

GitHub - yjs03057/33-js-concepts: 모든 자바스크립트 개발자가 알아야 하는 33가지 개념

표현식(Expression) vs 문(Statement)

자바스크립트에는 2가지 주요 문법이 있습니다.

• 표현식(Expression)
• 문(Statement)

표현식(Expression)은 문(Statement)처럼 동작할 수 있지만,
문(Statement)은 표현식(Expression)처럼 동작할 수 없습니다.

표현식(Expression)

• 표현식(Expression)은 단일 값을 생성합니다.
• 값으로 평가될 수 있는 문은 전부 표현식입니다.
• 값 자체도 하나의 값으로 평가되기에 표현식입니다.

10
3.14
'eun'

• 아무리 표현식이 길어지더라도 결국 단일 값을 생성하기에 표현식입니다.

10 + 10
20 * 20
(Math.random() * (100 - 10)) + 20 // 95.80295646022229
true == 1; // true

• 리터럴은 값으로 평가되기에, 리터럴도 결국은 표현식입니다.

{name: 'eun', address:'Seoul'} // 객체 리터럴
[ 1, 2, 3] // 배열 리터럴
function() {} // 함수 리터럴
/[A-Z]+/g // 정규 표현식 리터럴

• 함수 호출의 결과 또한 하나의 값을 반환하기에 식입니다.

문(Statement)

• 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위입니다.
• Javascript에서 문은 값이 들어가야 할 곳에 들어갈 수 없습니다.
• 따라서 문은 함수의 인자, 대입 연산된 값, 연산자의 피연산자, 반환 값으로 사용할 수 없습니다.

foo(if (true) { return 2 }) // Error

Javascript에서 사용되는 문은 아래와 같습니다.

• if
• if-else
• while
• do-while
• for
• switch
• for-in
• debugger
• variable declaration

if (true) { 9 + 9 } // 18

문을 사용해서 결과값을 출력하였지만, 문의 결과를 표현식처럼 사용할 수 없습니다.
지금까지 배운 내용으로는 문은 아무런 값도 반환하면 안 됐습니다.
따라서 우리는 이 반환된 값을 이용할 수 없고, 따라서 문(Statement)이 반환하는 값은 의미가 없습니다.

함수 선언, 함수 표현식, 네임드(Named) 함수 표현식

• 함수 선언문은 문(Statement)입니다.

function foo(func) {
  return func.name
}

• 익명 함수라 불리는 함수 표현식 또한 식(Expression)입니다.

foo(function () {} ) // ''

• 이름이 있는 네임드(Named) 함수 표현식 또한 식(Expression)입니다.

foo(function myName () {} ) // 'myName'

• 원래 값이 들어올 곳에 함수를 선언하게 되면, Javascript는 그 함수를 값으로 사용하려고 합니다.
• 선언된 함수가 값으로 사용될 수 없다면 에러가 발생합니다.

if () {
  function foo () {} // 함수 선언문
}

function foo () {} // 함수 선언문

function foo () {
  function bar() {} //함수 선언문
}

function foo () {
  return function bar () {} // 네임드 함수 표현식
}

foo(function () {}) // 익명 함수 표현식

function foo () {
  return function bar () {
    function baz () {} // 함수 선언문
  }
}

function () {} // SyntaxError: function statement requires a name

if (true){
  function () {} //SyntaxError: function statement requires a name
}

표현식인 문과 표현식이 아닌 문

• 표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있습니다.

var x; // 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아닙니다.

x = 1+2; // x = 1+2는 표현식이면서 완전한 문이기도 합니다.

• 표현식의 문은 값으로 평가될 수 있는 문이며, 표현식이 아닌 문은 값으로 평가될 수 없는 문을 말합니다.

var foo = var x; //Uncaught SyntaxError: Unexpected token 'var'
// 표현식이 아닌 문은 값처럼 사용할 수 없다.

표현식을 문으로 변환

2+2; // 표현식 문
foo(); // 표현식 문

• 2 + 2는 식(Expression)입니다.
• 식 끝에 세미콜론;을 추가한 2 + 2;는 표현식 문(Expression Statement)입니다.

console.log(2+2;) // Error. 세미콜론이 추가된 문(Statement)은 값이 될 수 없기에 식(Expression)의 자리에 들어가지 못합니다.