[모던 자바스크립트 Deep Dive] 6장 데이터 타입

 

서론

데이터 타입(Data Type)은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. ES6에서는 7개의 데이터 타입을 제공하며, 이는 원시 타입(Primitive Type)과 객체 타입(Object/Reference Type)으로 분류할 수 있다.

원시 타입에는 다음과 같은 6가지 타입이 있다.

1. 숫자(Number) 타입: 숫자, 정수와 실수를 구분하지 않고 하나의 숫자 타입만 존재한다. 모든 숫자는 실수로 처리된다.
2. 문자열(String) 타입: 문자열을 나타낸다.
3. 불리언(Boolean) 타입: 논리적 참(true)과 거짓(false)을 나타낸다.
4. undefined 타입: var 키워드로 선언된 변수에 암묵적으로 할당되는 값이다.
5. null 타입: 값이 없음을 의도적으로 명시할 때 사용하는 값이다.
6. 심벌(Symbol) 타입: ES6에서 추가된 7번째 타입으로, 주로 유일무이한 객체 프로퍼티를 만들기 위해 사용된다.

객체 타입에는 객체(Object), 함수(Function), 배열(Array) 등이 있으며, 이는 원시 타입을 제외한 나머지를 말한다.

이처럼 자바스크립트에서는 다양한 종류의 값을 나타내기 위해 데이터 타입을 사용한다. 각 데이터 타입은 그 목적과 용도가 다르며, 메모리에 저장되는 방식과 크기도 다르다. 예를 들어, 숫자 타입의 값 1과 문자열 타입의 값 '1'은 겉보기에 비슷해 보이지만 실제로는 전혀 다른 값이다. 숫자는 주로 산술 연산을 위해 사용되는 반면, 문자열은 화면에 텍스트를 출력하는 등의 용도로 사용된다.

 

숫자 타입

자바스크립트는 다른 프로그래밍 언어와 달리 하나의 숫자 타입(number type)만 존재한다. ECMAScript 사양에 따르면, 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다. 이는 모든 수를 실수로 처리하며, 정수만을 위한 별도의 타입이 없다는 것을 의미한다.

 

var integer = 10;    // 정수
var double = 10.12;  // 실수 
var negative = -20;  // 음의 정수

예를 들어 정수, 실수, 음의 정수 등은 모두 숫자 타입으로 표현된다.

 

var binary = 0b01000001; // 2진수
var octal = 0o101;       // 8진수
var hex = 0x41;          // 16진수

console.log(binary); // 65
console.log(octal);  // 65
console.log(hex);    // 65

또한 자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않는다. 하지만 아래와 같이 2진수, 8진수, 16진수 리터럴로 표현할 수 있으며, 이들을 참조하면 모두 10진수로 해석된다.

 

console.log(1 === 1.0); // true
console.log(4 / 2);     // 2
console.log(3 / 2);     // 1.5

자바스크립트의 숫자 타입은 정수, 실수를 구분하지 않고 모든 수를 실수로 처리하기 때문에 정수로 표시된다 해도 사실은 실수라는 것을 의미한다. 따라서 정수끼리 나누더라도 실수가 나올 수 있다.

숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

console.log(10 / 0);       // Infinity
console.log(10 / -0);      // -Infinity 
console.log(1 * 'String'); // NaN

 

• Infinity : 양의 무한대
• -Infinity : 음의 무한대
• NaN : 산술 연산 불가(not-a-number)

 

자바스크립트는 대소문자를 구별하므로 NaN은 반드시 대문자로 표기해야 한다. nan, NAN 등은 에러를 발생시킨다. 참고로 NaN은 자바스크립트에서 숫자로 변환할 수 없는 연산을 시도할 때 반환되는 값이다. 쉽게 말하자면 중간에 문자나 숫자가 아닌 값(Not-a-Number)이 들어가서 결과가 꼬였을 때 주로 나오는 속성이다.

이처럼 자바스크립트는 하나의 숫자 타입만을 통해 정수, 실수, 2진수, 8진수, 16진수 리터럴 등을 모두 표현하며, 배정밀도 64비트 부동소수점 형식을 따른다. 또한 Infinity, -Infinity, NaN과 같은 특별한 값도 표현할 수 있어 수치 연산에 유용하게 활용될 수 있다.

 

문자열 타입

문자열(string) 타입은 텍스트 데이터를 나타내는 데 사용된다. 문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.

문자열은 작은따옴표(''), 큰따옴표(""), 또는 백틱(``)으로 텍스트를 감싸서 표현한다. 자바스크립트에서 가장 일반적인 표기법은 작은따옴표를 사용하는 것이다.

 

var string;
string = '문자열';  // 작은따옴표
string = "문자열";  // 큰따옴표 
string = `문자열`;  // 백틱(ES6부터 지원)

string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.';
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다.";

문자열을 따옴표로 감싸는 이유는 키워드나 식별자 같은 토큰과 구분하기 위해서이다. 만약 따옴표로 감싸지 않으면 자바스크립트 엔진은 이를 식별자나 키워드 같은 토큰으로 인식한다. 또한 따옴표로 감싸지 않으면 공백문자도 포함할 수 없다.

 

var string = hello; // ReferenceError: hello is not defined
var string2 = hello world; // SyntaxError: Unexpected identifier

C언어에서 문자열은 문자의 배열로, Java에서는 객체로 표현하지만, 자바스크립트의 문자열은 원시 타입(primitive type)이며 변경 불가능한(immutable) 값이다. 이는 한번 문자열이 생성되면 그 문자열을 변경할 수 없음을 의미한다.

 

var str = 'Hello';
str = 'world';

위의 예시에서 첫 번째 문이 실행되면 문자열 'Hello'가 메모리에 생성되고 식별자 str은 메모리에 저장된 문자열 'Hello'의 주소를 가리킨다. 두 번째 문이 실행되면 이전에 생성된 문자열 'Hello'를 수정하는 것이 아니라, 새로운 문자열 'world'를 메모리에 생성하고 식별자 str은 이것을 가리킨다. 이때 문자열 'Hello'와 'world' 모두 메모리에 존재하게 된다. str은 문자열 'Hello'를 가리키고 있다가 'world'를 가리키도록 변경되었을 뿐이다.

 

이처럼 자바스크립트의 문자열은 내용을 변경할 수 없는 원시값으로 관리되어 보다 효율적이고 안전하게 문자열을 처리할 수 있도록 한다.

 

템플릿 리터럴

템플릿 리터럴(Template Literal)은 ES6에서 도입된 새로운 문자열 표기법이다. 백틱( )을 사용해 표현하며, 일반 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있고 문자열 인터폴레이션 기능도 제공한다.

 

var template = `Template literal`;
console.log(template); // Template literal

템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.

 

템플릿 리터럴은 다음과 같은 기능을 제공한다.

 

멀티라인 문자열(Multi-line String)

var template = `<ul>
  <li><a href="#">Home</a></li>
</ul>`;

console.log(template);

 

일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않고 백슬래시()로 시작하는 이스케이프 시퀀스를 사용해야 한다. 하지만 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다.

 

표현식 삽입(Expression Interpolation)

var first = 'Ung-mo';
var last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// My name is Ung-mo Lee.

// ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`);
// My name is Ung-mo Lee.

console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3

 

문자열은 문자열 연산자 +를 사용해 연결할 수 있다. 템플릿 리터럴 내에서는 표현식 삽입( ${expression})을 통해 간단히 문자열 삽입이 가능하다. 이는 문자열 연산자보다 가독성이 좋다.

 

태그드 템플릿(Tagged Template)

const person = 'Kim';
const age = 28;

function myTag(strings, personName, personAge) {
  var str0 = strings[0]; // "That "
  var str1 = strings[1]; // " is a "

  // 사람이 adult면 adult, 아니면 minor 반환
  var ageStr = personAge > 17 ? 'adult' : 'minor';

  return str0 + personName + str1 + ageStr;
}

var output = myTag`That ${ person } is a ${ age }`;

console.log(output); // That Kim is a adult

 

템플릿 리터럴을 함수로 파싱할 수 있는 기능이다. 태그드 템플릿을 사용하면 템플릿 리터럴을 함수 실행의 파라미터로 넘길 수 있다.

 

이스케이프 시퀀스는 문자열 내에서 특정한 문자를 표현하기 위해 역슬래시() 기호와 함께 사용되는 문자 조합이다. 자주 쓰이는 이스케이프 시퀀스로는 줄바꿈(\n), 탭(\t), 작은따옴표('), 큰따옴표(") 등이 있다.

이처럼 템플릿 리터럴은 문자열을 좀 더 자유롭게 다룰 수 있게 해주는 강력한 기능이다. 특히 멀티라인 문자열과 문자열 인터폴레이션 기능은 복잡한 문자열을 간결하고 가독성 좋게 표현할 수 있게 해준다.

 

불리언 타입

불리언(boolean) 타입의 값은 논리적 참과 거짓을 나타내는 true와 false 두 가지 뿐이다. 불리언 타입의 값은 조건문에서 자주 사용된다. 조건문은 참과 거짓으로 구분되는 조건에 따라 프로그램의 흐름을 제어한다.

아래는 불리언 타입의 변수를 선언하고 값을 할당하는 예제이다.

var foo = true;
console.log(foo); // true

foo = false;
console.log(foo); // false

불리언 타입은 조건문뿐만 아니라 다른 자료형으로 자동 형변환되기도 한다. 자바스크립트에서는 아래와 같은 값들은 false로 평가되고, 이를 제외한 모든 값은 true로 평가된다.

• alse
• undefined
• null
• 0, -0
• NaN
• ' ' (빈 문자열)

// falsy(false) 값
if (false)      console.log(false);
if (undefined)  console.log(undefined);
if (null)       console.log(null);
if (0)          console.log(0);
if (NaN)        console.log(NaN);
if ('')         console.log('');

위의 코드에서는 조건문의 조건식이 모두 거짓으로 평가되므로 실행되는 코드가 없다.

 

// truthy(true) 값
if (true)       console.log(true);
if (1)          console.log(1);
if (-1)         console.log(-1);
if ('string')   console.log('string');
if ({})         console.log({});
if ([])         console.log([]);

반면에 해당 코드는 조건식이 모두 참으로 평가되어 모든 console.log가 실행된다.

 

이처럼 불리언은 조건에 따른 분기 처리에 자주 사용되는 자료형이다. 변수명을 짓는 컨벤션으로 불리언 변수는 이름 앞에 is를 붙이는 것이 일반적이다. (ex. isAvailable, isChecked 등)

 

undefined 타입

undefined 타입의 값은 undefined가 유일하다. var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. 즉, 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 내버려 두지 않고 자바스크립트 엔진이 undefined로 초기화한다.

 

var foo;
console.log(foo); // undefined

 

따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.

 

이처럼 undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이다. 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적 없는 변수라는 것을 알 수 있다.

 

var activeItem = null; // 활성화된 아이템이 없는 상태

 

개발자가 의도적으로 변수에 값이 없음을 명시하고 싶을 때는 undefined를 할당하는 것이 아닌 null을 할당한다.

 

일반적인 프로그래밍 언어에서는 선언(declaration)과 정의(definition)를 구분한다. 선언은 컴파일러에게 식별자의 존재를 알리는 것이고, 정의는 실제 컴파일러가 변수를 생성해서 식별자와 메모리 주소를 연결하는 것이다. 

하지만 자바스크립트에서는 변수를 선언하면 암묵적으로 정의가 이뤄지므로(undefined가 할당되므로) 선언과 정의의 구분이 모호하다. 이에 대해 ECMAScript 사양에서는 변수는 '선언한다'라고 표현하고, 함수는 '정의한다'라고 표현한다.

이처럼 undefined는 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값으로, 변수가 선언된 이후 명시적으로 값이 할당되지 않은 상태를 나타내기 위해 사용된다. 개발자가 의도적으로 값이 없음을 나타내고 싶다면 null을 사용하는 것이 권장된다.

 

null 타입

null 타입의 값은 null이 유일하다. 자바스크립트에서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재intentional absence)할 때 사용한다. 이는 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이며, 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 뜻한다. 

 

var foo = 'Lee';

// 이전 참조를 제거. foo 변수는 더이상 'Lee'를 참조하지 않는다. 
foo = null;

 

위의 예제에서 볼 수 있듯이, foo 변수에 null을 할당하면 더 이상 문자열 'Lee'를 참조하지 않게 된다. 하지만 자바스크립트에서는 C언어처럼 메모리를 직접 관리하지 않기 때문에 null을 할당한다고 해서 곧바로 foo에 할당되어 있던 문자열 'Lee'의 메모리가 해제되는 것은 아니다. 이는 자바스크립트 엔진의 가비지 컬렉터(Garbage Collector)가 더 이상 참조되지 않는 메모리를 주기적으로 해제하는 방식으로 동작하기 때문이다.

 

한편, 함수가 유효한 값을 반환할 수 없는 경우에도 명시적으로 null을 반환하는 것이 좋다. 예를 들어, HTML 요소를 검색해 반환하는 document.querySelector 메서드는 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환한다.

 

<!DOCTYPE html>
<html>
<body>
  <script>
    var element = document.querySelector('.myClass');
    
    // HTML 문서에 myClass 클래스를 갖는 요소가 없다면 null을 반환한다.
    console.log(element); // null
  </script>
</body>
</html>

위 코드에서 'myClass' 클래스를 가진 요소가 없으면 document.querySelector는 null을 반환한다.

주의할 점은 자바스크립트에서는 대소문자를 구별하기 때문에 Null, NULL 등은 null과는 다른 별개의 값으로 취급된다는 것이다.

이처럼 null은 프로그래밍 언어에서 없음을 명시적으로 나타내기 위해 사용되는 값으로, 변수에 저장된 값에 대한 참조를 명시적으로 제거하거나 유효하지 않은 값임을 나타내는 용도로 사용된다.

 

심벌 타입

심벌(Symbol)은 ES6에서 새롭게 추가된 7번째 데이터 타입으로, 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값으로, 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키(property key)를 만들기 위해 사용된다.

심벌은 Symbol 함수를 호출하여 생성하며, 생성된 심벌 값은 외부에 노출되지 않고 다른 값과 절대 중복되지 않는 특징이 있다.

 

// 심벌 값 생성
const key = Symbol('key');
console.log(typeof key); // symbol

// 객체 생성
const obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); // "value"

위의 예제에서 볼 수 있듯이, Symbol 함수를 통해 심벌 값을 생성하고 이를 객체의 프로퍼티 키로 사용할 수 있다. 이때 심벌 값은 객체의 프로퍼티 키로 사용되므로 프로퍼티 키의 이름이 충돌할 위험이 없어진다.

심벌은 객체의 프로퍼티 키 이외에도 다양한 곳에 사용될 수 있다. 예를 들어, 클래스 내부의 private 멤버를 만드는 데 사용할 수도 있다.

한편, 심벌은 객체의 프로퍼티 키로 사용되는 경우가 많지만 그 자체로 범용성은 떨어진다. 왜냐하면 심벌 값을 객체의 프로퍼티 키로 사용하려면 대괄호 표기법([])을 사용해야 하는데, 이는 일반적인 프로퍼티 접근 방식인 점 표기법(.)보다는 가독성이 떨어지기 때문이다.

또한, 심벌은 프로퍼티 은닉(property hiding)을 위해 사용되기도 하지만 이는 진정한 의미의 은닉이 아니라 단순히 프로퍼티 키의 충돌을 회피하는 것에 불과하다.

이처럼 심벌은 ES6에서 도입된 새로운 원시 타입으로, 유일무이한 값을 생성하여 객체의 프로퍼티 키로 사용함으로써 프로퍼티 이름의 충돌을 방지할 수 있다. 하지만 심벌의 실제 사용 사례는 제한적이며, 일반적인 코딩에서는 자주 사용되지는 않는다.

 

객체 타입

자바스크립트의 데이터 타입은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 이는 원시 타입과 객체 타입의 근본적인 차이 때문인데, 이에 대한 자세한 설명은 추후 11장에서 다룰 예정이다.

중요한 것은 자바스크립트가 객체 기반의 언어라는 점이다. 자바스크립트를 이루고 있는 거의 모든 것이 객체이며, 지금까지 살펴본 6가지 데이터 타입(숫자, 문자열, 불리언, undefined, null, 심벌) 외에는 모두 객체 타입이다. 

 

객체 타입에는 크게 객체, 함수, 배열 등이 있다. 

객체는 속성(property)의 집합으로, 속성은 키(key)와 값(value)으로 구성된다. 이때 키는 문자열 또는 심벌 값이어야 하며, 값은 모든 타입의 값을 가질 수 있다. 만약 속성의 값으로 함수가 온다면 이를 메서드(method)라고 부른다.

 

let person = {
  name: 'John',  // 속성
  age: 30,        // 속성 
  sayHello: function() {  // 메서드
    console.log('Hello!'); 
  }
};

이처럼 객체는 데이터(속성)와 그 데이터에 관련되는 동작(메서드)을 모두 포함할 수 있어 데이터와 동작을 하나의 단위로 구조화할 수 있다는 장점이 있다.

자바스크립트에서는 함수도 객체이다. 함수는 일급 객체(first-class object)로 취급되어 변수에 할당하거나 다른 함수의 매개변수로 전달할 수 있다. 

배열 역시 객체의 일종으로, 순서가 있는 데이터 집합을 나타낸다. 배열의 요소는 객체를 포함한 모든 타입의 값이 될 수 있다.

let arr = [1, 2, 3, {x: 4, y: 5}, [6, 7]];

한편, 자바스크립트의 객체는 프로토타입(prototype)이라는 다른 객체의 프로퍼티나 메서드를 상속받을 수 있다. 이는 자바스크립트만의 고유한 특성으로, 프로토타입에 대해서는 추후 상세히 다루기로 한다.

이처럼 자바스크립트에서 원시 타입을 제외한 나머지는 모두 객체이며, 객체는 데이터와 그에 관련된 동작을 하나로 묶을 수 있는 매우 유용한 데이터 타입이다. 객체에 대한 자세한 내용은 이후의 장에서 심도 있게 다룰 예정이다.

 

데이터 타입의 필요성

데이터 타입이 필요한 이유는 다음과 같다.

• 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

자세히 살펴보면, 값을 메모리에 저장하고 참조하기 위해서는 먼저 값을 저장할 때 확보해야 할 메모리 공간의 크기를 결정해야 한다. 이는 값을 저장할 때 몇 바이트의 메모리 공간을 사용해야 낭비와 손실 없이 저장할 수 있는지를 알아야 함을 의미한다.

 

예를 들어, 아래와 같은 코드가 실행되면,

var score = 100;

 

자바스크립트 엔진은 숫자 값 100을 저장하기 위해 메모리 공간을 확보한 다음, 확보된 메모리에 숫자 값 100을 2진수로 저장한다. 이때 자바스크립트 엔진은 데이터 타입, 즉 값의 종류에 따라 정해진 크기의 메모리 공간을 확보한다. 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정되는 것이다.

 

위 예제에서 자바스크립트 엔진은 리터럴 100을 숫자 타입의 값으로 해석하고, 숫자 타입의 값을 저장하기 위해 8바이트의 메모리 공간을 확보한 후 해당 메모리에 값 100을 2진수로 저장한다. 참고로 ECMAScript 사양에서 숫자 타입은 배정밀도 64비트 부동소수점 형식을 따르며, 이는 8바이트로 표현된다.

 

한편, 저장된 값을 참조할 때는 한 번에 읽어 들여야 할 메모리 공간의 크기, 즉 메모리 셀의 개수(바이트 수)를 알아야 한다. 위 예제의 score 변수에는 숫자 타입의 값이 저장되어 있으므로 자바스크립트 엔진은 8바이트 단위로 메모리 공간에 저장된 2진수를 읽어 들인다.

 

마지막으로, 메모리에서 읽어 들인 2진수를 어떻게 해석할 것인지도 데이터 타입에 의해 결정된다. 모든 값은 데이터 타입을 가지며 메모리에 2진수, 즉 비트의 나열로 저장되는데 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있기 때문이다. 예를 들어, 메모리에 저장된 2진수 값 0100 0001을 숫자로 해석하면 65지만, 문자열로 해석하면 'A'가 된다.

 

이처럼 자바스크립트 엔진은 데이터 타입을 기준으로 값을 저장할 메모리 공간의 크기를 결정하고, 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하며, 메모리에 저장된 2진수를 어떻게 해석할지를 결정한다. 이를 위해 데이터 타입이 필요한 것이다.

 

요약

데이터 타입이 필요한 가장 주요한 이유는 다음과 같이 정리할 수 있다.

1. 메모리 공간 확보의 효율성을 위해
   1. 자바스크립트 엔진은 변수에 할당되는 값의 데이터 타입에 따라 필요한 메모리 공간의 크기를 결정한다.
   2. 예를 들어, 숫자 타입은 8바이트, 불리언 타입은 1바이트 등 데이터 타입마다 필요한 메모리 공간의 크기가 다르다.
   3. 데이터 타입을 사전에 알고 있으므로 낭비나 손실 없이 효율적으로 메모리를 사용할 수 있다.
2. 값의 참조를 위해
   1. 메모리에 저장된 값을 참조할 때는 한 번에 읽어 들여야 할 메모리 공간의 크기를 알아야 한다.
   2. 이는 저장할 때 사용한 데이터 타입의 메모리 공간 크기와 일치한다.
   3. 예를 들어, 숫자 타입의 경우 8바이트 단위로 읽어오고, 불리언은 1바이트 단위로 읽는다.
3. 2진수 해석을 위해
   1. 메모리는 모든 데이터를 2진수 형태로 저장한다.
   2. 2진수 형태로 저장된 값이 어떤 데이터 타입인지 알아야 적절하게 해석할 수 있다.
   3. 예를 들어, 2진수 '0100 0001'은 숫자 타입이라면 65로, 문자열 타입이라면 "A"로 해석된다.

이처럼 데이터 타입은 값을 효율적으로 저장하고, 참조하고, 해석하는 데 필수적이다. 데이터 타입 없이는 값을 제대로 다룰 수 없게 된다.

 

동적 타이핑

프로그래밍 언어는 동적 타입 언어와 정적 타입 언어로 나눌 수 있다. C나 자바 같은 정적 타입 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 하며, 정적 타입 언어에서는 변수의 타입을 변경할 수 없고 선언한 타입에 맞는 값만 할당할 수 있다. 또한 정적 타입 언어는 컴파일 시점에 타입 체크를 수행해 타입 체크를 통과하지 못하면 프로그램 실행을 막는다.

 

반면에 자바스크립트는 동적 타입 언어로, 변수를 선언할 때 타입을 선언하지 않는다. 대신 var, let, const 키워드를 사용해 변수를 선언하며, 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다. 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)되고, 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이라 하며, 자바스크립트를 정적 타입 언어와 구별하기 위해 동적 타입 언어라고 한다.

 

var foo;
console.log(typeof foo); // undefined

foo = 3;
console.log(typeof foo); // number

foo = 'Hello';
console.log(typeof foo); // string

foo = true;
console.log(typeof foo); // boolean

foo = null;
console.log(typeof foo); // object

foo = Symbol();  
console.log(typeof foo); // symbol

foo = {}; 
console.log(typeof foo); // object

foo = [];
console.log(typeof foo); // object

foo = function () {};
console.log(typeof foo); // function

위 예제처럼 자바스크립트의 변수는 어떤 타입의 값이라도 할당할 수 있다. typeof 연산자로 변수의 타입을 확인할 수 있는데, 이는 변수가 아니라 변수에 할당된 값의 타입을 반환한다. 

 

이처럼 동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있어 편리하지만, 이면에는 위험이 도사리고 있다. 복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어려울 수 있다. 또한 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. 즉, 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다고 할 수 있다.

 

따라서 자바스크립트에서 변수를 사용할 때는 다음과 같은 주의사항을 염두에 두어야 한다.

1. 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다. 
2. 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다. 
3. 전역 변수는 최대한 사용하지 않는다.
4. 변수보다는 상수를 사용해 값의 변경을 억제한다.
5. 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다.

결론적으로, 자바스크립트의 동적 타이핑은 개발의 유연성을 높여주지만 코드의 복잡성을 증가시키고 잠재적 오류의 가능성을 내포하고 있다. 따라서 변수의 사용을 최소화하고, 변수의 스코프를 좁게 만들며, 전역 변수의 사용을 자제하는 등의 노력을 통해 코드의 안정성과 신뢰성을 높이는 것이 중요하다.

 

요약

동적 타입 언어와 정적 타입 언어

• 정적 타입 언어: C, C++, Java, Kotlin, Go, Haskell 등
  • 변수 선언 시 데이터 타입을 명시해야 함 (명시적 타입 선언)
  • 선언한 타입에 맞는 값만 할당 가능
  • 컴파일 시점에 타입 체크 수행
• 동적 타입 언어: JavaScript, Python, PHP, Ruby 등
  • 변수 선언 시 타입 명시 없이 var, let, const 등의 키워드로 선언
  • 어떤 타입의 값이라도 할당 가능
  • 할당된 값에 따라 타입이 동적으로 결정됨

동적 타이핑

let foo = 42;    // foo는 현재 숫자 타입
foo = "bar";     // foo는 이제 문자열 타입
foo = true;      // foo는 이제 불리언 타입

• 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입 결정 (타입 추론)
• 재할당으로 변수의 타입이 동적으로 변경될 수 있음
• typeof 연산자: 변수의 타입이 아닌, 변수에 할당된 값의 타입을 반환

동적 타이핑의 장단점

• 장점
  • 변수에 여러 타입의 값을 자유롭게 할당할 수 있어 유연하고 편리함
• 단점
  • 변수의 타입이 언제든지 변할 수 있어 코드 추적과 디버깅이 어려울 수 있음
  • 개발자의 의도와 다르게 타입이 자동 변환되어 예상치 못한 오류 발생 가능
  • 대규모 프로그램에서는 타입 관련 문제로 인해 코드의 신뢰성 저하

변수 사용 시 주의사항

1. 꼭 필요한 경우에 한해 제한적으로 변수 사용
2. 변수의 스코프를 최대한 좁게 유지
3. 전역 변수 사용 최소화
4. 상수를 활용해 변수의 값 변경 억제
5. 변수명을 통해 변수의 목적이나 의미를 명확히 할 것