Javascript의 특성과 자료형

HaByungNo·2022년 7월 19일

JavaScript

학이시습지 불역열호

목록 보기

7/20

동적 타입(dynamically typed)의 언어

자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤순간엔 문자열일 수 있고, 또 다른 순간엔 숫자가 될 수 있다.

let numbers = 12345
numbers = "숫자들"   // 에러 안남

// Java는 변수를 선언할때 꼭 자료형을 앞에 써줘야 하고
// 변수를 재할당으로만은 자료형을 변경할수 없지만

// 자바스크립트는 그럴 필요가 없는 셈

이처럼 자료형의 구분은 있지만 변수의 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 '동적타입(dynamically typed)' 의 언어라고 하며 다른 말로 느슨한 타입(loosely typed)의 동적(dynamic) 언어라고도 한다.

느슨한 타입이 뭘까?

느슨한 타입은 타입 없이 변수를 선언하는 것이다. 반면에 Java와 같은 강력한 타입(strong typing)을 사용하는 언어는 타입과 함께 변수를 선언해야만 한다

느슨한 타입의 언어는 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 유연성이 높고, 컴파일 시 타입을 명시해 주지 않아도 되기 때문에 빠르게 코드를 작성할 수 있다는 장점이 있지만.


if ("" == 0) {
  // 참입니다! 근데 왜죠??
}
  // 동일 연산자는 (==) 인수를 강제로 변환하여(coerces), 예기치 않은 동작을 유발

if (1 < x < 3) {
  // *어떤* x 값이던 참입니다!
}

const obj = { width: 10, height: 15 };
// 왜 이게 NaN이죠? 철자가 어렵네요!
const area = obj.width * obj.heigth;  // 오타가 있기 때문!

// 오타가 있어서 존재하지 않는 요소에 대한 접근이 됬지만
// 일단 허용하고 연산을 한다.

실행 도중 변수에 예상치 못한 타입이 들어와 타입에러가 발생 할 수 있고, 런타임 시 코드실행 결과를 확인 할 수 있기 때문에 코드가 길고 복잡해질 경우 타입에러를 찾기가 어려워 진다는 단점이 있다.

이를 보완하기 위해 나온 언어가 바로 Typescript 이다.
타입스크립트 공식문서

자바스크립트 자료형

숫자형(number type)

숫자형(number type)은 정수 및 부동소수점 숫자(floating point number) 를 나타낸다. +덧셈 , -뺄셈 , *곱셈 , /나눗셈, %나머지연산 등 으로 연산이 가능하다.

숫자형엔 일반적인 숫자 외에도 Infinity, -Infinity, NaN 같은 '특수 숫자 값(special numeric value)'이 포함된다.

Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대(∞)를 나타냅니다. 어느 숫자든 0으로 나누면 무한대를 얻을 수 있습니다.

alert( 1 / 0 ); // 무한대
alert( Infinity ); // 무한대

NaN 은 계산중에 에러가 발생했다는 것을 나타내주는 값이다. 부정확하거나 정의되지 않은 연산을 사용하면 에러가 발생하는데. 이때 NaN이 반환된다.

alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.

연산 과정 어디에선가 NaN이 반환되었다면, 이는 모든 결과에 영향을 미친다.

<참고 Bigint는 뭘까?, 여기도 참고>

문자형(string)

자바스크립트에선 문자열(string)을 따옴표로 묶는다.

let str = "Hello";	// 큰따옴표
let str2 = 'Single quotes are ok too';  // 작은따옴표

// 백틱 으로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 
// 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있다.
let phrase = `can embed another ${str}`; // 백틱

불린형(논리타입)

불린형(논리 타입)은 true와 false 두 가지 값만 있다.
<참고 논리연산자>

let isGreater = 4 > 1;
alert( isGreater ); // true

'null'값

null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값이며, 오로지 null 값만 포함하는 별도의 자료형을 만든다.

let age = null;

‘undefined’ 값

undefined 값도 null 값처럼 자신만의 자료형을 형성한다. undefined는 '값이 할당되지 않은 상태’를 나타낸다.

let age;
alert(age); // 'undefined'가 출력.

객체와 심볼

객체(object)형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부릅니다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다. 객체 더 알아보기

심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다. 심볼 더 알아보기

typeof 연산자

typeof 연산자는 인수의 자료형을 반환한다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.

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

추가 설명

Math는 수학 연산을 제공하는 내장 객체이므로 "object"가 출력됩니다. Math에 대해선 숫자형 챕터에서 학습하도록 하겠습니다. 내장 객체는 객체형이라는 것을 알려주기 위해 이런 예시를 작성해 보았습니다.
typeof null의 결과는 "object"입니다. null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황입니다. 언어 자체의 오류이므로 null이 객체가 아님에 유의하시기 바랍니다.
typeof는 피연산자가 함수면 "function"을 반환합니다. 그러므로 typeof alert는 "function"을 출력해줍니다. 그런데 '함수’형은 따로 없습니다. 함수는 객체형에 속합니다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태입니다. 한편, 실무에선 이런 특징이 매우 유용하게 사용되기도 합니다.