자바스크립트란?

이 파트에서는 자바스트립트의 탄생과 역사, 특징을 다루고 있다.

탄생과 역사

자바스크립트는 넷스케이프 커뮤니케이션즈라는 기업에서 웹페이지의 보조적인 기능을 수행하기 위해 만든 언어인데 마이크로소프트사에서 자바스크립트의 파생버전인 JScript를 출시하였고 이는 곧 서로 경쟁하게 되고 자사 브라우저에서만 동작하는 기능을 추가함으로써 브라우저에 따라 웹페이지가 정상 동작하지 않는 크로스 브라우징 이슈가 발생하게 되었다.

이에 이러한 파편화를 방지하기 위해 컴퓨터 시스템의 표준을 관리하는 ECMA 인터내셔널에 자바스크립트 표준화를 요청하고 1997년 7월 ECMA-262라 불리는 표준화된 자바스크립트 초판 사양이 완성 하였다. 다만 상표권 문제로 자바스크립트가 아닌 ECMAScript로 명명되었다.

초창기 자바스크립트는 브라우저에서 한정적인 기능을 수행하기 위해 만들어 졌으나 브라우저가 아닌 환경에서 자바스크립트를 필요로 하게 되자 당시 빠른 성능을 보여주던 구글의 v8 자바스크립트 엔진으로 빌드된 Node.js라는 자바스크립트 런타임 환경을 만들었다고 한다.

특징

자바스크립트의 경우 일반적인 프로그래밍 언어로서 갖추고 있어야할 키워드들을 가지고 있는 ECMAScript와 브라우저가 별도로 지원하는 클라이언트 사이드 Wep API를 아우르는 개념이다.
node.js의 특징으로는 서버 사이드 애플리케이션에서 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인(내장) API를 제공한다고 한다.

이처럼 브라우저는 ECMAScript와 클라이언트 사이드 Web API를 지원하고 Node.js는 ECMAScript와 Node.js 고유의 API를 지원한다.

즉, ECMAScript라는 언어로서의 교집합을 갖고 있고 브라우저는 Web API를, Node.js는 Node.js의 고유의 API를 추가로 갖고 있다고 보면 된다.

Q&A

Q. 자바스크립트와 ECMAScript의 다른점은 무엇인가요?

A: 자바스크립트와 ECMAScript는 밀접한 관련이 있지만 ECMAScript는 표준 사양이고, 자바스크립트는 그 표준을 구현한 프로그래밍 언어 입니다. 자바스크립트는 ECMAScript 표준을 기반으로 하지만 추가적인 기능과 라이브러리를 통해 확장됩니다.

변수

이 파트에서는 변수와 변수 선언,  값의 할당 등을 다루고 있다.

변수를 사용하는 이유와 뜻

결론부터 말하자면, 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.변수는 프로그래밍에서 매우 중요한 개념으로, 데이터를 효율적으로 관리하고 재사용할 수 있게 해준다.

한 개의 메모리 공간은 메모리 셀(cell)이라고도 불리는데, 각 셀마다 하나의 값만 들어갈 수 있고 고유의 메모리 주소를 갖고 있다. 이 메모리 주소를 통해 직접 접근하면 운영체제가 사용하는 값을 변경하는 등의 치명적 오류를 발생시킬 수 있기 때문에, 메모리 주소를 직접 다루는 것은 위험하다. 또한, 코드를 실행할 때 메모리 상황에 따라 메모리 주소가 결정되는데, 동일한 코드를 실행해도 값이 저장될 메모리 주소가 변경되기 때문에 값을 재사용하지 못하는 문제점이 있다.

이러한 문제를 자바스크립트는 개발자가 직접적으로 메모리를 제어하지 못하도록 하고, 변수라는 메커니즘을 사용하여 해결하고 있다. 변수는 비어있는 메모리 공간을 확보하기 때문에, 운영체제가 이미 사용하는 메모리 주소와 같이 사용 중인 메모리 주소에 들어가지 못하게 막아 값을 변경하는 것을 방지하고 오류를 막을 수 있다. 또한, 코드를 실행할 때 메모리 공간을 변수로 기억하고 있기 때문에 재사용이 가능해진다.

식별자

변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 갖는다. 식별자는 값이 아니라 메모리 주소를 기억하고 있는데 이 식별자 라는 용어는 변수 이름에만 국한해서 사용하지 않고 변수, 함수, 클래스 등의 이름을 모두 식별자로 부르고 있다.

변수 선언

변수 선언이란 변수를 생성하는 것을 말하는데 값을 저장하기 위한 메모리 공간을 확보하고 메모리 공간의 주소를 연결해서 값을 저장 할 수 있게 준비하는 것이다. 이 변수 선언은 var, let, const 라는 키워드를 사용한다.

변수 호이스팅

변수 호이스팅이란? 자바스크립트를 실행할 때 아래의 예시처럼 변수 선언문 이전에 변수를 호출하는 코드가 있을때,

console.log(x) //변수 호출 (콘솔에 undefined로 나옴)
var x = 1 // var x;는 변수 선언, x=1은 할당

변수 선언이 코드의 최상단으로 올려진것 같이 동작하는 현상이 있는데 이를 호이스팅이라고 부른다.

이러한 현상은 코드가 실행되는 런타임이 아니라 런타임 이전 평가 단계에서 변수 선언이 되기 때문에 발생하는데 var는 평가 단계에서 변수 선언과 동시에 undefined로 초기화가 같이 진행되는 특징이 있다.

그 결과 위 예시의 주석에서 보여진 것처럼

var는 오류 없이 undefined로 실행 된다.

let과 const는 호이스팅은 되지만 var와는 달리 런타임 이전 평가단계에서 초기화가 이뤄지지 않기 때문에 변수 선언문 보다 이전에 변수를 호출하면 ReferenceError가 발생한다.

값의 할당

변수에 값을 할당할 때는 연산자 = 을 사용한다. 예를 들어

//첫번째 코드
var num = 1

이라는 코드가 있다면 우변의 값을 좌변의 변수에 저장 한다는 뜻이고 이를 "할당"한다라고 말한다.

//두번째 코드
var num
num = 1

특징으로는 첫번째 코드와 두번째 코드는 같은 코드인데 첫번째 코드는 하나의 문으로 단축 표현한것이다.
여기서 var num; 은 변수 선언이므로 런타임 이전 단계에서 먼저 실행되며 num = 1 은 런타임에 실행된다.

값의 재할당

값이 들어있는 변수에 새로운 값을 저장하는 것을 값의 재할당이라고 부르는데 재할당 방식을 알아둘 필요가 있다. 변수에 값을 저장하기 위해서는 임의의 공간을 확보하고 메모리 주소에 이름을 붙이고 그곳에 값을 저장한다는 것을 잘 알고 있을것이다. 재할당이라는 말을 보면 기존에 들어 있던 값을 지우고 새로운 값을 덮어쓴다고 생각하기 쉬운데 사실은 덮어쓰는것이 아니라 새로운 메모리 공간을 확보하고 그곳에 새로운 값을 저장한 뒤 변수 이름을 새긴다. 그리고 기존의 참조는 해제한다. 즉, 새로운 메모리 공간에 변수를 다시 설정하고 기존의 메모리 주소는 해제한다고 보면 된다.

이렇게 하면 기존의 변수에 들어 있던 값은 누구와도 연결되지 않은 상태가 되는데 이는 자바스크립트의 가비지 콜렉터라고 하는 청소기에 의해 자동으로 지워진다. 단, 메모리에서 언제 지워질지는 알 수 없다.

Q&A

Q. 변수란 무엇인가요?

A: 하나의 값을 저장하기 위해 확보한 메모리 공간 입니다.

Q. 그렇다면 변수는 왜 사용하는 건가요?

A: 변수가 없이 직접 메모리 주소를 제어한다면 기존에 저장되어 있던 값을 덮어버릴 수도 있고 자바스크립트는 코드를 실행할 때마다 메모리 주소가 계속 변경되는데 이는 기존의 값과의 연결이 끊겨 값을 재사용 할 수 없다는 뜻이기 때문에 변수로 값을 저장하고 재사용하기 위해 사용합니다.

Q. 변수 이름, 변수 값, 할당, 참조가 뭔지 설명해주세요

A: 변수 이름은 메모리 공간에 상징적인 이름을 붙인것을 말하고 변수 값은 변수에 저장 된 값, 할당은 변수에 값을 저장하는 작업을 말하고 참조는 변수에 있는 값을 읽는 것 입니다.

Q. 호이스팅에 대해 설명해주세요

A: 호이스팅은 변수 선언과 같이 런타임 이전 평가 단계에서 먼저 실행되어 코드의 맨 위로 끌어 올려진 것처럼 동작하는 현상을 말합니다.