자바스크립트의 변수, 데이터 타입, 타입 변환

변수(Variables)

대부분의 경우 자바스크립트 어플리케이션은 정보를 가지고서 작업합니다. 그 두가지 예를 들어보겠습니다.

1. 온라인 샵: 파는 물건, 쇼핑 카트 등의 정보 필요
2. 채팅 앱: 사용자, 메세지 등의 정보 필요

변수는 이런 정보를 저장하는데 사용됩니다.

변수

변수 생성을 위해 let 이라는 키워드를 사용합니다.

let message; message = 'Hello!'; alert(message); // 변수에 저장된 내용 표시

cs

변수 선언과 저장을 한번에 하기도 합니다.

let message = 'Hello!'; // 변수선언과 값 할당 alert(message); // Hello!

cs

여러개 변수를 세미콜론으로 구분하여 한 줄에 할 수도 있습니다.

let user = 'John', age = 25, message = 'Hello';

cs

이런 방식은 간단해 보이기는 하지만 가독성이 떨어지므로 여러 줄로 나누길 권장합니다.

let user = 'John'; let age = 25; let message = 'Hello';

cs

같은 내용을 아래와 같이 쓰는 사람도 있습니다.

let user = 'John',   age = 25,   message = 'Hello';

cs

또는

let user = 'John'   , age = 25   , message = 'Hello';

cs

모두 같은 내용이며 본인의 스타일 차이입니다.

과거의 스크립트에서는 let 대신 var를 사용하기도 했습니다. 

var message = 'Hello';

cs

var와 let은 거의 비슷하지만 조금 다른데, 나중에 다루겠습니다.

변수 이름 짓기

1. 변수 이름에는 문자(대소문자 구별), 숫자, $, _ 만 허용됩니다.
2. 첫 글자는 숫자가 올 수 없습니다.

유효한 이름의 예는 아래와 같습니다.

let userName; let test123;

cs

여러 단어로 이루어진 긴 이름의 변수를 지을 때는 camelCase 명명법(첫글자는 소문자, 나머지 단어의 첫글자는 대문자. 예컨대 myVeryLongName)을 사용하는 것이 권장됩니다. 

독특하게도 $와 _도 특별한 의미없는 단순한 문자로 간주되어 이름에 사용 가능합니다.

let $ = 1; // "$"라는 이름의 변수 선언 let _ = 2; // "_"라는 이름의 변수 선언 alert($ + _); // 3

cs

문자로는 영어 알파벳 외에 어떤 것도 사용할 수 있으나 권장되지 않습니다. 세계 어느 나라에서 봐도 알아볼 수 있도록 알파벳을 사용합시다.

예약어(예컨대 let, class, return, function...)는 당연히 변수명으로 사용불가합니다.

use strict 선언 없는 할당

보통은 변수 사용 전에 일단 변수를 선언해야 합니다. 그러나 예전 방식으로는 let 없이 단순히 값을 할당하는 것만으로도 변수를 사용할 수가 있었는데, "use strict" 선언을 하지 않으면 지금도 그런 방식으로 변수 사용이 가능합니다(예전 코드와의 적합성을 위한 조치입니다). 

// note: 여기에는 "use strict" 선언이 없습니다. num = 5; // 선언 없이 num이 만들어집니다. alert(num); // 5

cs

반면,

"use strict"; num = 5; // error: num is not defined

cs

상수(constant)

const 키워드로 상수를 선언할 수 있습니다.

const myBirthday = '18.04.1982';

cs

상수는 아시다시피 다른 값으로 재할당하는 것이 불가합니다.

대문자 상수

기억하기 어려운 값을 상수로 지정하고 대문자와 언더바로 표시하는 것은 오래된 관습이죠.

const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // 색을 고를 때  let color = COLOR_ORANGE; alert(color); // #FF7F00

cs

상수로 이름을 붙여주면 기억하기 쉽고, 오타의 우려가 없고, 이해하기 쉬워집니다.

이렇게 대문자로 된 상수를 사용하는 경우가 있는가 하면, 보통의 명명법대로 camelCase로 상수를 만들어 쓸 때가 있습니다.

const pageLoadTime = /* 웹페이지 로드에 걸리는 시간 */;

cs

대문자는 색 Hex값이나 수학 상수 등 어떤 경우에도 변하지 않는 값을 표현하는데 쓰이고, 웹페이지 로드 시간처럼 실행타임이 되어야 알 수 있는 경우에 사용합니다.

다른 표현으로 하자면 대문자 상수는 주로 하드코딩 용이라는 뜻이기도 합니다.

Data type

자바 스크립트의 변수는 어떤 자료형이라도 저장이 가능해서 문자열을 저장하다가 숫자를 저장하는 것도 가능합니다.

// no error let message = "hello"; message = 123456;

cs

이런 방식을 동적 타입이라고 하며 자료형이 존재는 하나 변수가 어느 하나로 정해지지는 않는 것을 말합니다.

자바스크립트에는 모두 7개의 데이터 타입이 존재하며 여기서는 그 기본만 살펴보겠습니다.

숫자

let n = 123; n = 12.345;

cs

자바스크립트의 number 타입은 integer, float의 구분이 없으며, 사칙 연산 등 다양한 연산을 가지고 있습니다.

보통의 수 말고도 Infinity, -Infinity, NaN 이라는 특별한 값도 number 타입에 속하는데, Infinity는 무한대 -Infinity는 음의 무한대, NaN은 불능을 말합니다.

alert( 1 / 0 ); // Infinity alert( Infinity ); // Infinity

cs

alert( "not a number" / 2 ); // NaN alert( "not a number" / 2 + 5 ); // NaN

cs

자바스크립트는 이 무한대와 불능의 개념 덕에 devide by 0 와 같은 예외를 내뿜지 않습니다.

문자열

자바스크립트에서는 C, Java에서와 같은 char타입은 없으며, 전부 string 타입으로 정해져 있습니다. 이 문자열은 큰 따옴표(") 혹은 작은 따옴표('), 혹은 backtick(`)으로 감싸져야 합니다.

let str = "Hello"; let str2 = 'Single quotes are ok too'; let phrase = `can embed ${str}`;

cs

큰따옴표, 작은따옴표는 같은 것으로 취급되고, backtick은 확장기능 따옴표라고 해서 내부에 ${...}으로 래핑한 표현식이 들어갈 때 사용합니다.

let name = "John"; // embed a variable alert( `Hello, ${name}!` ); // Hello, John! // embed an expression alert( `the result is ${1 + 2}` ); // the result is 3

cs

큰따옴표, 작은 따옴표에서는 ${...}을 사용할 수 없습니다.

Boolean

이 타입에는 오직 true, false의 두 가지 값만 존재합니다.

let nameFieldChecked = true; // yes, name field is checked let ageFieldChecked = false; // no, age field is not checked

cs

비교의 결과값으로 올 수도 있습니다.

let isGreater = 4 > 1; alert( isGreater ); // true (the comparison result is "yes")

cs

null

null은 이상의 모든 타입에도 해당하지 않는다는 뜻이며, 홀로 독립된 타입을 이루고 있습니다. 다른 언어에서와 마찬가지로 "object에 대한 레퍼런스가 존재하지 않음", "null 포인터"라는 의미입니다.

undefined

undefined 또한 null처럼 홀로 하나의 타입을 이루고 있으며, 그 뜻은 "값이 할당되지 않음"을 의미합니다.

따라서 변수가 선언만 되고 값이 할당되지 않았을 때, undefined로 분류됩니다.

Object, Symbol

object 타입은 좀 특별합니다. 다른 타입은 문자열이면 문자열, 숫자면 숫자 한 가지만 담을 수 있는데(그래서 primitive라 불립니다) 반해 object는 데이터며 여러 성질을 복합적으로 담을 수 있습니다.

symbol은 객체의 고유한 식별자를 만드는데 사용되는 타입입니다.

이 두가지는 추후 더 자세히 다룹니다.

typeof 연산자

이 연산자는 인자의 타입을 알려줍니다. 두가지 방식으로 사용되는데

1. 연산자 스타일: typeof x
2. 함수 스타일: typeof(x)

typeof undefined // "undefined" typeof 0 // "number" typeof true // "boolean" typeof "foo" // "string" typeof Symbol("id") // "symbol" typeof Math // "object"  (1) typeof null // "object"  (2) typeof alert // "function"  (3)

cs

마지막 세 줄은 설명이 필요할 것 같습니다.

Math는 수학 계산을 위해 내장되어 있는 object입니다.

그리고 아까 null은 타입이라고 했는데 여기서는 object라고 표시됩니다. 이것은 공식적으로 인정되었으나 호환성을 위해 그냥 넘어간 언어자체의 오류입니다.

그리고, alert는 function으로 표시되었는데 엄밀히 말하자면 function도 object의 하나지만 편리성을 위해 다르게 표시되었습니다.

타입 변환

자바스크립트의 연산자, 함수는 주어진 값을 적절한 타입으로 잘 변환합니다. 

예를 들어 alert함수는 주어진 값을 스트링으로 변환하고, 수학 함수는 값을 숫자로 변환해서 적용하는데, 간혹 우리가 명시적으로 타입을 변환해 주어야 할 경우가 있습니다.

ToString

이미 alert 함수의 경우에서 보았듯이 필요한 때에 알아서 변환됩니다만 문자열로 데이터 변환을 할 필요가 있을 때에는 String(value)와 같은 함수를 사용합니다.

let value = true; alert(typeof value); // boolean value = String(value); // 이제 value는 "true"라는 문자열  alert(typeof value); // string

cs

문자열로의 변환은 굉장히 명확한 편이어서 false를 변환하면 "false", null을 변환하면 "null"이 됩니다.

ToNumber

수학적 함수나 표현식에서 자동으로 데이터가 숫자로 변환됩니다.

예를 들어 숫자 아닌 것에 대해 / 연산을 시행하면,

alert( "6" / "2" ); // 3, string이 자동으로 number 변환됨

cs

마찬가지로 Number(value)라는 표현으로 명시적 변환도 가능합니다.

let str = "123"; alert(typeof str); // string let num = Number(str); //숫자 123이 됨 alert(typeof num); // number

cs

유효한 숫자가 아닌 것을 변환 시도하면 NaN이 발생합니다.

let age = Number("숫자가 아닌 문자열"); alert(age); // NaN, conversion 실패

cs

특수한 값들에 대한 숫자변환 규칙은 다음과 같습니다.

Undefined -> NaN
null -> 0
true -> 1
false -> 0
string -> 앞뒤 공백을 제거하고 남은 문자열이 없다면 0, 변환 가능한 유효한 숫자가 없는 경우 NaN

alert( Number("   123   ") ); // 123 alert( Number("123z") );      // NaN (error reading a number at "z") alert( Number(true) );        // 1 alert( Number(false) );       // 0 Colored by Color Scripter

cs

* 거의 모든 숫자 연산자는 데이터를 숫자로 변환하여 사용합니다. 다만 +는 예외인데 더하는 대상 둥 하나가 문자열이면 나머지 하나도 문자열로 변환되어 문자열 연결로 처리됩니다.

alert( 1 + '2' ); // '12'  alert( '1' + 2 ); // '12'

cs

ToBoolean

Boolean으로의 변환은 가장 단순합니다.
조건식을 만나도 되고, 단순히 Boolean(value) 형식으로 호출해도 됩니다.

판정 규칙은

• "비어 있는 것"으로 간주되는 값( 0, 빈 문자열, null, undefined, NaN)은 false
• 나머지는 true

alert( Boolean(1) ); // true alert( Boolean(0) ); // false   alert( Boolean("hello") ); // true alert( Boolean("") ); // false

cs

문자열인 "0"이나 공백은 true입니다.

alert( Boolean("0") ); // true alert( Boolean(" ") ); // spaces, true

cs