[JS] 모던 자바스크립트 Deep Dive 6장

신지·2024년 4월 14일
post-thumbnail

* 모던 자바스크립트 Deep Dive을 토대로 공부한 것을 정리한 내용으로, 모든 인용문은 모던 자바스크립트 Deep Dive의 문구를 인용한 것입니다.

6장. 데이터 타입

데이터 타입은 값의 종류를 말한다. 자바스크립트는 7개의 데이터 타입을 제공한다.

구분데이터 타입설명
원시 타입숫자 타입숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
원시 타입문자열 타입문자열
원시 타입불리언 타입논리적 참과 거짓
원시 타입undifined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값
원시 타입null 타입값이 없다는 것을 의도적으로 명시할 때 사용되는 값
원시 타입심벌 타입ES6에서 추가된 7번째 타입
객체 타입객체, 함수, 배열 등

데이터 타입을 하나하나 소개하는 것은 너무 오래걸릴 것 같아서... 잘 정리된 문서를 첨부한다.
mdn 데이터 타입


데이터 타입의 필요성

var score = 100;

위와 같은 코드가 실행되면 컴퓨터는 100을 저장하기 위한 메모리 공간을 확보하고, 확보된 메모리에 숫자 100을 2진수로 저장한다.

값을 참조하는 경우에도 메모리 공간의 주소를 찾아가야 한다. 값을 참조하려면 한 번에 읽어 들여야 할 메모리 공간의 크기를 알아야 한다. 위의 예제로 설명하면 변수에는 숫자 타입의 값이 할당되어 있으므로 8바이트 단위로 메모리 공간에 저장된 값을 읽어들인다.

데이터 타입을 참고하여 2진수를 읽어들였다고 쳤을 때, 2진수를 해석하는 과정에서도 데이터 타입이 중요하다. 예를 들어 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만 문자열로 해석하면 A이다.

요약하자면

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

동적 타이핑

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

C나 Java같은 정적 타입 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 한다.

char d;
int num;

위처럼 정적 타입 언어는 변수의 타입을 변경할 수 없으며, d에는 1바이트 정수 타입의 값, num에는 4바이트 정수 타입의 값만 할당 가능하다.

그러나 자바스크립트 언어는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선안하지 않는다.

// typeof 연산지는 연산자 뒤에 위차한 피연산자의 데이터 타입을 문자열로 반환한다. 

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

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

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

위와 같이 먼저 타입을 명시하지 않아 foo에 여러가지 타입의 값을 할당할 수 있는 것을 볼 수 있다.

동적 타입 언어와 변수

자바스크립트는 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. (숫자 타입의 변수일 것이라고 예측했지만 문자열 타입의 변수인 경우 등)

따라서 변수를 사용할 때 주의점은 다음과 같다.

  • 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다.
    동적 타입 언어인 자바스크립트는 타입을 잘못 예측해 오류가 발생할 확률이 높으므로, 변수의 무분별한 남발은 금물이다.
  • 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제한다.
    변수의 유효 범위가 넓을수록 변수로 인해 오류가 발생할 확률이 높아진다.
  • 전역 변수는 최대한 사용하지 않도록 한다.
    어디서든지 참조/변경 가능한 전역변수는 의도치 않게 값이 변경될 가능성이 높고, 다른 코드에 영향을 줄 가능성도 높다.
  • 변수보다는 상수를 사용해 값의 변경을 억제한다.
  • 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다.
    변수 이름뿐 아니라 모든 식별자는 존재 이유를 파악할 수 있는 적절한 이름으로 지어야 한다.

리뷰

몰랐던 부분과 더 공부해보고 싶은 부분

예제를 공부하며 보면서 foo=3;의 타입이 number이라는 점이 조금 신기했다. 당연히 int일 줄 알았는데... 기초적인 부분 같은데 앞으로 이런 점을 놓치지 않게 공부해야겠다. 생각해보니 동적 타입 언어라서 굳이 int나 float 등을 구분하지 않아도 될 것 같다...싶다가도 메모리 크기 방면에서 너무 손해가 아닌가?? 싶은 부분도 있다. 이 부분에 대해서 잘 모르겠어서 혹시 비슷한 고민을 하는 분이 있으면 이야기 나눠보고 싶다!

그리고 동적 타입 언어와 변수 부분을 읽으며 정적 타입 언어와 동적 타입 언어의 장단점을 많이 고민하고자 했다.

공부하면서 든 생각

공부하다보니 아티클은 몰랐던 부분과 더 공부해보고 싶은 부분에 대해서 작성하는 것인데 내가 너무 모든 내용을 담으려고 했나 싶어 6장만 간단하게 작성하고 9장으로 넘어가려고 한다. 7장과 8장을 작성해야 하나 하는 고민을 많이 했는데, 혹시 모르니 일단 비공개로 틀만 잡아둬야겠다... 아직 이론적인 부분이 부족해서 그런지 어느 부분을 위주로 공부해야 할지에 많은 고민을 하는 것 같다!! 이렇게 초반 부분의 이론은 학교에서도 배우지만 항상 내가 알고 있다고 생각해서 흘려듣는 것 같다. 이번 기회에 반성하고 책도 자세히 읽으면서 공부했다,,, 🥲 그리고 평소에 변수 이름 고민하는데 시간을 많이 쏟지 않는 편인데... 변수 이름 짓는 부분에 대해서도 많이 고민해야겠다.

4개의 댓글

comment-user-thumbnail
2024년 4월 15일

foo=3;의 타입이 number이라는 점에 대해서 타입이 int가 나올줄 알았다고 말씀하신 부분에 대해 저도 궁금해서 찾아보니,
자바스크립트에서 숫자를 다룰 때 기본적으로 number라는 데이터 타입을 사용하고,
또한 이 number 타입은 정수(int)와 부동 소수점 수(floats)를 모두 포함한다고 합니다!
따라서 자바스크립트에서는 숫자를 다룰 때 별도의 정수형 타입을 명시적으로 사용하지 않고, number 타입으로 처리한다고 하네요!

1개의 답글
comment-user-thumbnail
2024년 4월 15일

리뷰 부분이 너무 유익했어요..! 이번 범위에서 신지님이 가진 의문을 통해 저도 한번 더 생각해 볼 수 있었던 것 같습니다..! 추가적으로 리뷰-몰랐던 부분 '메모리 ~방면에서 ' 여기는 추가적인 설명 부탁드려도 될까요? 정수와 부동 소수점 수~에 따라 메모리 크기가 달라지나요..?

1개의 답글