자바스크립트 교과서 - 4. 문자열 타입

다음 책들과 MDN의 내용을 모아 자바스크립트 핵심 위주로 정리해 보았습니다. 여러 권의 책을 한 글로 훑어볼 수 있도록 최대한 간결하게 정리하겠습니다.

모던 자바스크립트 Deep Dive - 이웅모
You Don’t Know JS - Kyle Simson
자바스크립트는 왜 그 모양일까?(How JavaScript Works) - Douglas Crockford
자바스크립트 완벽 가이드(JavaScript: The Definitive Guide 7/E) - David Flanagan

문자열 리터럴

문자열은 사람과 컴퓨터 간에 존재하는 틈을 이어주는 다리입니다. 문자와 정수를 연결하는 것은 디지털 컴퓨터 개발에 있어서 중요한 진전 중 하나였습니다. 사용자 인터페이스 개발에 있어 중요한 첫 번째 발걸음이 되었죠.

더글러스 크락포드 , 『자바스크립트는 왜 그 모양일까?』, 인사이트(2020), p105.

• 자바스크립트의 문자열은 유니코드 문자셋의 UTF-16 인코딩을 사용하며 숫자와 마찬가지로 불변 값이다.
• 문자열은 유사 배열 객체(array-like object)로 배열과 비슷하게 인덱스를 통해 각 문자에 접근하는 등의 특징을 가지지만 배열이 가변(mutable) 값인 것과 다르게 문자열은 불변(immutable) 값으로 변경이 불가능하다.
• 따라서 배열에서 제공하는 변경 관련 메소드들은 String.prototype에는 존재하지 않는다.

C에는 하나의 문자를 위한 데이터 타입(char)만 있을 뿐 문자열 타입은 존재하지 않는다. C에서는 문자열을 문자의 배열로 처리하고 자바에서는 문자열을 String 객체로 처리한다. 하지만 자바스크립트는 개발자의 편의를 위해 원시 타입인 문자열 타입을 제공한다. 이는 자바스크립트의 장점 중 하나다.

이웅모 , 『모던 자바스크립트 Deep Dive』, 위키북스(2020), p140.

• 문자열은 불변 값이므로 문자열 메서드는 그 내용을 바로 변경하지 않고 항상 새로운 문자열을 생성한 후 반환한다.

유니코드

유니코드의 원래 목적은 세상에 존재하는 모든 언어를 16비트로 표현하는 것이었습니다. 나중에는 전 세계의 언어를 21비트로 표현하는 것으로 바뀌었죠. 아쉽게도 자바스크립트는 유니코드가 16비트로 표현하려던 시절에 설계되었습니다.

더글러스 크락포드 , 『자바스크립트는 왜 그 모양일까?』, 인사이트(2020), p108.

• 자바스크립트 문자열은 유니코드로 16비트가 넘지 않는다면 \u1D00과 같은 형태로 표현되지만, 16비트가 넘는 유니코드 문자의 표현에는 써로게이트 페어(surrogate pair) 방식으로 16비트 값 두 개를 연속으로 붙여서 표현한다.
• 그 예로 푸른 하트(💙)의 UTF-16 인코딩은 \ud83d\udc99 이다.

자바스크립트의 문자열 메서드는 대부분 문자가 아니라 16비트 값 단위로 동작합니다. 문자열 메서드는 써로게이트 페어를 특별 취급하지 않습니다. 따로 정규화하지도 않고, 심지어 문자열이 정확한 UTF-16 형식인지 검사하지도 않습니다. 하지만 ES6에서 문자열은 이터러블(iterable)이고, 문자열에 for/of 루프나 … 연산자를 사용하면 16비트 값이 아닌 실제 문자를 순회합니다.

데이비드 플래너건 , 『자바스크립트 완벽 가이드』, 인사이트(2022), p36.

• 자바스크립트의 문자열은 내부적으로 별도의 검증 절차 없이 16비트 코드는 모두 허용하기 때문에 다른 언어로 만들어진 시스템과 상호 작용이 필요한 경우 유니코드를 정확하게 입력하는 것이 중요하다.

이스케이프 시퀀스

• 역슬래시()를 사용하면 일반적인 방법으로 문자열에 표시가 어려운 문자를 표현할 수 있다.
• 대표적인 이스케이프 시퀀스는 다음과 같다.
  • \n 개행(LF, Line Feed)
  • \r 개행(CR, Carriage Return)
  • \uXXXX 유니코드
  • \’ 작은따옴표
  • \ \ 백슬래시

• 여담이지만 운영체제별로 개행과 관련된 다음 차이가 존재한다.

개행 문자는 텍스트의 한 줄이 끝남을 표시하는 문자 또는 문자열이다. 개행 문자에는 라인 피드(LF)와 캐리지 리턴(CR)이 있다. 이는 과거 타자기에서 커서를 제어하는 방식에서 비롯된 것이다. …현대의 컴퓨터 운영체제는 서로 다른 체계의 개행 방식을 사용한다. 윈도우는 CR+LF로 새 줄을 나타내고 유닉스는 LF로 새 줄을 나타낸다. macOS에서는 버전 9까지 CR로 새 줄을 나타냈지만 버전 10부터 LF를 사용한다. 따라서 서로 다른 운영체제에서 작성한 텍스트 파일은 서로 개행 문자를 인식하지 못한다. 다만 대부분의 텍스트 에디터는 운영체제에 맞게 개행 문자를 자동으로 변환해주므로 큰 문제는 없다.

이웅모 , 『모던 자바스크립트 Deep Dive』, 위키북스(2020), p63. - 라인 피드와 캐리지 리턴

• 자바스크립트의 개행은 일반적으로 라인 피드(\n)를 사용해 개행한다.

템플릿 리터럴

웹 브라우저의 DOM API가 잘못 설계된 데다가 오류도 많아서, 그 대신 템플릿을 이용해서 HTML 뷰를 만드는 방법이 더 각광받고 있습니다. DOM과 씨름하는 것보단 더 쉬운 방법이지만, 대신 XSS(Cross Site Scripting)나 그 외에 다른 웹 보안 문제를 일으킬 수 있습니다. 자바스크립트의 템플릿 문자열 리터럴은 이런 보안 문제를 해결하면서 템플릿을 지원하기 위해 개발되었으며, 실제로 가끔 그 의도대로 안전한 템플릿을 제공하기도 합니다.

더글러스 크락포드 , 『자바스크립트는 왜 그 모양일까?』, 인사이트(2020), p110-111.

• 템플릿 리터럴은 문자 보간(interpolation)을 제공하며, ${ } 를 사용해 표현식을 추가하면 계산되어 문자열로 변경된 후 템플릿 리터럴에 삽입된다.

템플릿 리터럴에는 강력하지만 잘 사용되지 않는 기능이 하나 있습니다. 여는 백틱 바로 앞에 함수 이름(태그)이 있으면 템플릿 리터럴의 텍스트와 표현식 값이 함수에 전달됩니다. 그리고 이 ‘태그된 템플릿 리터럴’의 값이 함수의 반환 값입니다.

`\n`.length // 1 뉴라인 문자 하나`
`String.raw`\n`.length // 2 역슬래시 문자와 n

데이비드 플래너건 , 『자바스크립트 완벽 가이드』, 인사이트(2022), p42.

• 자주 사용되지는 않지만 신기한 기능으로 위와 같이 함수 바로 뒤에 템플릿 리터럴이 오게 되면 실행 괄호 없이도 텍스트가 함수에 전달되며 정상 작동한다.
• 위 예시에서 String.raw( ) 는 ES6에서 내장된 태그 함수로 역슬래시 이스케이프를 처리하지 않고 백틱 안의 텍스트를 반환해준다.

정규표현식

• 정규표현식(RegExp)은 문자열의 패턴을 정의하고 매칭하는 데이터 타입이다.
• 다음과 같이 패턴을 정의한다.

	/^HTML/; // 문자열의 시작 부분이 HTML과 일치
	/[1-9][0-9]*/; // 0이 아닌 숫자가 하나 있고 그 뒤의 숫자는 제한 없음

• 정규표현식 리터럴과 자동 세미콜론 삽입 간의 상호작용은 토큰화를 어렵게 만드는 원인이 될 수 있다.

컴파일러는 컴파일 과정에서 소스 코드를 토큰화합니다. …안타깝게도 자바스크립트는 토큰화하기에는 아주 어려운 언어입니다. 이는 정규표현식 리터럴과 자동 세미콜론 삽입 간의 상호 작용 때문입니다. 이 상호작용이 프로그램이 코드를 분석할 때 헷갈리게 만들죠.

return /a/i; // 정규표현식 객체 리턴`
return b.return /a/i; // return ((b.return) / a) / i

더글러스 크락포드 , 『자바스크립트는 왜 그 모양일까?』, 인사이트(2020), p114.

• 위 예시처럼 전체 코드를 분석하지 않고서는 자바스크립트는 토큰화에 어려움을 겪을 수 있다.

References

데이비드 플래너건 , 『자바스크립트 완벽 가이드』, 인사이트(2022)
더글러스 크락포드 , 『자바스크립트는 왜 그 모양일까?』, 인사이트(2020)
카일 심슨 , 『You Don’t Know JS - 타입과 문법, 스코프와 클로저』, 한빛미디어(2017)
이웅모 , 『모던 자바스크립트 Deep Dive』, 위키북스(2020)