[JavaScript] 표현식과 문

jiseung·2022년 4월 4일
5
post-thumbnail

1. 값

식(표현식)이 평가(evaluation)되어 생성된 결과

변수
1. 하나의 을 저장하기 위해 확보된 메모리 공간 자체
2. 그 메모리 공간을 식별하기 위해 붙인 이름


변수에 할당되는 것. 모든 값은 데이터 타입을 가지며, 메모리에 2진수(비트의 나열)로 저장된다.

2. 리터럴

리터럴은 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글) 또는 약속된 기호('',"",.,[],{})를 사용해 값을 생성하는 표기법

자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다.

리터럴예시
정수100
부동소수점10.5
2진수0b01000001
8진수0o101
16진수0x41
문자열'Hello' 'World'
불리언true false
nullnull
undefinedundefined
객체{ name:'Kang', address:'Seoul' }
배열[1, 2, 3]
함수function() {}
정규 표현식/[A-Z]+/g

3. 표현식

표현식 : 값으로 평가될 수 있는 문
표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

리터럴도 표현식이다.

var score = 100;
// 리터럴 100은 그 자체로 표현식

표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다.
값으로 평가될 수 있는 문은 모두 표현식이다.

// 리터럴
10;
"PPoFMan";

// 식별자
sum;
person.name;
arr[1];

// 연산자
10 + 20;
sum = 10;
sum !== 10;

// 함수/메서드 호출
square();
person.getName();

표현식과 표현식이 평가된 값은 동치다.
다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있다.

표현식은 값처럼 사용할 수 있다.

var x = 1 + 2;

// 식별자 표현식 x는 3으로 평가된다.
x + 6; // 6

4. 문(statement)

문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위
문의 집합 : 프로그램
문을 작성하고 순서에 맞게 나열하는 것 : 프로그래밍

문은 여러 토큰으로 구성된다.
토큰 : 문법적인 의미. 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
예) 키워드, 식별자, 연산자, 리터럴, 세미콜론

문 : var sum = 1 + 2;
토큰 : var sum = 1 + 2 ;

문은 명령문이라고도 부른다.
종류 : 선언문, 할당문, 조건문, 반복문 등

// 변수 선언문
var x;

// 할당문
x = 5;

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

// 조건문
if (x > 1) { console.log(x); }

// 반복문
for (var i = 0; i < 2; i++) { console.log(i); }

5. 세미콜론과 세미콜론 자동 삽입 기능

세미콜론 : 문의 종료
자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.
단, 중괄호로 된 코드 블록 {...} 뒤에는 세미콜론을 붙이지 않는다. (코드 블록의 자체 종결성)

ASI(Automatic semicolon insertion)
세미콜론은 옵션이다. 생략 가능하다.
자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행된다.
하지만 이 수행이 잘못되는 경우가 있다.

function foo() {
  return
  {
  }
}

  // ASI의 동작 결과 => return; {};
  // 개발자의 예측 => return {};

console.log(foo()); // undefined

var bar = function () {}
(function () {}) ();
// ASI의 동작 결과 => var bar = function () {}(function() {})();
// 개발자의 예측 => var bar = function () {}; (function() {})();

// TypeError: (intermediate value)(...) is not a function

세미콜론을 반드시 붙여야 한다 vs 붙이지 말아야 한다
ESLint 같은 정적 분석 도구에서도 세미콜론 사용을 기본으로 설정
TC39(ECMAScipt 기술 위원회)도 세미콜론 사용을 권장하는 분위기

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

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

// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다.
var x;
// 1, 2, 1 + 2 // 표현식
x = 1 + 2 // 표현식이면서 완전한 문

표현식인 문 : 값으로 평가될 수 있는 문 (변수 할당문)
표현식이 아닌 문 : 값으로 평가될 수 없는 문 (변수 선언문)

// 표현식인 문은 값처럼 쓸 수 있다.
var foo = x = 100;
console.log(foo); // 100

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

완료 값 : 표현식이 아닌 문을 실행하면 undefined (할당/참조 불가)

표현식인 문 : 평가된 값 반환

profile
Frontend Web Developer

2개의 댓글

comment-user-thumbnail
2022년 4월 4일

우와아 표현식은 이런거군요~

1개의 답글