자바스크립트의 값의 할당( Variable Assignment )

var number1 = 30;

var number2;
number2 = 20;

• 자바스크립트에서 위 코드에서 보여주는 두 개의 할당 방식은 선언과 할당으로 분리되어 동일한 코드로 해석됩니다. ( 자바스크립트에서 var 변수 선언은 변수에 대한 정보를 자바스크립트에 알려주고 메모리를 확보하여 undefined로 초기화까지 진행합니다.)

• 할당문이 실행되기 이전에 이미 undefined로 초기화되어 있기 때문에 할당문이 실행될 경우 할당값의 메모리를 새롭게 확보하여 변수가 해당 메모리를 참조할 수 있도록합니다.

자바스크립트의 값의 재할당

var number = 10;
number = 1000;

• 자바스크립트 엔진은 var 변수 초기화값으로 undefined가 저장된 메모리를 참조하도록 하기 때문에 모든 var 변수 대입은 재할당입니다.
  자바스크립트에서 변수를 재할당할 경우 기존에 가리키던 메모리는 자바스크립트 엔진의 가비지 컬렉터에 의해서 언젠가는 해제됩니다.

자바스크립트의 변수 선언( Variable Declaration )

var number;

console.log(number);

• 자바스크립트에서 선언은 자바스크립트 엔진에게 변수에 대한 정보를 알려주고 메모리 확보를 진행합니다. 그리고 var타입의 경우는 undefined로 초기화까지 수행합니다.

변수 호이스팅( Variable Hoisting )이란?

// undefined 출력
console.log(num1);

{
  var num1;
}

• 자바스크립트는 인터프리터 언어로서 모든 코드를 맨 위에서 한 줄씩 실행되기 때문에 위 코드는 정상적으로 수행되지 않을것 처럼 보이지만 실제로는 undefined를 출력합니다.
  자바스크립트 엔진은 런타임(runtime) 이전에 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행 후 각 선언문들을 자신이 속한 스코프 레벨의 최상단으로 끌어 올려진 것처럼 동작하는데 이러한 자바스크립트 고유의 특징을 변수 호이스팅이라고 합니다.
  ( var 데이터 타입은 함수 레벨 스코프만 인식하기 때문에 블록 레벨 스코프는 무시합니다. )

값, 리터럴, 표현식, 문 구별이 중요한 이유

• 값, 리터럴, 표현식, 문을 구별함으로서 코드를 읽고 실행 결과를 예측할 수 있으며, 이는 버그를 줄이고 코드의 품질을 높여주는데 도움이 됩니다. 또한 이러한 용어를 정확하게 습득함으로서 협업하는 과정에서 의사소통 비용을 줄일 수 있습니다.

값( value )란?

• 값은 식( 표현식 ) 또는 리터럴( literal )이 평가되어 생성된 결과를 말합니다.

평가란?

// 10 + 20을 평가해서 30을 생성
let num = 10 + 20;

• 평가란 위와같은 식을 해석해서 값을 생성하거나 참조하는 것을 의미합니다.

리터럴( literal )

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

• 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성합니다.

리터럴 종류

표현식( expression )

• 표현식은 값으로 평가될 수 있는 문( statement )입니다.

• 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조합니다.

리터럴( literal )과 표현식

var isHandsome = true;

• 위 표현식에서 true 리터럴은 값으로 평가되며 결국 위의 식은 표현식입니다.

문( statement )

• 문( statement )은 프로그램을 구성하는 기본 단위이자 최소 실행 단위입니다. 문의 집합으로 이뤄진 것이 바로 프로그램이며, 문을 순서에 맞게 작성하며 나열하는 것이 프로그래밍입니다. 문은 명령문이라고도 부르며 자바 스크립트 엔진은 세미콜론을 통해 문의 종료를 파악하고 이를통해 하나씩 문을 실행합니다.

문의 종류

// 선언문
let x;

// 할당문
x = 5;

// 함수 선언문
function foo() {}

// 조건문
if (x > 3) console.log(x);

// 반복문
for (let i = 0; i < 10; ++i) console.log("Hello World");

• 문은 명령문이라고도 부릅니다. 즉, 문은 컴퓨터에 내리는 명령이며 문의 종류로는 선언문, 할당문, 조건문 반복문 등으로 구분할 수 있습니다.

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

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

// 1 + 2는 값으로 평가되기 때문에 표현식이면서 문이다.
x = 1 + 2;

// 선언문은 변수에 할당할 수 없다.
let z = let y;

// 표현식인 문은 값처럼 사용할 수 있다.
let i = x = 1000;

• 표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있다. 표현식인 문은 변수에 할당이되고 표현식이 아닌 문은 변수에 할당이 안 된다.

자바스크립트( JavaScript )란?

• 자바스크립트(영어: JavaScript)는 객체 기반의 인터프리터 언어입니다. 현재는 컴파일 언어의 특징 일부를 가지고 있습니다.

간단한 자바스크립트 문법

const player = {
  name: "devhun",
  age: 20,
  isHandsome: true,
};

console.log(player.name);

• 위 코드는 자바스크립트를 통해 객체를 생성하는 문법입니다.

자바스크립트 탄생 비화

• 1995년, 약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹 페이지의 보조적인 기능을 수행하고 인터랙티브하게 만들기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정하였고 그래서 탄생한 것이 바로 브랜든 아이크 ( Brendan Eich ) 가 10일 만에 개발한 자바스크립트입니다.

자바스크립트 표준화

• 자바 스크립트의 파편화 방지 및 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트를 위해서 1996년 11월, 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA( European Computer Manufacturers Association ) 인터내셔널에 자바스크립트의 표준화를 요청 후
  1997년 7월, ECMA-262라 불리는 표준화된 자바스크립트(ECMAScript 1) 사양이 완성되었고 상표권 문제로 "ECMAScript로" 명명되었습니다. 이후 1999년 "ECMAScript 3( ES3 )" 이 공개된 이후 ES5, ES6 등이 출시되었습니다.

자바스크립트 성장의 역사

• 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었습니다. 2008년에 구글이 V8 자바스크립트 엔진을 출시하면서 훨씬 좋은 퍼포먼스를 가진 자바스크립트 엔진을 선보였으며 이는 자바스크립트가 더욱 발전할 수 있는 계기가 되었습니다.

Node.js

• Node.js는 2009년 "라이언 달 ( Ryan Dahl )" 이 발표한 Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런 타임입니다.
  
  Node.js는 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공합니다.
  
  Node.js의 등장으로 자바스크립트는 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 프로그래밍 언어가 되었으며, 현재는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있습니다.

자바스크립트와 ECMAScript

• ECMAScript는 자바스크립트 표준 사양인 ECMA-262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정한 것을 말합니다. 각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현합니다.
  
  자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등을 아우르는 개념입니다.
  
  클라이언트 사이드 Web API는 ECMAScript와는 별도로 W3C( World Wide Web Consortium )에서 별도의 사양으로 관리하고 있습니다.