[번역] JavaScript Essentials: 자료형과 자료구조

이 글은 CodeDraken이 작성한 JavaScript Essentials: Types & Data Structures를 번역한 글입니다. 감사 인사나 Claps는 원 글에 부탁드립니다. Essentials 시리즈는 앞으로 이어서 번역할 예정입니다.

Essentials에서는 어떠한 주제에 대해서 가장 자주 사용되면서 중요한 문제들을 다루는 시리즈입니다. 다른 언어를 이미 잘 다루고 있는 개발자 혹은 이 주제를 빠르게 시작해보고 싶은 분들을 위한 시리즈입니다. 이번 글에서는 자료형과 자료구조를 다룰 것입니다.

너무 깊게 들어가지는 않겠지만, JS를 다루면서 반드시 마주치게 될 일반적인 주제와 공부할만한 자료들을 다룰 것입니다. 한마디로, 언젠간 반드시 마주하게 될 것을 미리 알려드릴 것입니다.

사전 지식

이번 주제에 대해서는 사전 지식은 필요하지 않습니다. 어떠한 언어에도 적용될 수 있는 기초적인 주제지만 JavaScript 에서는 쉽게 혼동할 수 있는 것들입니다.

자료형 & 자료구조의 기초

typeof 연산자를 활용해 자료형에 대해 알아볼 것입니다.

JS는 자료형을 가지고 있나요?

어떤 사람들은 JS는 자료형 구분이 없다고 하기도 하며 혹은 자료형 시스템을 자료형이라고 불러서는 안된다고도 주장합니다. JS에서는 변수를 지정할 때 다른 엄격한 자료형 언어에서 처럼 자료형을 별도로 선언하지 않아도 됩니다(예: int x = 10). 저(그리고 JS 스펙에서)는 JS에서도 자료형 구분이 있다고 얘기합니다.

JS에서는 동적 자료형약한 자료형 두 시스템을 모두 가지고 있습니다.

정적 자료형

JS는 정적 자료형 언어가 아닙니다. 다만 TypescriptFlow 같은 별개의 도구의 힘을 빌려 정적 자료형처럼 사용할 수는 있습니다.

정적 자료형이란 자료형이 강제되고 쉽게 바꿀 수 없는 것을 말합니다. 모든 변수는 자료형과 함께 선언됩니다.

int x = 5
string y = ‘abc’

동적 자료형

동적 자료형 언어란 런타임 시점에 변수의 자료형을 추론합니다. 일단 코드가 실행되고 나면, 컴파일러/인터프리터는 우선 변수를 먼저 읽고 난 뒤 자료형을 결정한다는 의미입니다. 동적 자료형에서도 자료형은 역시나 강제되는 것은 같지만 단지 자료형을 결정하는 시점이 다를 뿐입니다.

var a = 1 // int
b = ‘test’ // string
// etc

약한 자료형

약한 자료형 언어에서는 한 번 정해진 자료형을 또 다른 자료형으로 바꾸는 것이 가능합니다. 예를 들어 1 + '2' // '12' 라는 JS 코드를 보면, 숫자에 문자열을 더하고 있음을 볼 수 있습니다. 이는 숫자형을 문자형으로 변환하여 문자열 '12'가 됨을 알 수 있습니다.

기본 자료형

아래 6가지 자료형은 기본 자료형으로 분류됩니다. 기본 자료형은 객제가 아니며 스스로 메소드를 가지고 있지도 않습니다. 또한 모든 기본 자료형은 불변성을 띄고 있습니다.

Boolean — `true` 혹은 `false`
 Null — 값이 없음
 Undefined — 변수는 선언되었으나 값이 담기지 않음
 Number — 정수, 소수 등
 String — 문자열 예) words
 Symbol — 다른 값과 같지 않는 유일한 값

이 외에 모든 값은 다 객체입니다.

기본 자료형의 기초

객체

아래 몇 가지 기본 객체들이 있습니다. 이 중 몇몇은 기본 자료형과 중복되는 것들이 있지만 혼동하지 않도록 주의해야 합니다. 객체 자료형은 변수가 생성되는 시점에 생성자로 동작합니다. 예) Boolean('a') // true

여러분만의 고유한 구조를 만들기 위해서는 다음 자료형을 사용합니다:

그 외의 자료형으로는 다음의 것들이 있습니다:

  • Function
  • Boolean
  • Symbol
  • Error
  • Number
  • String
  • RegExp
  • Math
  • Set
객체의 기초

그렇다면 주로 언제 헷갈리는 문제가 발생하는 걸까요?

서로 다른 자료형을 뒤섞어 사용하면서 JavaScript가 동적으로 형변환을 일으키는 경우 주로 문제가 발생합니다. 이보다 더 잘 설명할 수 없는 글이 있어 추천합니다:

이어서 또 혼동이 될 만한 부분과 함께 몇가지 팁을 소개하려고 합니다.

잊지 말아야 할 것들

  • 모든 기본 자료형은 불변성을 띈다.
  • 형변환에 유의하라.
  • 정적 자료형은 존재하지 않는다. 예) int num = 5
  • 자료형 결정은 JavaScript 엔진이 한다.

혼동이 될만한 또 다른 사항들

JavaScript는 혼동이 될만한 부분이 꽤 많습니다 — Wtf JS? 참조

왜 Null은 객체인가요?

문서는 null을 기본 자료형으로 설명하고 있지만 typeof nulltobject를 반환합니다.

이는 원래 수정되어야 하지만 기존에 작성된 코드로 인해 수정되지 않고 있는 버그입니다. JavaScript 첫번째 버전부터 typeof 함수 내에 존재하던 것으로 간단한 pseudo 코드로 단순화시켜 설명하자면 이렇습니다.

pseudo typeof

버그를 찾았나요? 단지 null 에 대해 확인하지 않고 있죠…

거절당한 제안은 이곳에서 확인해볼 수 있습니다. 또 이 부분에 대한 소스코드도 확인 가능합니다.

왜 숫자가 아닌데 숫자인가요?

typeof NaN // 'number' 뭐지!?

간단히 말하자면 NaN은 숫자형으로 정의되었으나 실제 숫자는 아닙니다. NaN는 수량화 될 수는 없지만 수학적 계산의 결과입니다.

조금 더 단순하게 답하자면 스펙이 그렇게 정의되었기 때문입니다.

이중 등호 vs 삼중 등호

이 주제에 대해 CodeBurst에서 다룬 글이 있습니다.

지금 써야되나? 싶으면 그냥 삼중 등호를 쓰세요.

기본 자료형은 객체가 아니며 자체 메소드도 갖지 않습니다.

“기본 자료형은 메소드를 갖지 않는다고 했잖아요. 근데 `’abc’.length`는 뭐죠?”

맞습니다. 문서에 그렇게 적혀있습니다.

기본형(기본값, 기본 자료형) 은 객체가 아닌, 메소드를 갖지 않는 데이터입니다. JavaScript에서는 6가지 기본 자료형이 존재합니다: string, number, boolean, null, undefined, symbol(ECMAScript 2016에서 추가).

우선, 기본 자료형을 갖는 생성자와 혼동하면 안됩니다. 모든 기본 자료형은 생성자 혹은 부모 객체를 갖습니다. JS는 개발자가 기본 자료형의 메소드에 접근하려는 것을 인지하고, 보이지 않는 영역에서 개발자가 접근하고자 하는 기본 자료형의 객체를 만들기 위해서 생성자를 사용합니다. 메소드가 실행되고 나면, 뒤에서 만들어진 객체는 가비지 컬렉터에 의해 정리됩니다(메모리에서 제거).

아래 예제를 보시죠.

문자열은 기본 자료형

문자열은 위에서 설명한 것처럼 기본 자료형입니다. 객체가 아니죠. JS는 문자열 객체에 있는 메소드에 접근하기 위해 여러분이 정의한 기본 자료형을 문자열 객체로 형변환을 시도합니다. 필요한 작업이 끝나면 임시로 형변환되어 생성된 객체는 가비지 컬렉터에 의해 제거됩니다.

문자열 생성자

이에 대해서는 Kyle Simpson이 쓴 YDKJS를 읽어보세요:

유용한 팁

자료형을 활용한 유용한 방법들입니다.

이 방법들을 유의해서 사용해보세요. 대부분의 경우, Number(str), parseInt(x), String(num) 등을 사용하고 있을 것입니다. 혹 다른 곳에서 아래와 같은 코드를 본다면, 이제는 이 코드가 어떤 일을 하는지 이해할 수 있을 것입니다.

형변환, 기본값, if문 줄이기

참고자료 및 링크

읽어주셔서 감사합니다! 질문이나 하실 말씀이 있다면 댓글에 남겨주세요!