[JavaScript] 프로그래밍과 자바스크립트 특징

모던 자바스크립트 Deep Dive 스터디 4회차

자바스크립트 스터디를 진행하며 해당 회차에 공부했던 내용을 직접 그림을 그리고 코드를 실행하며 저의 글로 작성합니다.

프로그래밍

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 일반적으로 개발자가 사용하는 프로그래밍 언어는 고수준 언어이다. 인간이 컴퓨터에게 명령을 내리기 가장 좋은 형태로 추상화된 언어이며 개발자가 고수준의 언어로 작성한 코드는 컴파일러 혹은 인터프리터에 의해 컴퓨터가 알기 쉬운 언어인 기계어로 번역된다.

컴파일러와 인터프리터의 동작하는 방식은 다르다.

 

프로그래밍을 하는데 있어서 언어의 문법을 지키는 것은 당연한 일이다. 하지만 문법을 지키는 것 만큼 중요한 일이 있는데, 그것은 반드시 코드에는 의미가 담겨야 한다는 것 이다.

// 아래 예제는 교재의 예제
const number = 'string';

console.log(number + number);

 

위 예제를 실행하면 에러 없이 정상적으로 ‘stringstring' 이 출력된다. 문법상 오류가 없지만 해당 코드에는 의미가 전혀 담겨있지 않다. number 라는 변수는 문자열 타입이고 변수명에는 전혀 어떠한 의미가 담겨있지 않다. 이는 추후 유지보수에 치명적이며 코드의 품질은 당연 말할것 없이 형편 없다고 볼 수 있다.

결국 좋은 프로그래밍은 컴퓨터에게 실행을 요구하는 코드를 작성하는 일이기에 컴퓨터가 잘 이해할 수 있도록 문법을 잘 지켜야 하고, 여러 인간의 요구를 담고있는 결과물(코드)에도 인간이 이해할 수 있도록 의미를 잘 담아야 한다는 것을 알 수 있다.

 

자바스크립트(JavaScript)

자바스크립트는 브라우저에서 사용자에게 다이나믹한 경험을 제공하기 위해 개발된 언어이다. 개발 초창기에 Java의 유행에 편승하기 위해 JavaScript라는 이름을 채택했다.

현재 JavaScript의 상표는 Oracle에서 소유하고 있다. 하지만 Oracle이 JavaScript의 업데이트에 관여를 안한지 오래되어 최근엔 오라클이 자바스크립트의 상표권을 오픈해야 한다는 소리도 들리고 있다.

 

자바스크립트는 HTML, CSS 와 함께 웹 애플리케이션의 화면단인 프론트엔드를 개발할 때 주로 사용한다. 요즘은 다양한 프론트엔드 프레임워크가 존재한다. 대표적으로 React, Vue, Angular, Svelte, jQuery 등 이 존재한다.

요즘의 자바스크립트는 브라우저외의 환경에서도 동작이 가능하다. 크롬 엔진인 V8을 기반으로 한 자바스크립트 런타임 환경인 Node.js 덕분에 자바스크립트를 활용해 서버도 구현이 가능하다.

 

특징

자바스크립트의 특징 네 가지를 간단하게 살펴보면 다음과 같다.

인터프리터 언어

자바스크립트는 인터프리터 언어이다. 인터프리터는 컴파일러와는 다르게 빌드 시간을 거쳐 작성한 코드를 통채로 기계어로 번역해 사용하는 것이 아닌, 런타임에 문장 단위 한 줄씩 목적 코드인 바이트 코드로 변환한 뒤 실행한다. 런타임에 문장을 번역해 실행하기 때문에 실행 파일이 생성되지 않고, 코드의 실행 시 인터프리트 과정이 반복된다.

 

코드가 문장 단위로 한 줄씩 실행되기 때문에 디버깅에 용이하고 프로그램이 실행될 때 즉시 실행이 되기 때문에 빠르게 피드백을 받을 수 있다는 장점이 존재한다. 하지만 코드를 실행하며 인터프리트 과정을 반복하기 때문에 컴파일 언어에 비해 느릴 수 있다.

요즘의 프론트엔드 애플리케이션은 작성한 코드를 번들링하는 과정을 통해 브라우저가 더욱 이해하기 쉽도록 빌드하는 과정을 거친다. 그렇기 때문에 우리가 작성하는 모던 웹 애플리케이션을 그대로 브라우저가 읽는 것이 아닌, 번들링 과정을 거쳐 생성된 빌드 결과물을 브라우저에서 실행한다는 것을 알고 있어야 한다.

프론트엔드 애플리케이션을 빌드하는 과정은 단순히 번들링만을 하는 것은 아니다. 빌드 시 TypeScript를 사용한다면 타입스크립트 컴파일러에 의해 TypeScript로 작성된 파일이 JavaScript로 컴파일 된다. TypeScript를 JavaScript로 컴파일 한 후 번들러에 의해 번들링이 진행된다. 그 후 번들링 된 파일을 조금 더 압축 시키기 위해 맹글러(eg. Terser)에 의해서 압축을 한다면 프론트엔드 빌드 과정이 끝나게 된다.

프론트엔드에서의 빌드는 번들링의 과정이고 번들링으로 인해 나온 결과물을 빌드 파일을 웹 서버에서 서빙을 해 브라우저에서 해당 에셋들을 다운로드 받아서 실행시킨다. 모던 브라우저의 자바스크립트 엔진은 자바스크립트 파일을 그대로 인터프리트 하는 것이 아닌, JIT(Just In Time) 컴파일을 통해 기계어로 컴파일 한 후 실행한다.

 

멀티패러다임 프로그래밍 언어

프로토타입 기반 OOP

자바스크립트는 프로토타입을 통해 객체지향 프로그래밍(OOP)을 지원하고 있다. 객체는 다른 객체를 원형(prototype)으로 삼아 생성되며, 그 원형 객체의 속성과 메서드를 상속한다.

생성된 객체는 프로토타입을 통해 런타임에 유연하게 프로퍼티와 메서드를 확장할 수 있다. JavaScript 객체는 내부에 [[Prototype]]이라는 숨겨진 프로퍼티를 가지며, 이를 통해 상위 프로토타입에 접근한다. 만약 객체에서 원하는 속성이나 메서드를 찾지 못하면, 프로토타입 체인을 따라 상위 프로토타입에서 속성을 찾는 방식으로 동작한다.

 

함수형 프로그래밍

함수형 프로그래밍은 불변성을 강조하며, 상태 변경을 최소화하고 순수 함수를 사용하여 코드의 예측 가능성과 재사용성을 높이는 것을 목표로 삼는다.

순수 함수란 동일한 입력 값을 받으면 항상 동일한 결과 값을 뱉는다는 개념이다. 즉 외부에 사이드 이펙트가 없는 함수를 순수 함수라고 한다.

자바스크립트는 함수를 일급 객체로 여긴다. 그렇기 때문에 함수를 변수에 할당하거나, 함수의 매개 변수로 사용할 수 있고 반환 값으로 사용할 수 있다. 그리고 자바스크립트는 클로저를 지원하며 이 모든 것들을 활용해 함수형 프로그래밍을 구현할 수 있다.

 

Dynamic Language

자바스크립트의 타입은 런타임에 정해진다. 이 말은 자바스크립트는 동적 타입의 언어라는 것 이다. 타입이 런타임에 정해지기 때문에 코드를 작성하는 시점에 변수에 값을 유연하게 할당할 수 있다.

유연하다는 것은 불안정 할 수 있다는 뜻도 된다. 런타임 시 예상하지 못한 타입의 값이 변수에 할당된다면 런타임 에러를 발생할 수 있다. 이로 인해 코드 작성 시점에 디버깅이 어려울 수 있으며 런타임 에러를 완벽하게 핸들링 할 수 없기 때문에 신뢰가 떨어지는 결과물을 작성할 수 있다는 치명적인 단점이 있다.

요즘에는 자바스크립트에 타입을 얹은 TypeScript를 사용해 위 문제를 타입 안정성을 더하며 웹 애플리케이션을 만들고 있는 추세이다.

 

싱글 스레드

자바스크립트 엔진은 메인 스레드만 가지고 있는 싱글 스레드 언어이다. 자바스크립트에는 별도의 스레드를 작성할 수 있는 기능을 지원하지 않는다. 그럼에도 불구하고 자바스크립트는 비동기 통신이 가능하다. 이는 이벤트 루프라는 특수한 메커니즘 덕분에 가능한 일이다.