<번역> JavaScript 의 데이터 타입 이해하기

keonhee Lee·2022년 6월 28일
0

소개

데이터 타입은 프로그래밍 언어에서 하나의 특정한(특별한) 타입을 정의하기 쓰였습니다.

예를 들면, 자바스크립트에서 Number 와 String 은 다르게 다루어질 것입니다.

이러한 작업은 특정한 데이터 유형에 따라 할당할 수 있는 값과 할 수 있는 작업이 결정되기 때문에 중요합니다. 즉, JavaScript 변수를 이용한 작업을 하기 위해서 주어진 변수에 대한 이해를 하는것이 중요합니다.

아래의 튜토리얼에서 JavaScript 에서 데이터 타입들이 어떻게 작동하는지와 언어의 중요한 데이터 타입에 대해 살펴볼 것 입니다.

이 튜토리얼은 데이터 타입에 대한 심층적인 조사 (exhaustive investigation) 는 아니지만, JavaScript 내의 데이터 타입들과 친숙해 질 수 있는 계기가 될 것 입니다.


Dynamic typing

자바스크립트는 type checking 의 과정이 컴파일타임에 이루어지지 않고 런타임에 이루어 지기 때문에 동적인 데이터 타입을 가지고 있다고 말할 수 있습니다.

다이나믹하게 타입된 언어들은 같은 이름의 변수들이 다른 데이터 타입을 가지고있을수 있습니다. 예를 들면, 아래에 다른 데이터 타입들을 할당 받을 수도 있고, undefinedinitialized 될수도 있는수도 있는 var 으로 선언된 변수 t 가 있습니다 :

var t = 16 ; // t is a typeof 'number'
var t = 'Leezer' ; // t is a typeof 'string'
var t = true ; // t is a typeof 'boolean'
var t ; // t is a typeof 'undefined'

위에 선언된 변수 t 는 자바스크립트내에서 사용 가능한 모든 데이터 타입으로 할당될 수 있습니다.

Numbers

자바스크립트는 하나만의 number 타입을 가지는데 따로 정수와 floating point number 분리해서 명칭하지 않고, 이러한 이유로 자바스크립트 에서 숫자들은 소숫점 아래의 숫자를 있이도 혹은 없이도 표현이 가능합니다.

var number1 = 93;
var number2 = 93.00;

위의 두 가지 경우에서 알 수 있듯이 두 변수의 데이터 타입은 소수점이 있냐 없냐에 상관없이 모두 number 입니다.

Scientific exponential notation 이 자바스크립트에서 너무 큰 수 혹은 작은 수 ( 1 이하의 소수 ) 를 축약하기 위해 사용될 수 있습니다.

var number3 = 987e8; // 98700000000
var number4 = 987e-8; // 0.00000987

자바스크립트 에서의 숫자는 15자릿수 까지만 정확하다고 고려되고, 이 수는 은 16자릿수에 도달하게 되면 반올림이 됩니다.

var number5 = 999999999999999 // remains as 999999999999999
var number6 = 9999999999999999 // rounded up to 10000000000000000

숫자를 나타내기 위해서 자바스크립트의 Number 타입에서는 또한 세가지 symbolic value 들이 유효합니다.

Infinity : 양의 무한대수와 가까운 숫자를 나타낸다.
-Infinity : 음의 무한대수와 가까운 숫자를 나태낸다.
NaN ( Not a Number) : 숫자가 아닌것을 나타내는데 쓰인다. ( still type 은 number 이다.)

Infinity 혹은 -Infinity 는 ‘undefined’ 값을 0 으로 나누려고 할 때나, 자바스크립트에서 유효한 최대의 수 범위 밖에 있는 수를 계산하려고 할때 리턴 된다.

var num7 = 5 / 0  // return Infinity
var num8 = -5 / 0 // return -Infinity

기술적으로는 수가 1.797693134862315E+308 를 초과한다면 Infinity 가 display 될 것이다.

비슷하게, -Infinity 는 1.797693134862316E+308 미만일때 나타날 것이다.

Infinity는 반복문 안에서도 쓰일수 있는데,

while(num9 !== Infinity) {
	// Code here will execute through num9 = Infinity
}

유효하지 않은 숫자들은 NaN 이 리턴되고, 만약 정상적인 수 값과 수가 아닌 값을 수학적으로 계산하려 한다면 이 경우에도 NaN 이 리턴 될 것입니다 :

var x = 20 / 'Shark' ; 
	// 숫자 20 은 문자열 'Shark'로 나누어질 수 없기 때문에 이 경우에 x 는 NaN 의 값을 갖게 된다.

하지만, 만약에 문자열이 숫자와 같이 평가될수 있다면 아래와 같이 JavaScript 에서도 문자열에 대한 수학적 계산이 가능할 수 있다. ex) 숫자값을 ‘’ , “” 안에 씌운경우 :

var y = 20 / '5'
	// '5' 는 문자열이지만 자바스크립트에서 숫자처럼 평가 받을 수 있기 때문에 나눗셈이 가능해진다.

선언된 값에 NaN 을 할당시켜준후, 그 값을 유효한 숫자와 연산한다고 해도 결괏값은 NaN 을 출력 합니다 :

var a = NaN;
var b = 37;
var c = a + b; // return NaN

자바스크립트는 동적으로 쓰여진 언어이고, 한가지의 숫자형 데이터 타입을 가지기 때문에, 유효한 수로 작업한다는 가정하에 따로 타입을 명시해주는 작업이 필요 없습니다.


Strings

문자열이란 하나 혹은 여러개의 characters ( letters, numbers, symbols ) 의 연속입니다.

문자열은 텍스트 데이터를 나타낸다는 점에서 유용합니다.

JavaScript에서 문자열은 ‘ (single quote) 또는 “ (double quote) 안에 존재하기 때문에 문자열을 만들기 위해서는 일련의 문자들을 묶어주면 됩니다 :

var singleQuotes = 'This is a string in single quote.';

var doubleQuotes = "This is a string in douvle quote.";

single quotes 또는 double quotes 를 문자열을 나타내기 위해 사용할 수 있지만, 프로그램 내 에서는 일관성을 유지해야 합니다.

아래에서, “Hello, World!” 는 어떻게 문자열이 computer programming 에서 사용되어지는 지를 보여준다. alert( ) 함수 내에서 Hello, World! 가 문자열로 구성되어져 있습니다 :

hello.html

<!DOCTYPE HTML>
<html>
<head>
<script>
	function helloFuntion() {
		alert("Hello, world!");
	}
</script>
</head>
<body>
	<p>
		<button onclick="helloFunction()">Click me</button>
	</p>
</body>
</html>

코드를 실행시키고 Click me 버튼을 누르면, 팝업창과 함께 Hello, World! 라는 문자열이 보여질 것 입니다 :

Output

Hello, World!

다른 데이터 타입들 과 같이, 문자열 또한 변수에 저장이 가능합니다 :

var hw = "Hello, world!";

“Hello, world!” 라는 raw 한 문자열 대신 alert() 함수에 선언된 변수 hw 를 불러줌으로써 같은 결과값을 얻을수 있습니다 :

<script>
	var hw = "Hello, World!";
  
	function helloFunction() {
    	alert(hw);
	}
</script>
...

Output

Hello, World!

문자열을 다룰 수 있는 여러가지 방법이 있는데 우리가 원하는 결과를 얻기 위해서는 문자열은 사용자에게 정보를 전달하고 사용자가 프로그램에 다시 정보를 전달하기 위해서 중요합니다.


Booleans

불린(불리언) 데이터 타입은 truefalse 두가지 값으로 나뉠 수 있다. 불린 타입은 컴퓨터 사이언스 알고리즘에을 알려주는 수학적 논리 부분과 연관된 truth 겂 울 나타내기 위해 사용 된다.

Boolean 데이터 타입은 대문자 B 로 시작되는데 이는 수학자 George Boole 이 이름에서 유래 되었습니다.

대부분의 수학적 연산들은 true 혹은 false 로 값을 평가하는 답을 내놓곤 합니다 :

- greater than
	500 > 100 // return true
	1 > 5 // return false

- less than
	200 < 400 // return true
	4 < 2 // return false

- equal
	5 === 5  // return true
	500 === 400 // return true
	400 === '400' // return false
	400 === '400' // return true

다른 데이터 타입들과 같이 Boolean 데이터 타입 또한 변수에 저장이 가능 합니다.

var myBool = 5 > 8; // return false

숫자 5 는 8 보다 크지 않기 때문에, myBool 로 선언된 변수는 false 값을 가지게 된다.

JavaScript 로 더 많은 프로그램을 작성할수록 Boolean 데이터 타입이 어떻게 작동하는지, 그리고 true 와 false 로 평가되는 함수의 연산이 프로그램을 어떻게 작동되는지 익숙해 지게 될 것 입니다.


Arrays

배열은 여러개의 값을 하나의 변수에 가질수 있게 해주는데, 이 뜻은 배열 안에 여러 목록(list)의 값을 가진 배열을 반복문을 통해서 iterate 할수 있다는 말 과도 같다.

배열 안의 각 아이템 혹은 값들은 요소(element) 라고 불리는데, index 번호를 통해서 배열의 요소들을 참조할수 있다.

문자열이 ‘’ ( single quotes ) 나 “” ( double quotes ) 안에 정의되어 있는 것 처럼, 배열은 [ ] (square bracket) 안에 요소들을 갖는것으로 정의된다.

배열 안의 문자열들은 아래와 같이 나타낼 수 있습니다 :

var fish = ['shark', 'cuttleFish', 'clownFish', 'eel'];

fish 로 선언된 변수를 호출 하면 아래의 결과를 갖게 됩니다 :

Output

['shark', 'cuttleFish', 'clownFish', 'eel'];

배열은 배열 내의 요소들을 add , remove, change 하기 때문에 mutable 하고, 이는 매우 유연한 데이터 타입이라고 할 수 있다.


Objects

JavaScript 의 Object(객체) 는 Key : Value 의 값으로 이루어진 요소들을 가질수 있는데, Curly braces { } 안에 이 콜론 ( : ) 으로 나누어진 키 : 밸류 쌍으로 이루어진 값들은 다양한 방법으로 데이터를 저장하고, 접근 할 수있게 한다.

일반적으로 객체는 관련된 데이터를 저장하는데 유용한데, 예로는, ID값을 가지고 있는 정보를 저장한다.

const sammy = { firstName : 'Keonhee' , lastName : 'Lee' , age : 27 , location : 'Seoul' };

대체로, 객체가 다수의 { key : value } 값을 가지는 요소들을 가지고 있다면 multiple lines 로 표현이 가능하다.

const person = { 
			firstName : 'Keonhee', 
			lastName : 'Lee',
			age : 27,
			location : 'Seoul' 
};

위의 person 객체 는 4가지의 프로퍼티 : firstName, lastName, age, location를 가지고 있는데, 쉼표( , )로 구분되어 집니다.


참조 : https://shobhitsingh29.medium.com/understanding-js-data-types-1ac8977ac8ae

0개의 댓글