자바스크립트 변수
목차
변수란 데이터의 임시 저장소를 말합니다.
어떤 수를 표현하기 위해서 이름을 지어야 하고 값을 할당해야 합니다. 컴퓨터 프로그래밍에서 이름을 식별자(Identifier)라고 하고 값이 할당되는 형태를 자료형(data type)이라고 합니다.
자바스크립트는 C와 같은 정적인(static) 언어와 대비되는 동적인(dynamic) 언어입니다. 동적인 언어는 자료형을 명시하지 않아도 컴파일러가 스스로 체크해서 알아낸다는 특징이 있습니다. 이는 처음 프로그래밍을 하는 사람들에게는 편리한 기능이기도 하지만 숙결된 프로그래머로 나아가기 위해서는 정적 언어에서 사용하는 변수에 대해서도 이해할 필요가 있습니다.
동적인 언어와 정적인 언어라는 두개의 분류를 알고 있다면 다른 언어를 배우는 것에 상당한 플러스가 됩니다. 자바스크립트는 동적인 언어라서 변수를 선언하는데 굳이 자료형을 신경쓰지 않아도 코드의 작성에 문제가 없을지 모릅니다.
그러나 구조를 이해하면 훨씬 더 깊은 프로그램을 작성할 수 있습니다. typeof 키워드를 제공하는 이유도 객체의 타입을 아는 것이 필요하기 때문입니다.
변수를 단순히 문법적으로 설명할 수도 있지만 어쨋든 길게 보면 알아야 하는 것들입니다. 이 정도만 강조해두고 자바스크립트의 변수를 알아보겠습니다.
숫자형(Numbers)
숫자형으로 퉁을 쳐서 말하지만 크게 컴퓨터에서 사용하는 숫자형은 두 종류가 있습니다. 하나는 정수형이고 다른 것은 실수형(float point 부동 소수점) 입니다. 상세히 들어가면 저장하는 메카니즘에 차이가 납니다.
정수형
정수형은 음수, 0, 양수를 말합니다.
-200, 0, 835 같은 숫자는 정수형입니다. 소수점. 이 없는 숫자라고 생각하면 됩니다.
내부적으로 자바스크립트가 숫자를 다루는 방법은 매우 복잡한 구조를 갖지만 애플리케이션을 만드는 프로그래머들은 세부적 사항이 보이지 않습니다.
실수형(부동소수점 수)
실수형 혹은 부동소수점 수라고 합니다.
소수점이 있는 숫자로 5.0, 0.01, -72.3 처럼 쓰거나 1.4e2, 2.5e-1 과 같은 지수표현법을 사용합니다.
숫자 관련 함수
유용한 숫자 관련 함수들은 자바스크립트의 변수에 익숙해지는데 도움이 됩니다.
이것 저것 찔러보는 방식(poke)의 코딩은 초반에 빠르게 실력을 늘릴 수 있습니다.
자바스크립트 콘솔에서 예제를 테스트 해봅니다. 브라우저의 검사 -> 콘솔에서 입력해도 되고 nodejs 의 node 프로그램을 사용해도 좋습니다. 자바스크립트는 웹에서 돌아가지만 그 내부 동작들은 콘솔에서 확인할 수 있습니다.
// 문자열인지 테스트
> isNaN(2);
false
> isNaN('temp')
true
// 정수로 변환
> parseInt(2.7)
2
> parseInt("500px",10)
500
> parseInt("700")
700
> parseInt("1111",2)
15
> parseInt("Hello World!")
NaN
// 실수로 변환
> parseFloat("50.7")
50.7
> parseFloat("35 ea")
35
> parseFloat("Learning JavaScript")
NaN
문자열(String)
문자열은 어쩌면 모든 프로그래밍 언어에서 가장 중요하게 다뤄지는 부분입니다. 컴퓨터는 0과 1로만 작동을 시킬 수 있는데 인간은 0과1을 이해하는 것이 어렵기 때문입니다. 컴퓨터 역사의 초창기에는 컴퓨터에 명령을 전달하기 위해 천공카드를 사용하였는데 0과 1 비트로 이루어져 있었습니다.
컴퓨터는 진화했지만 여전히 그 밑바닥에서는 0과1로 작동하고 있습니다.
인간이 이해할 수 있는 것은 문자입니다. 영어, 한국어, 중국어 등에서 채택된 것은 세계 공용어인 영어입니다. 우리는 아무 의심없이 문자열을 사용하지만 그것은 처음에 컴퓨터를 만든 영미권의 언어가 영어였기 때문입니다. 사실 한글이나 한자 등은 문자열의 인코딩이 훨씬 복잡하기도 하고요.
어디까지나 후세의 가정이지만 영어는 대소문자 합쳐서 52개에 불과하지만 한글조합은 11,172개로 초창기 하드웨어의 성능을 생각하면 한국인이 컴퓨터를 만들었다 하더라도 영어를 공용어로 선택했을 가능성이 높습니다.
프로그래밍을 영어로 하기 때문에 한글 사용자는 아무래도 어려움을 느끼기 마련인데 중요한 것은 인간의 언어와 컴퓨터의 언어 사이에는 근본적인 차이점이 있습니다.
문자열은 인간의 언어를 표현하고 다시 이 문자열을 사용하여 컴퓨터에게 명령을 내리도록 개발되었습니다. 많은 프로그래밍 교재에서 이런 부분을 설명하지 않고 기계적인 원리만 설명하는 부분이 좀 아쉽긴 합니다. 허나 프로그래밍의 세계가 인문학은 아니니까요.
영어를 잘 몰라서 코딩도 어렵다는 사람들도 많이 있기 때문에 이 부분을 이해하면 조금 마음이 편합니다. 기계는 어차피 영어도 한글도 모릅니다. 0과 1만 알죠.
우리가 사용하는 문자열은 문자들이 순서대로 나열되어 있는 것으로 이를 씨퀀스(Sequence)라고 합니다. 문자는 나름의 체계가 있는데 현재 전세계에서 가장 많이 사용되는 문자 시스템은 ASCII 와 유니코드입니다.
다음은 문자열 예제입니다.
> var myString = "This is myString"; undefined > myString 'This is myString' > let newString = 'Hello Java Script!' undefined > newString 'Hello Java Script!' > console.log(myString); This is myString undefined >
var 나 let 은 변수의 선언을 표시하는 키워드입니다. 문자열은 “” 큰따옴표와 ”작은따옴표로 둘러쌉니다.
문자열에는 다양한 메소드가 있는데요. 이는 별도 포스팅에서 다루도록 하겠습니다. 상세한 레퍼런스는 아래 참고문서 MDN 의 문서가 가장 잘 정리되어 있습니다. MDN은 Java Script 와 HTML CSS 에 관한 가장 광범위한 문서를 보유한 웹사이트입니다. 문서의 양이 방대하지만 나름 튜토리얼 가이드도 번역된 내용이 있기 때문에 자바스크립트를 배울 때 꼭 참고자료로 추천하는 사이트입니다.
불린형(Boolean)
불린형은 참과 거짓(true or false) 두가지 상태 중 하나를 갖습니다. 불린형에서 추가적으로 false 라고 판단하는 값들이 있는데요. 이는 undefined, null, 0, NaN, “” 입니다. 또 true 나 false 의 반전 연산자는 ! 입니다. !는 true 는 false 로 false 는 true 로 바꾸는 연산자입니다.
> var myBool = true undefined > typeof myBool 'boolean'
객체형 (Object)
자바스크립트의 객체형은 다른 OOP (객체 지향 프로그래밍) 언어들과는 다소 차이가 있습니다. 차이점에 대해서는 앞으로 하나씩 알아가보겠습니다.
변수도 하나의 객체 – Object 로 볼 수 있습니다. 객체형(Object)이 따로 있지만 일반적인 아이디어로는 변수는 객체입니다. 여기서 혼동이 오기 시작하는데요. 변수는 가장 앞부분에 배우지만 가장 어려운 주제의 하나인 것은 문맥에 따라 작동방식이 다양하기 때문입니다. (Semantic) 동적인 언어가 특히 묵시적으로 컴파일러가 처리하는 일이 많기 때문에 그 안에 일어나는 일을 들여다 보기에 쉽지가 않습니다.
그 모든 경우의 수를 체크하는 일은 자바스크립트 애플리케이션을 만들기 위해 알필요는 없기 때문에 여기서는 null 이나 undefined는 설명하고 넘어가겠습니다.
null 은 어떤 객체에 대한 분명한 값입니다. 정수형 변수에는 0을 의미하고 문자열에는 “” 빈문자열을, 불린형에는 false 를 의미합니다. undefined는 null 과 차이가 있는데 un 안했다 defined 정의하다 의 뜻으로 아직 변수의 형태를 정의하지 않았다는 말입니다. 이 undefined 와 null 의 사이에 갭이 있습니다. null은 일단 데이터형태를 정의한 상태이고 undefined는 어떤 데이터로 사용할 지 아직 정의하지 않았다는 말입니다.
> var mun1 undefined
요약
자바스크립트 변수에 대하여 대강의 소개를 해봤습니다. 항상 새로운 언어의 튜토리얼을 할 때마다 느끼지만 변수 부분이 가장 설명이 어려운데요.
우리에게 간단해 보이는 변수 시스템일 수록 그 아래 숨겨진(under the hood) 언어의 본질이 있습니다. 변수부터 언어의 본질을 이해하고 튜토리얼을 진행하는 것과 그냥 덮어놓고 가는 것은 큰 차이가 있습니다.
사실 본질을 이해하지 못해도 뭔가 해보면서(poke) 배울 수는 있습니다. 대부분 사람들이 그렇게 시작하죠.다만 자바스크립트는 현대의 가장 복잡 미묘한 언어 중 하나입니다. 그것은 사용자에 따라 천차만별로 소감이 다르다는 것 입니다.
웹프레임워크의 발달과 바닐라 자바스크립트의 회귀 같이 뭔가 무한히 반복하는 듯한 이 순환고리가 있습니다. 그도 그럴것이 2000년대 이후 가장 많은 사람들이 참여한 웹기술의 정점이기 때문입니다.
자바스크립트는 사실 많은 사람들의 서브 랭귀지 정도로 사용하던 시절부터 봐왔는데 이 언어를 진지하게 바라본 것은 다른 언어들에 비하면 그리 오래되지 않았습니다.
시작하는 단계에서 자바스크립트 튜토리얼에 대해 얼마나 많은 포스팅을 하게 될지는 모르겠습니다만 일단 열심히 해보려고 합니다.
참고문서
String – JavaScript | MDN (mozilla.org)
문자열 제대로 다루기 – Web 개발 학습하기 | MDN (mozilla.org)