intro

자연어부터 컴퓨터 언어까지 모든 언어는 의사소통을 위한 규칙이 존재한다.
오늘은 자바스크립트의 어휘화 문장을 만드는 규칙을 살펴보겠습니다.
이 글은 학습내용 정리를 위한 목적으로 작성된 글로 부족한 부분이 있을 수 있습니다.
오류와 의견 댓글로 남겨주시면 감사하겠습니다;)

기본 어휘문법(lexical grammar)

어휘문법은 자바스크립트를 이루고 있는 가장 기본적이고 작은 단위의 규칙이다.

문자의 기본 구성

자바스크립트에서 문자는 유니코드로 표현한다.
문자의 범위는 유니코드에서 지원하는 모든 기호이며 로마자, 알파벳은 대 소문자를 구분한다.
ECMAScript 소스 본문은 왼쪽에서 오른쪽 방향으로 분석되고 토큰, 제어문자, 줄바꿈, 주석, 또는 공백으로 구성되는 입력 요소 시퀀스로 바뀐다.

제어 문자 (Control Characters)

제어 문자는 눈에 보이지 않지만 스크립트 소스 본문 해석을 제어하는 데 사용한다.
→ 공백 또한 제어문자 중 하나이다.
(아직 학습 초반에 사용할 일이 없으므로 조금 더 이후에 다뤄보도록 하겠다.)

공백 (White Space Characters)

공백을 표현하기 위한 문자.
보통 코드의 기능에 필요한 것은 아니지만 소스 본문을 읽기 좋게 만들고 토큰을 구분하기 위해 사용한다.

자바스크립트 엔진은 토큰 사이에 있는 모든 공백문자는 무시하여 코드실행에 영향을 주지 않는다.

최소화 도구(Minification tools)는 종종 전송해야하는 데이터 크기를 줄이기 위해서 공백을 제거한다.
(이는 공백이 데이터의 크기에 영향을 줄 수 있음을 의미한다.)

스페이스바를 쳐서 입력하는 공백문자는 유니코드 U+0020이며 탭을 의미하는 공백문자는 U+0009이다.

줄바꿈(개행) 문자 (Line Terminator Characters)

줄과 줄을 구분시켜주는 문자.

공백문자와 더불어, 소스 본문의 가독성을 향상시키는데 사용한다.

기본적으로 코드 실행에 영향을 주지 않지만,
자바스크립트의 세미콜론 삽입 규칙에 따라 의도치 않게 코드 실행에 영향을 줄수도 있으니 주의해야 한다.

엔터를 칠 때 입력되는 유니코드 문자로 시스템에 따라 U+000A 와 U+000D 등이 있다.

주석 (Comments)

주석은 힌트, 필기, 제안이나 주의할 점들을 자바스크립트 코드에 넣을 때 사용하며
작성한 코드를 더 쉽게 읽고 이해할 수 있게 도와주는 역할을 하고 특정 코드가 실행되지 않도록 막아주기도 한다. 때문에 주석은 유용한 디버깅 도구라고도 할 수 있다.

한 줄 주석과 여러 줄 주석으로 두 가지 방식이 있다.

1. '//'로 첨언하기. 같은 줄에 있는 모든 코드를 주석으로 바꾼다.

function comment() {
  // 자바스크립트의 각주 한 줄입니다.
  console.log("Hello world!");
}
comment();

2. '/* */'로 첨언하기. 조금 더 유연하게 사용할 수 있다.

function comment() {
  /* This comment spans multiple lines. Notice
     that we don't need to end the comment until we're done. */
  console.log("Hello world!");
}
comment();

(이 방식은 원한다면 라인 중간에도 사용할 수 있으나 코드의 가독성이 떨어지게 되므로 추천하지 않는다.)

function comment(x) {
	console.log("Hello " + x /* insert the value of x */ + " !");
}
comment("world");

아래처럼 코드를 코멘트로 감싸면 코드 실행을 막기 위해 코드를 무용화 시키는데도 사용할 수 있다.

function comment() {
  /* console.log("Hello world!"); */
}
comment();

키워드 (ECMAScript 2015 기준 예약 키워드)

키워드는 프로그래밍 언어를 사용할 때 예약되어있는 언어를 말한다.
→ 이 키워드를 사용하면 어떠한 예상되는 동작이 있다는 말이다.

토큰 (Tokens)

자바스크립트 엔진이 인식하는 프로그램의 더 이상 쪼갤 수 없는 최소단위.

토큰의 구성은 다음과 같다.

• IdentifierName
• 예약어(Reserved Words)
• 리터럴 (Literal)
• 템플릿 문자(Template)

IdentifierName

IdentifierName을 조합하여 식별자나 예약어를 정의할 수 있다.

IdentifierName은 IdentifierStart와 IdentifierPart로 이루어져 있다.

식별자를 선언할 때는 영문으로 시작해야하며 숫자는 사용할 수 없다.

IdentifierStart는 시작 문자를 정의하며 UnicodeIDStart, $, _, \u를 포함한다.

IdentifierPart는 시작문자를 제외한 부분을 정의하며 UnicodeIDContinue, $, _, \u를 포함한다.

예약어 (Reserved Words)

언어차원에서 미리 등록하여 특별한 의미로 사용중인 단어들을 말한다.

예약어는 식별자로는 사용이 불가능하고 대표적으로 if, for, var 등이 있다.

예약어는 흔히 키워드(Keyword)라고도 불리지만 둘은 미묘한 차이다 있다.
키워드는 당장 사용이 가능하지만 예약어는 당장 사용하지는 못하고
미래에 사용하기 위해 등록된 단어와 키워드 모두를 의미한다. (예약어 = 키워드 + Future Reserved Words)

리터럴

소스 코드의 고정된 값을 대표하는 용어. (변수 및 상수에 저장되는 ‘값 자체’를 의미)
→ 코드 상에서 데이터를 표현하는 방식을 리터럴 이라고 한다.

• 일반적으로 객체 중심 혹은 객체 지향 언어에서는 객체의 리터럴 표기법을 지원한다.
• 리터럴 표기법이란, 변수를 선언함과 동시에 그 값을 지정해주는 표기법을 말한다.
• 변수를 선언하고 데이터를 담아야 할 곳에 이 리터럴을 표기하는 것이 가능하다.
• 리터럴 표기법은 비 정규적인 방법이 아니기 때문에 성능저하를 불러오지도 않으며, 코드는 더 짧다.
• 코드가 짧으니 자바스크립트 인터프리터의 해석 분량도 줄어들어 더 빨라진다.

변수나 상수가 메모리에 할당된 ‘공간'이라면 리터럴은 이 공간에 저장되는 ‘값’으로
상수와 마찬가지로 메모리 어딘가에 값이 변하지 않도록 저장이되지만 그 이름이 없다.
즉, 리터럴이란 컴파일 시 프로그램 내에 정의되어있는 그대로 정확히 해석되어야 할 값을 의미한다.

리터럴의 종류

• Null 리터럴
• 불리언 리터럴
• 숫자 리터럴
  • 10진법
  • 2진법
  • 8진법
  • 16진법
  • BigInt 리터럴
  • Numeric separators(숫자 구분 기호)
• 객체 리터럴
• 배열 리터럴
• 문자열 리터럴
  • 16진수 이스케이프 시퀀스
  • 유니코드 이스케이프 시퀀스
  • 유니코드 코드 포인트 시퀀스
• 정규 표현식 리터럴
• 템플릿 리터럴

자동 세미콜론 삽입

자동 세미콜론 삽입은 특정 문맥에서 생략된 ;을 추론하여 프로그램을 파싱하는 기술로,
프로그램에 ;을 자동으로 삽입해 준다.

자바스크립트 코드에서;이 필요한 곳인데도 불구하고,
단 하나의 ;이 누락되면 자바스크립트 프로그램은 돌아가지 않는다.

이 때문에 문장을 종결할 때 세미콜론을 사용하지 않으면,
ASI는 자바스크립트 프로그램의 세미콜론(;)이 누락된 곳에 엔진이 자동으로 ;을 삽입해주기 때문에
예상치 못한 동작을 피하기 위해서는 개발자가 직접 세미콜론을 사용하여 문장을 종결시켜 주는 것이 좋다.

outro

알아야 할 사전 지식이 굉장히 많다.
새로운 언어를 배운다는것은 그 언어를 사용하는 환경이나 문화를 이해하는 것부터가 시작이 아닐까... 그렇기 때문에 나는 컴퓨터, 그리고 브라우저가 더욱 궁금하다.
너희를 이해할 수 있을 때까지 오늘도 내일도
Keep going! 🏃🏻‍♀️

Ref
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar#제어_문자
https://asfirstalways.tistory.com/21
https://velog.io/@exploit017/JS-세미콜론-자동-삽입ASI
https://www.bloger.kr/60