신기한 연구소

안녕하세요. 신기한 연구소입니다.

변수 이야기를 또 하게 되었습니다.

이번은 자바스크립트의 변수 이야기입니다.

변수의 특징에 대해 이해하고 호이스팅이 무엇인지 살펴볼까 합니다.

우선 변수에 대한 정의는 이전 포스팅을 참고하면 좋겠습니다. 

2021.05.30 - [Software/데이터베이스(SQL)] - [PLSQL]변수와 상수 친절한 설명으로 이해하기.

2021.08.01 - [Software/Java] - 변수와 객체 정리해 보기. 클래스 변수, 파라메터, 인스턴스 변수, 지역 변수, 전달 인자...

프로그램은 다르더라도 변수의 개념은 같기에 미리 읽어보면 좋겠네요.

자바스크립트의 변수에 대한 이야기를 시작해봅니다.

먼저 자바스크립트의 변수는 일반적으로 var라는 키워드로 선언을 합니다.

ES6부터는 var의 구조적 문제의 해결을 위해 let과 const가 추가되었답니다.

간단하게 비교한다면...

var는 같은 변수명으로 중복 선언이 가능합니다.

let은 같은 변수명으로 중복 선언이 안됩니다.

const는 상수를 표현합니다. 즉 무조건 선언시 값을 할당해야 하고 이후 값을 변경할 수 없습니다.

예제.

결과.

위 예제처럼 firstVal은 중복 선언이 가능하고 오류가 나지 않습니다.

이렇게 짧은 코드는 개발자가 쉽게 인지하겠지만...

공통 작업을 하는 경우 엄청 길고 많은 코딩이 이루어질텐데

var로 중복된 변수를 선언해도 알기 힘들고 또한 잘못된 값이 전달될 수 있기에

문제가 발생하게 됩니다.

예제.

결과.

let의 경우는 중복 선언이 안된다고 했습니다.

위 예제에서 보듯 let으로 firstVal을 같은 이름으로 중복 선언하고 실행하니

이미 선언된 식별자(변수)라고 오류를 표시합니다.

예제.

결과.

이번 예제는 상수 const에 대한 부분입니다.

상수는 선언 시 무조건 값도 할당해야 합니다.

선언만 해서 초기 값이 빠졌다는 오류가 표시됩니다.

const도 중복 선언이 안되며 let과도 중복된 이름을 사용할 수 없습니다.

특히, var는 중복 선언이 가능하지만 그건 var끼리만 가능하고

const나 let과는 var라도 중복 선언을 할 수 없답니다.

예제.

결과.

const에 firstVal을 선언했기에 아무리 var라도 중복된 이름을 선언하니 오류가 납니다.

자바스크립트의 변수는 초기에 값을 설정하지 않으면 "undefined"라는 값이 할당됩니다.

undefined는 null도 아니고 빈 값 ""도 아닌 그냥 undefined입니다.

그래서 변수의 타입을 확인해봐도 undefined로 나타난답니다.

다음 예제로 확인해보겠습니다.

예제.

결과.

신기하네요.

그런데 뭔가 이상한 점이 있지 않나요?

자바스크립트 변수를 선언할 때는 var, let, const로 선언한다고 했습니다.

물론 위 선언문 없이 그냥 변수명만 써도 사용이 가능합니다.

그런데...

자바나 C 등의 프로그램은 변수를 선언할 때 타입으로 지정해서 하는데

자바스크립트는 그런 부분이 없습니다.

문자인지, 숫자인지, boolean인지 선언하지 않아도 자동으로 캐스팅이 된다는 겁니다.

즉, 선언하고 값을 할당할 때 자동으로 값에 맞는 타입이 된다는 의미입니다.

예제.

결과.

위 예제를 보면 numStr를 선언하고 값을 바꿀 때마다 해당 타입이 변경되는 부분을 확인할 수 있습니다.

자바스크립트의 변수는 먼저 사용하고 그 뒤에 선언해도 사용이 가능합니다.

예제.

결과.

위 예제를 보면 1번 라인에 score라는 변수의 값을 출력합니다.

결과는 undefined입니다.

4번의 출력 값은 80이 나오고 7번 또한 80이 나옵니다.

변수는 3번에서 할당했고 5번에서 선언을 했습니다.

그냥 보기에 혼란스럽네요.

 자바스크립트는 런타임 시점에 한 줄씩 순서대로 실행되는데,

변수 선언은 좀 다릅니다.

런타임 전 자바스크립트 엔진에서 먼저 선언된 변수들을 끌어올려(호이스팅)

실행을 하게 됩니다.

그 논리로 다시 위 예제를 보겠습니다.

var score가 5번에 있기에 먼저 실행하고 인지하게 됩니다.

그럼 1번 앞에 var score;가 오겠네요.

그리고 1번이 실행되면 아직 값이 할당 안되었기에 undefined로 할당돼서 결과가 나오게 됩니다.

그리고 3번에서 80으로 할당하게 됩니다.

그러면 4번에서 로그 출력 시 80으로 나오게 됩니다.

5번은 이미 1번 위로 선언되었기에 7번으로 가서 다시 80을 출력하게 됩니다.

이렇게 자바스크립트를 실행하면 자바스크립트 엔진에서 먼저 선언된 변수들을

쭉 끌어올려서 실행을 하는데 이것을 호이스팅(hoisting)이라고 합니다.

다른 프로그래밍 언어와는 조금 다른 방식의 변수 관리였습니다.

이 부분을 이해하기 위해서는 반드시 샘플을 다양하게 만들어서

확실히 이해하고 간다면

실전에서 개발하는 경우 로직의 이해나 오류에 대응할 때 도움이 될 것입니다.

내일 또 코딩 전쟁터로 떠나야겠네요.

즐 코딩하세요~~

안녕하세요. 신기한 연구소입니다.

공부하기 딱 좋은 계절이 왔습니다.

자바스크립트를 공부하다 보면 ES6라는 용어가 종종 나옵니다.

물론 많은 분들이 아시겠지만 처음 공부하는 친구들은 ES6가 무엇인지 궁금해 할 수도 있겠지요?

저 또한 궁금한 마음에 찾아봤습니다.

자바스크립트(javascript)에 대한 이야기를 읽다 보면 ES6가 무엇인지 알게 된답니다.

인터넷을 모르던 시절 군 제대 후 복학해서 그저 당구와 술로 인생을 허비하던 때~

몇몇 친구들이 PC통신을 하고 있더군요.

처음엔 돈 들여서 왜 하지?라고 생각을 했는데

다양한 정보를 접하기도 하고 심지어 실시간으로 채팅도 한다더군요.

그러던 어느날 학교 공용 컴퓨터를 만나게 되었는데

윈도우즈98 운영체제에 익스플로러와 내비게이터라는 브라우저가 설치되어 있더군요.

한메일, 라이코스, 알타비스타 등 다양한 검색엔진을 통해 정보를 얻을 수 있었고

하늘사랑으로 채팅도 하고

스타크래프트 게임도 배우게 되었답니다.

심지어 배틀넷으로 다른 사람들과 게임을 한다는 것에

놀라움을 금치 못했었답니다. 

이땐 익스플로러와 내비게이터라는 브라우저를 사용했는데

화면으로 보여지는 면에서 익스플로러가 더 깔끔해서 자주 애용했던 기억이 있네요.

1996년도 이야기입니다.

1995년도 넷스케이프 커뮤니케이션즈(내비게이터 브라우저) 마크 안드레센은 

웹페이지의 DOM 과 통신을 할 수 있는 경량 프로그래밍 언어가 필요했습니다.

당시 90%정도의 웹 브라우저 시장을 점유한 넷스케이프 2.0에 자바스크립트가 탑재되었는데

브랜던 아이히가 이 언어의 최초 버전을 개발했다고 합니다.

초기엔 모카로 명명했다가 다시 LiveScript라고 불렸는데

선마이크로시스템즈와 계약을 맺게 되면서 자바스크립트로 불리게 되었다고 하네요.

그래서 자바와 자바스크립트는 사실 같은 언어는 아니지만 자바라는 이름을 같이 사용하게 된 거라네요.

1996년에 마이크로소프트에서는 자바스크립트와 비슷한 JScript를 인터넷 익스플로러 3에 탑재하게 됩니다.

하지만 두 회사의 스크립트는 비슷하긴 했지만 다른 부분도 있었기에 

개발자들이 구현하기 힘들었던 부분이 있었습니다.

익스플로러에 맞춰 개발하면 내비게이터에서 오류가 나거나 그 반대인 경우도 있었지요.

그래서 스크립트에서 브라우저 버전을 체크해서 다른 스크립트로 구현했던 기억도 나네요.

인터넷 사용자들이 증가하고 이에 따라 효율적으로 통합된 스크립트가 필요하게 됩니다.

다시 말해서 브라우저와 관계없이 유연하게 작동하는 통합 스크립트가 필요하게 된 겁니다.

그래서 1996년 넷스케이프 커뮤니케이션즈에서 

컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인

ECMA(European Computer Manufacturers Association)

에 표준화 작업을 요청합니다.

1997년 ECMA-262, 자바스크립트 초판이 나오게 됩니다.

바로 ES1 (ECMAScript 1)이 초기 버전이 됩니다.

이후 E2부터 2015년 ES6버전까지 나오게 되며

ES7부터 ES11(2020년)까지 나오지만 ES6버전으로 표준이 정립되게 됩니다.

이제 ES6가 무엇인지 알게 되었네요. ㅎㅎ

참고로 ES6 버전부터 let, const라는 키워드도 추가되었답니다.

자바스크립트는 브라우저의 보조적 스크립트 프로그래밍 언어로 시작했지만

점점 발전하게 되어 이제는 Ajax로 비동기 방식 통신도 지원하고

jQuery로 DOM을 더 쉽게 컨트롤할 수 있게 되었으며

V8 자바스크립트 엔진의 등장으로 자바스크립트 런타임 환경인 Node.js 가 2009년도 나타납니다.

Node.js는 서버 사이드 애플리케이션 개발에 주요 사용된답니다.

그리고 이제는 SPA(Single Page Application), 단일 페이지 애플리케이션의 시대가 되었다고 합니다.

Angular, React, Vue.js 등 SPA 프레임워크 또한 많은 영역에서 사용을 하고 있답니다.

올 초에 잠시 발을 담갔던 공공 프로젝트의 UI 소스를 본 적이 있었습니다.

하나의 소스에 여러 화면에 대한 html이 작업되어 있었고

상황에 따라 동적으로 표현되도록 개발되어 있었습니다.

각 페이지마다 필요한 데이터만 동적으로 서버에 요청해서 받을 뿐

html은 처음 호출 때 이미 가지고 있었던 겁니다.

왜 이렇게 복잡하게 만들었을까?라는 생각을 했었는데

바로 SPA로 개발된 소스였답니다.

방금 말한 대로 초기에 모든 화면의 html을 불러와야 하는 부담과

개발할 때 하나의 소스 파일에 여러 화면을 동적으로 구성해야 하는 복잡성이 단점이지만

이렇게 구현이 되고 나면 사용상의 성능은 훨씬 좋아지게 된다고 합니다.

모르면 배워야 합니다.

내가 모르면 이건 잘못된 것이다, 이상하다고 생각하면 안 되겠지요?

이번에 또 하나를 배워갑니다.

자바스크립트 이야기는 이 정도로 하고

다음 포스팅부터는 기초적인 문법을 아주~ 쉽게 같이 공부해보도록 하겠습니다.