11) 데이터 타입과 형 변환

*이 글은 프로그래밍 지식이 아예 없다는 가정하에 작성하였습니다. 혹시 다른 프로그래밍 언어를 경험해보신 분들은 빠르게 넘어가셔도 좋습니다.

 

프로그래밍 언어는 어떤 문법을 갖춰야 할까? 당신이 어떤 사람에게 일을 시킨다고 가정해보자.대개 어떻게 말할까? 뭉뚱그려서 말하면 “무엇을, 이럴 때, 이렇게 해라!” 라고 말해야 한다. 컴퓨터도 마찬가지다.

 

‘무엇을’을 쓰는 것에 관한 것은, ‘선언(Declaration)과 정의(Definition)’의 개념에 대해서 알아야 한다. 얘가 숫자인지, 문자인지, 변할 수 있는 것인지 아님 절대 변할 수 없는 것인지 이런 식으로 컴퓨터에게 자신이 처리해야할 데이터의 종류에 대해 알려주는 것이다.

 

‘어떤 조건에서’에 대해 설명하는 것은 ‘조건문’이라는 것을 활용한다. 만약 if(a==0){컴퓨터 종료해라}라는 말이 있으면 a가 0과일치할 때 컴퓨터를 종료하라는 소리다. (이에 대한 구체적인 설명은 다음에 하겠다.)

 

‘이렇게 해라’에 해당하는 부분은 ‘연산자’란 것에 해당한다. 데이터가 무엇인지 알려줬으면 이제 이것을 최종적으로 어떻게 연산하라고 해야 한다. 어떤 일련의 연산과정을 한 번에 묶어서 ‘함수’라는 것으로 분류해서 쓸 수도 있다.

 

여기서 세부적으로 들어가면 당연히 더 많은 개념들이 있지만, 일단 큰 틀에서 간단하게 설명하면 이렇다.

 

첫번 째로 배울 것은 컴퓨터에게 자신이 처리해야 할 데이터의 종류에 대해 알려주는 방법이다. 먼저 javascript 실습환경을 구축해야 한다. HTML과 CSS를 공부했다면 각자 Atom, Visual studio code등과 같은 코드 편집기를 하나씩 쓰고 있을 것이다. 이것을 그대로 활용해도 무방하다. 무엇을 사용해도 괜찮다. 나는 Atom을 쓰고 있다.

 

크롬 브라우저를 이용하면 간단하게 javascript 코드를 실험해볼 수 있다.

근데 사실 더 간단한 방법이 하나 있다. chrome 사용자라면 개발자 도구의 console메뉴에 들어가서 javascript를 마음껏 실험해볼 수 있다. 왜 chrome이 이런 기능이 있을까? 사실 chrome뿐만 아니라 다른 웹브라우저도 이런 기능을 지원한다.

 

바로 전 글에서 잠깐 언급한 적 있지만, 초기 javascript는 웹브라우저가 HTML과 CSS문서 내용을 상황에 따로 바꿀 수 있도록 만들어진 언어이다. 따라서 대부분의 웹브라우저는 javascript 해석기를 갖고 있다. 그리고 개발자가 웹페이지에 직접 코드를 적용해 볼 수 있도록 console도 지원을 하고 있다.

 

웹브라우저를 이용함으로써 실습환경은 아주 간단하게 구축할 수 있다. 긴 코드를 시험해보고 싶다면 편집기를 따로 사용하는 것이 좋다. 하지만 현재는 배우려는 것들은 간단한 코드만을 사용하므로 본 글에서는 chrome을 이용하겠다.

 

명령을 하나 내려보자. var x=10; alert(x); 라고 써보자. 그리고 실행을 해보자. 줄 바꿈을 하고 싶으면 shift+enter키를 누르자. 그냥 enter를 누르면 웹브라우저가 명령을 받아서 실행과정에 옮긴다.

 

그럼 5라고 적힌 알림창이 뜬다!

우리가 무슨 명령을 내린 걸까? 우리가 내린 명령을 분석해보자.

1. var x= 5; => x라는 애는 변수(variable)이고 x에다 5란 값을 집어넣어.
2. alert(x); => alert라는 함수에다 x를 집어넣고 실행해.

함수는 나중에 제대로 배우겠지만, 일단 alert()라는 함수에 대해서 알아만 놓자. 함수란 게 뭔지도모르고 alert()는 정확히 무슨 기능을 하는지 모르겠지만 alert()의 소괄호안에 무언가를 집어넣으면 그것에 맞춰서 알림창에 무언가가 뜨는구나 이 정도만 알면 된다.

 

전체적으로 보면 알겠지만 명령 단위마다 세미콜론(;)을 붙인다. 컴퓨터는 고집이 매우 세다. 융통성이란 것이 전혀 없기 때문에, 정확한 규칙에 따라 명령을 내려야 알아먹는다. 그래서 내가 내리는 명령 하나가 끝났다는 표시로 세미콜론을 쓰는 것이다. 한국어로 치면 마침표와 동일한 기능이다. 만약 세미콜론이 없다면?

 

이전 코드에서 세미콜론을 지워도 정상적으로 실행되는 것을 알 수 있다.

어 되네? 그럼 이 경우는 어떨까?

방금 사용한 코드를 개행없이 작성했더니 오류가 난다.

음? 얘는 오류나네?

사실 이건 javascript 내부적으로 세미콜론을 자동으로 붙여주는 기능이 있기 때문이다. 특히 개행을 하면 자동으로 줄 끝에 세미콜론을 붙인다. 그럼 당연히 그런 질문이 나올 수 있다. 그래서 세미콜론 써야해요? 안 써야해요? 난 쓰는 습관을 들이는 게 좋다는 생각이다. 프로그래밍 초보자의 입장에서 어디서 세미콜론을 붙이는지 정도는 몸으로 익혀야 한다는 생각 때문이다.

 

다시 돌아가서 코드를 분석해보자.

5는 데이터 타입(data type) 중에 숫자(number)에 해당하는 것이다. 데이터 타입이 뭘까? 말 그대로 다룰 수 있는 데이터를 종류 별로 나눈 것이다. 한국말로 ‘자료형’이라고 부르기도 한다

그럼 var은 뭘까? var은 variable의 줄임말이다. 즉 변수라는 말이다. 변수라는 말은 실생활에서도 많이 쓰이는 단어라 의미를 파악하는데 별로 어렵진 않을 것이다. 프로그래밍의 세계에서 변수의 의미를 공학적으로 접근하면 데이터를 저장할 수 있는 메모리 공간이다. 그 뒤에 쓴 x는 그 공간에 이름을 붙인 것이다. 이 이름은 내가 알아서 정하면 된다.

 

 어떤 변수에 이름을 붙여서 이런 변수가 있다고 컴퓨터에게 알리는 일을 변수 선언(declarion)이라고 말한다. 또 변수의 구체적인 데이터 타입과 값을 정해주는 일을 변수 정의(definition)라고 말한다. =은 ‘대입연산자’라고 부른다. 왼쪽(변수)에 오른쪽 값을 할당할 때 사용한다. 변수를 정의할 때는 이 대입연산자를 반드시 사용한다. var x=5; 라고 쓴 것은 즉 변수를 정의와 선언을 동시에 한 것이다. 아래와 같이 선언과 정의를 나누어서 할 수도 있다.

변수선언과 정의를 나눈후에 alert(x)를 한 경우.

 

이제 변수를 다양한 데이터 타입을 이용해서 정의해보자. 데이터 타입은 원시 타입(primitive type)과 객체 타입(object type)으로 나눈다. 여기서 원시타입은 자바스크립트가 기본적으로 다룰 수 있는 데이터 타입을 말하고, 객체 타입은 자신이 따로 만든 데이터 타입이라고 할 수 있다. 객체는 따로 다루도록 한다. 기본 타입에는 6가지가 있다.

1.      숫자(number): 말 그대로 숫자다.

alert(5)를 쓰면 아까와 똑같이 5가 딱 뜬다.

 

2.      문자열(string): 글자들의 모임을 의미한다. 문자열을 나타낼 때는 작은따옴표나 큰따옴표를 씌워서 나타낸다. alert(“hello world!”)를 쓰면 hello world라는 글자가 나타난다.

 

3.      불리언(boolean): 참(true)과 거짓(false)을 나타낸다. alert(true)를 하거나 x는 true라고 선언하고 alert(x)를 해도 똑같이 실행된다. 근데 alert(“true”)와 alert(true)나 똑같은 결과를 나타내지만 엄연히 들어간 데이터타입이 다른 것을 명심하자.

 

4.      undefined: 데이터 타입이 따로 정의되지 않음을 의미한다. 여기서는 typeof 라는 것을 써보자. 어떤 것의 데이터타입을 문자열로 표현해주는 연산자인데, 아래와 같이 써보자.

 

변수 x는 선언만 하고 정의하지 않았다. 즉 변수가 undefined타입이라면 변수가 어떤 것이 되긴 될건데 아직 아예 정의되지 않는 상태라고 생각하면 된다.

 

5.      null: 비어있음을 나타내는 데이터 타입. var x= null이라고 정의하면 x는 값이 비어있는 데이터타입을 나타낸다고 생각하면 된다. undefined와 null의 차이가 헷갈릴텐데 변수의 값이 의도적으로 정의가 됐느냐 안 됐느냐의 차이 정도로 알아두면 편하다.

나중에 읽어보길: https://webclub.tistory.com/1

 

6.      심볼(symbol): 나중에 설명할 예정. 중요도는 나머지에 비해 떨어진다.

 

지금까지 각종 데이터 타입과 선언과 정의에 관해서 배웠다. 이젠 컴퓨터에게 데이터가 무엇인지 선언 및 정의했으면 이걸 가지고 무언가를 시켜야 한다. 컴퓨터의 가장 기본적인 목적이 무엇인가? 바로 계산이다. 그리고 그 때 사용하는 것이 연산자라는 것이다. 우린 아까 가장 기본적인 연산자 하나를 배우긴 했다. 하지만 이것 만으로 컴퓨터에게 각종 일을 시키기에는 매우 부족하다. 다음번엔 이것과 관련된 부분을 배운다.

 

*부록: Javascript 공부 할 때 참고하면 좋은 사이트. 초보자 입장에서 이해하기 쉽고 간단하게 설명되어 있다.

TCP School: http://www.tcpschool.com/javascript/intro