[자바스크립트 Deep Dive] 표현식과 문

률루랄라·2022년 3월 10일
0
post-thumbnail

프로그램은 문의 집합으로 이뤄진 것으로 문을 작성하여 순서에 맞게 나열하는 것이 프로그래밍이다. 즉 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이며 문은 표현식인 문과 표현식이 아닌문으로 나눌 수 있다.

5. 표현식과 문

표현식은 그 자체로 표현식이면서 문이 될 수 있다. 하지만 모든 표현식이 문이 될 순 없다.


5.1. 값

값은 표현식이 평가되어 생성된 결과


식을 해석하여 값을 생성하거나 참조한다면 그것을 평가라 할 수 있고 그 값은 모두 데이터 타입을 가진다.
이 들은 메모리에 2진수,즉 비트의 나열로 저장되는데 데이터 타입에 따라 같은 값일지라도 그 해석이 달라진다.
12진수 0100 0001는 숫자타입으로는 65이지만 문자타입으로는 'A'다.

앞서 변수는 값을 저장하기 위해 확보한 메모리상의 공간 자체로서 그 공간을 인간친화적으로 식별하기위해 붙이는 이름이라고 정리했다. 따라서 변수에 할당되는 것은 값이다.

var sum = 10 + 20;

위의 예제에서 변수 sum은 10 +20이 할당될 것 같다. 하지만 10+20은 표현식으로서 평가되어야 하고 그 평가의 결과인 30이 변수 sum에 할당된다. 즉 메모리에는 숫자 30이 저장된다.

5.2. 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다.


숫자 3은 숫자 리터럴이다. 인간에겐 아라비아 숫자가 더 이해가 빠를 것이다. 정리하면 인간이 이해하는 3 이라는 아라비아 숫자를 사용해 컴퓨터에게 전달하면 컴퓨터에게, 정확히는 자바스크립트 엔진에게는 숫자 리터럴 3이고 이를 평가하여 숫자 값 3을 생성한다.

이처럼 리터럴은 사람이 이해할 수 있는 문자 (아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호 ('', "", ., [], {}, // 등)로 표기한 코드다.
자바스크립트 엔진은 런타임 시점에 리터럴을 평가해 값을 생성하는데 따라서 리터럴은 생성하기 위한 약속된 표기법이라고 할 수 있다.

리터럴 종류

  • 정수 리터럴 (100)
  • 부동소수점 리터럴 (10.5)
  • 2진수 리터럴 (0b01000001) // 0b로 시작
  • 8진수 리터럴 0o101 // ES6에서 도입됐으며 0o으로 시작
  • 16진수 리터럴 0x41 // ES6에서 도입됐으며 0x으로 시작
  • 문자열 리터럴 ('Hello', "World")
  • 불리언 리터럴 (true, false)
  • null 리터럴 (null)
  • undefined 리터럴 (undefined)
  • 객체 리터럴 ({ name: 'Lee", address: 'Seoul'})
  • 배열 리터럴 ( [1,2,3])
  • 함수 리터럴 ( function() {})
  • 정규 표현식 리터럴 (/[A-Z]+/g)
    등이 있다.

5.3. 표현식

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


var scre = 100;

100은 정수 리터럴로서 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 리터럴은 그 자체로 표현식이다.

var score = 50 + 50;

50 + 50 은 숫자 리터럴 50과 연산자 +로 이뤄져있다. 50+50도 평가되어 숫자 값 100을 생성하므로 표현식이다.
위 코드의 변수 score를 참조하면 변수 값으로 평가된다. 비록 새로운 값을 생성하지는 않지만 값으로 평가되므로 표현식이라 할 수 있다.
따라서 값으로 평가될 수 있는 문은 모두 표현식이고 표현식은 값처럼 사용할 수 있다. 이는 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다고 문법적으로 이해해볼 수 있다.

var x = 1;
var y= 1;

var z = x+ 1;
//or
var z = 1+ y;
// or
var z = x+ y;

5.4. 문

문을 작성하여 순서에 맞게 나열하는 것이 프로그래밍이다. 즉 문은 프로그램을 구성하는 최소 단위라고 볼 수 있다.


문은 여러 토큰으로 구성되는데 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. 토큰의 예로는 키워드, 식별자, 연산자, 리터럴, 세미콜론 혹은 마침표 등이 있다.

또한 문을 명령문이라고도 부르는데 다르게 해석하면 문은 컴퓨터에 내리는 명령 이다. 예로는 선언문, 할당문, 조건문, 반복문 등이 있다.

문과 표현식을 구별하고 해석할 수 있으면 자바스크립트 엔진의 입장에서 코드를 해석해볼 수 있고 실행 결과를 예측하기는데 도움이 될 것이다. 이는 버그를 줄이고 코드의 품질을 높여줄 것이다.

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

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



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

// 선언문은 초기화 단계에서 undefined가 할당되어 값으로 평가되지 않을까 생각할 수 있지만
// 이해한 바로는 초기화 단계에서의 undefined의 할당은 목적이 있는 값의 할당이 아니라
// 자바스크립트가 인터프리터언어로서 갖는 코드 실행 방법으로 인해 쓰레기 값을 참조하게 되면
// 의도치 않은 값이 참조되는 것을 방지하기 위해 할당되는 것이기에 
// 선언문 자체가 undefined로 평가된 값을 할당되는 것으로 보이지만 
// 사실은 값으로 평가될 수 없는 과정이기에 표현식이 아니라고 하는것이 아닐까?

x = 1 + 2;
// 1, 2, 1 + 2, x = 1+ 2 모두 표현식
// x= 1 + 2는 표현식이면서 완전한 문이다. 

이처럼 표현식인 문과 표현식이 아닌 문이 있다. 바꿔말해 표현식은 문이지만 표현식이 아니라해서 문이 아닌것 또한 아니다. 이처럼 표현식과 문은 비슷하여 구분하기 힘들다.

하지만 변수에 할당을 해보면 표현식인문과 표현식이 아닌 문을 간단하고 명료하게 구별할 수 있다. 앞서 변수에는 값으로 평가되어지면 할당할 수 있다고 정리했다. 만약 문이 값으로 평가되면 변수에 할당 할 수 있는 것이고 값으로 문을 평가할 수 없다면 변수에 할당 할 수 없기에 에러가 발생한다.

var foo = var x // SyntaxError: Unexpected token var
/*
위의 코드는 예상치못한 토큰인 var가 있다는 문법오류를 내밷는다. 
토큰에 대해서는 아마 실행 컨텍스트 부분에서 자세히 다룰 것 같지만 
위에 정리한 토큰에 대한 간단한 정리를 대입해서 생각해보면 
값을 평가하는 부분에서 예약어에 해당하는 토큰이 존재한다면 문법적으로 맞지 않는다는 것이다. 
이렇게도 표현식인문과 표현식이 아닌 문을 구분해볼 수 있을까?
*/
var foo = x = 1+2;
/*
위 코드는 아무 에러 없이 실행이 된다.
따라서 x= 1+2는 값으로 사용될 수 있는 표현식인 문이다. 
*/
// [1]
var foo = 10;
if (true) {};
/*
두개의 문 모두 값으로 평가될 수 없다. 
1. 선언문
2. 조건문
*/

// [2]
var num = 10; 
//이라는 코드가 이미 존재했을 때

100 + num;

num = 200
/*
두개의 문 모두 값으로 평가될 수 있으며 100+ num은 표현식 문이고 num=100은 할당문 (재할당)이다. 
*/

정리하며

을 작성하여 순서에 맞게 나열하는 것이 프로그래밍이다.

또한 문을 명령문이라고도 부르는데 다르게 해석하면 문은 컴퓨터에 내리는 명령 이다. 예로는 선언문, 할당문, 조건문, 반복문 등이 있다.

문과 표현식을 구별하고 해석할 수 있으면 자바스크립트 엔진의 입장에서 코드를 해석해볼 수 있고 실행 결과를 예측하기는데 도움이 될 것이다. 이는 버그를 줄이고 코드의 품질을 높여줄 것이다.

profile
💻 소프트웨어 엔지니어를 꿈꾸는 개발 신생아👶

0개의 댓글