자바스크립트 개발자가 알아야할 33가지 #표현식(Expression)과 문장(Statement)

이 글을 거의 다 읽었을 때쯤에는 아래의 이미지의 코드가 어떻게 동작하는지 왜 동작하는지에 대해서 자세히 설명할 수 있게 될 것이다.

{} + 1 // 1
{2} + 2  //2
{2+2} + 3 // 3
{2+2} -3 // -3

자바스크립트에는 대표적인 2가지 문법적 카테고리가 있다.

1. Statements(문장)
2. Expressions(표현식)

표현식(Expressions)

값으로 평가될수 있는 문

 // 리터럴 표현식
10

// 식별자 표현식
sum

// 연산자 표현식
10 + 20

// 함수/메소드 호출 표현식
square()

표현식(Expression)은 리터럴, 식별자, 연산자, 호출 등의 조합을 말한다.

표현식은 평가 되어 하나의 값을 만든다.

평가? evaluation 표현식을 실행하여 하나의 값을 만드는 과정

var x = 10;
// 연산자 표현식
x + 30; //식별자 표현식과 숫자 리터럴과 연산자의 조합 

표현식은 다른 표현식의 일부가되어 새로운 값을 만들어낼 수 있다.

문(statement)

자바스크립트 엔진에게 내리는 명령

// 변수 선언문
var x;

// 할당문
x = 5;

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

// 조건문
if (x > 5) { … }

// 반복문
for (var i = 0; i < 10; i++) { … }

문은 리터럴, 연산자, 표현식, 키워드 등으로 구성되며 세미클론(;)으로 끝나야한다.

문의 역할은 표현식으로 생성한 값을 사용해 컴퓨터에게 명령을 내리는 것이다.

문에는 표현식인 문과 표현식이 아닌 문이 있다.

// 선언문(Declaration statement)
var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.

// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.

선언문은 값으로 평가될 수 없다. 따라서 표현식이 아닌 문이다.

할당문은 그자체가 표현식이다. 다시 말해 할당문은 표현식인 문이다.

오브젝트 리터럴 vs 블록 문자 ( Block statement)

• 리터럴이란 값 그자체를 의미한다.

r: 2+2 // 유요함
foo()
const foo = () => {}

글로벌 스코프에 위치한 위의 문장(Statement)들은 유효한 자바스크립트로 변경되어 실행된다.

r은 label이라 불리는 것이다. breaking loops를 구성할 때 유용하다. 예제는 다음과 같다.

loop: {
  for (const i=0; i<2; i++){
    for (const n=0; n<2; n++){
      break loop; // 바깥 루프를 중단하여 전체 루프를 중단합니다.  
    }
  }
}

라벨을 어떤 표현식이나 표현식 문장에 붙일 수도 있따.

다음의 예제를 보고, 라벨을 만드는 것이 변수를 만드는 건 아니라는 것을 알 수 있다.

lab: function a () {}
console.log(lab) //ReferenceError: lab is not defined

{} 와 같은 괄호는 문장과 표현식 문장들을 그룹화하는데 도움을 준다.

다음과 같이 작성할 수 있다.

{var a = "b"; func(); 2+2} //4

위의 내용을 브라우저 콘솔에 붙여넣기 하면, 4를 반환할 것이다. 그리고 console.log(a) 처보면 b를 반환한다. 이것을 블록 문장이라고 불러도된다. 우리에게 익숙한 오브젝트 리터럴과는 다를것이다.

console.log({a: 'b'}); // {a: 'b'} 오브젝트 리터럴

console.log({var a = "b", func(), 2+2}) // SyntaxError 블록 문장

const obj = {var a = "b", func(), 2+2} // SyntaxError 블록 문장

블록 문장을 값이나 표현식으로 사용할 수는 없다. console.log는 문장(statement)을 인자로 받아들일 수 없는 함수이다. 하지만 오브젝트 리터럴은 인자로 받아들일 수 있다. 위에 설명했던 모든 것들을 이해하셨길 바란다. 아래의 코드는 당신을 미궁에 빠트릴 수도 있다.

{} + 1 // 1

{2} + 2 // 2

{2+2} + 3 // 3

{2+2} - 3 // -3

문장(statements)은 어느것도 반환하도록 되어있지 않다. 왜냐하면 값으로 쓰일 수 없기 때문이다.

그래서 자바스크립트는 error를 내보내지 않는 대신에 + 연산자의 피연산자를 숫자나 문자열로 바꾼다. 만일 바꿀수 없는 값이라면 에러를 내보낸다. 블록 문장(block statements)에 무엇이 반환되던지 그것은 암묵적으로 0로 강제 형변환되어 피연산자로 사용된다.

 

Reference

https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-7-%ED%91%9C%ED%98%84%EC%8B%9D%EA%B3%BC-%EB%AC%B8Statement-%EB%B2%88%EC%97%AD-2xjuhvbal7

자바스크립트 개발자라면 알아야 할 33가지 개념 #7 표현식(Expression)과 문장(Statement) (번역)

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb