JavaScript의 데이터 유형 이해하기

튜토리얼
JavaScript

소개

데이터 유형은 프로그래밍 언어에서 특정 유형의 데이터를 분류하는 데 사용됩니다. 예를 들어, 숫자와 문자열은 JavaScript에서 다르게 처리되는 데이터 유형입니다.

이것은 사용하는 특정 데이터 유형이 해당 값에 할당할 수 있는 값을 결정하고 할 수 있는 작업을 결정한다는 것입니다. 이것은 말하자면, JavaScript에서 변수와의 작업을 수행하기 위해서는 주어진 변수의 데이터 유형을 이해하는 것이 중요합니다.

이 튜토리얼에서는 JavaScript에서 데이터 유형이 어떻게 작동하는지와 언어의 중요한 데이터 유형을 살펴볼 것입니다. 이것은 데이터 유형에 대한 철저한 조사는 아니지만 JavaScript에서 사용 가능한 옵션에 익숙해지도록 도와줄 것입니다.

동적 타이핑

JavaScript는 동적 데이터 유형을 가지고 있으며, 타입 확인이 컴파일 시간이 아닌 런타임에 수행됩니다. 파이썬의 데이터 유형도 동적으로 유형이 지정됩니다.

동적으로 유형이 지정된 언어에서는 동일한 이름의 변수가 다른 데이터 유형을 보유하는 데 사용될 수 있습니다.

예를 들어, 변수 t는 let 키워드에 의해 변수로 정의되며 (주어진 변수를 범위 내에서 유지하는 let을 참고하세요), 다른 데이터 유형을 보유하도록 할당될 수 있거나 초기화되어 정의되지 않은 상태로 남겨질 수 있습니다:

let t = 16;			// t는 숫자입니다
let t = "Teresa";	// t는 문자열입니다
let t = true;		// t는 부울입니다
let t;				// t는 정의되지 않았습니다

위의 각 변수 t는 JavaScript에서 사용 가능한 모든 데이터 유형으로 설정될 수 있으며, 사용하기 전에 데이터 유형을 명시적으로 선언할 필요가 없습니다.

숫자

JavaScript에는 하나의 숫자 유형만 있으며, 정수와 부동 소수점 숫자에 대한 별도의 지정이 없습니다. 따라서 숫자는 소수점과 함께 또는 소수점 없이 JavaScript에서 작성할 수 있습니다:

let num1 = 93;
let num2 = 93.00;

위의 두 경우 모두 데이터 유형은 숫자이며, 숫자에 소수점이 있는지 여부에 관계없이 동일합니다.

과학적 지수 표기법은 매우 큰 수나 작은 수를 간단히 표현하기 위해 JavaScript에서 사용될 수 있습니다. 다음 예제에서 볼 수 있습니다:

let num3 = 987e8;		// 98700000000
let num4 = 987e-8;		// 0.00000987

JavaScript의 숫자는 15 자리까지 정확합니다. 따라서 16 자리 이후에는 반올림됩니다:

let num5 = 999999999999999;		// 999999999999999로 유지됩니다.
let num6 = 9999999999999999;	// 10000000000000000으로 반올림됩니다.

JavaScript 숫자 유형은 숫자를 표시하는 데 더하여 세 가지의 상징적인 값도 사용할 수 있습니다:

  • Infinity — 무한대에 접근하는 양수를 나타내는 숫자 값positive
  • -Infinity— 무한대에 접근하는 음수를 나타내는 숫자 값negative
  • NaN — 숫자가 아닌 것을 나타내는 숫자 값, 즉 숫자가 아닌 것을 나타냄nan

Infinity 또는 -Infinity는 JavaScript에서 사용 가능한 최대 숫자를 넘어서는 숫자를 계산할 때 반환됩니다. 또한 0으로 나눌 때 정의되지 않은 값으로도 발생합니다:

let num7 = 5 / 0;	// Infinity를 반환합니다
let num8 = -5 / 0;	// -Infinity를 반환합니다

기술적 용어로는 숫자가 JavaScript의 상한을 나타내는 1.797693134862315E+308를 초과할 때 Infinity가 표시됩니다.

마찬가지로 -Infinity는 숫자가 -1.797693134862316E+308의 하한을 초과할 때 표시됩니다.

Infinity 숫자는 루프에서도 사용할 수 있습니다:

while (num9 != Infinity) { 
	// 여기에있는 코드는 num9 = 무한대까지 실행됩니다
}

유효하지 않은 숫자에 대해서는 NaN이 표시됩니다. 숫자와 비 숫자 값을 사용하여 수학 연산을 수행하려고하면 NaN이 반환됩니다. 다음 예제에서도 그렇습니다:

let x = 20 / "Shark";	// x는 NaN이 됩니다

숫자 20을 문자열 "Shark"로 나눌 수 없기 때문에 숫자로 평가할 수 없으므로 x 변수의 반환 값은 NaN입니다.

그러나 문자열이 숫자 값으로 평가될 수있는 경우 JavaScript에서 수학 표현식을 수행 할 수 있습니다:

let y = 20 / "5";	// y는 4가 됩니다

위의 예에서 문자열 "5"는 JavaScript에서 숫자 값으로 평가 될 수 있으므로 숫자 데이터 유형으로 처리되며 나눗셈에 대한 수학 연산자 /와 작동합니다.

연산 중 사용되는 변수에 값을 NaN으로 할당하면 다른 피연산자가 유효한 숫자 인 경우에도 NaN값이 결과로 나타납니다:

let a = NaN;
let b = 37;
let c = a + b; 	// c는 NaN이 됩니다

JavaScript에는 하나의 숫자 데이터 유형 만 있습니다. 숫자를 다룰 때 입력하는 모든 숫자는 숫자 데이터 유형으로 해석됩니다. JavaScript가 동적으로 유형이 지정되기 때문에 입력하는 데이터 유형을 선언할 필요가 없습니다.

문자열

A string is a sequence of one or more characters (letters, numbers, symbols). Strings are useful in that they represent textual data.

자바스크립트에서 문자열은 단일 인용부호 ' 또는 이중 인용부호 "로 묶여 있으므로 문자열을 만들려면 인용부호 안에 문자 시퀀스를 넣으십시오:

let singleQuotes = 'This is a string in single quotes.';

let doubleQuotes = "This is a string in double quotes.";

단일 인용부호 또는 이중 인용부호 중 어느 것을 사용할지 선택할 수 있지만 프로그램 내에서 일관성을 유지해야 합니다.

프로그램 “Hello, World!”는 문자열을 컴퓨터 프로그래밍에서 어떻게 사용하는지를 보여줍니다. 아래의 alert() 안의 구문을 구성하는 문자들은 문자열입니다.

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

코드를 실행하고 Click me 버튼을 클릭하면 다음 출력이 포함된 팝업을 받게됩니다:

Output
Hello, World!

다른 데이터 유형과 마찬가지로 문자열을 변수에 저장할 수 있습니다:

let hw = "Hello, World!";

변수를 호출하여 alert()에서 문자열을 표시할 수 있습니다:

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

Output
Hello, World!

원하는 결과를 얻기 위해 프로그램 내에서 문자열을 조작하기 위해 수행할 수 있는 많은 작업이 있습니다. 문자열은 정보를 사용자에게 전달하고 사용자가 프로그램에 정보를 다시 전달하는 데 중요합니다.

불리언

부울 데이터 유형은 true 또는 false 중 하나일 수 있습니다. 부울은 컴퓨터 과학의 알고리즘에 영향을 미치는 수학 논리 분기와 관련된 진실 값을 나타내기 위해 사용됩니다.

수학의 많은 연산은 참 또는 거짓으로 평가되는 답변을 제공합니다:

  • 보다 큼
    • 500 > 100 true
    • 1 > 5 false
  • 보다 작음
    • 200 < 400 true
    • 4 < 2 false
  • 동일
    • 5 = 5 true
    • 500 = 400 false

다른 데이터 유형과 마찬가지로 부울 값을 변수에 저장할 수 있습니다:

let myBool = 5 > 8;	// false

8보다 5가 크지 않으므로 변수 myBool은 false의 값을 가집니다.

JavaScript에서 더 많은 프로그램을 작성함에 따라 부울이 작동하는 방식과 참 또는 거짓으로 평가되는 다양한 함수와 연산이 프로그램의 진행을 어떻게 변경할 수 있는지에 대해 더 익숙해질 것입니다.

배열

배열은 하나의 변수 내에서 여러 값을 보유할 수 있습니다. 이는 배열 내의 값 목록을 포함하고 그것들을 반복할 수 있다는 것을 의미합니다.

배열 내부에 있는 각 항목 또는 값은 요소라고 합니다. 인덱스 번호를 사용하여 배열의 요소를 참조할 수 있습니다.

문자열이 따옴표 사이의 문자로 정의되는 것처럼, 배열은 대괄호 [ ] 사이에 값이 있는 것으로 정의됩니다.

예를 들어 문자열 배열은 다음과 같이 보입니다:

let fish = ["shark", "cuttlefish", "clownfish", "eel"];

변수를 fish라고 호출하면 다음 출력을 받게 됩니다:

["shark", "cuttlefish", "clownfish", "eel"]

배열은 매우 유연한 데이터 유형입니다. 왜냐하면 요소 값이 추가, 제거 및 변경될 수 있기 때문입니다.

객체

JavaScript 객체 데이터 유형은 이름:값 쌍으로 많은 값을 포함할 수 있습니다. 이러한 쌍들은 데이터를 저장하고 액세스하는 유용한 방법을 제공합니다. 객체 리터럴 구문은 콜론으로 구분된 이름:값 쌍들로 이루어져 있으며 양쪽에 중괄호 { }가 있습니다.

일반적으로 관련된 데이터를 보유하기 위해 사용되며, 각 속성 사이에 공백이 있는 JavaScript 객체 리터럴은 다음과 같습니다:

let sammy = {firstName:"Sammy", lastName:"Shark", color:"blue", location:"ocean"};

대신에 특히 이름:값 쌍이 많은 객체 리터럴의 경우, 우리는 이 데이터 유형을 여러 줄에 걸쳐 쓸 수 있습니다. 각 콜론 뒤에 공백을 두면 됩니다:

let sammy = {
    firstName: "Sammy",
    lastName: "Shark",
    color: "blue",
    location: "Ocean"
};

위의 예제의 각각에서 객체 변수 sammy는 firstName, lastName, color, 그리고 location이라는 4개의 속성을 갖습니다. 이들은 각각 콜론으로 구분된 값들이 전달됩니다.

여러 데이터 유형으로 작업하기

생성하는 각 프로그램은 여러 데이터 유형을 포함하게 될 것입니다. 그러나 일반적으로 동일한 데이터 유형 내에서 작업을 수행할 것입니다. 즉, 숫자에 대해 수학을 수행하거나 문자열을 자릅니다.

숫자나 문자열을 연결할 수 있는 + 연산자와 같은 데이터 유형 간 작동하는 연산자를 사용할 때 예상치 못한 결과가 발생할 수 있습니다.

예를 들어, 숫자와 문자열을 함께 사용하여 + 연산자를 사용할 때, 숫자는 문자열로 처리됩니다(따라서 이들은 연결됩니다). 그러나 데이터 유형의 순서가 연결에 영향을 미칩니다.

그래서, 다음 연결을 수행하는 변수를 만든 경우, JavaScript는 아래 요소를 각각 문자열로 해석할 것입니다:

let o = "Ocean" + 5 + 3;

만약 o 변수를 호출하면 다음과 같은 값이 반환됩니다:

Output
Ocean53

그러나 숫자로 시작하는 경우, 프로그램 실행 시점이 "Ocean"에 도달할 때 두 숫자가 더해진 후에 문자열로 해석됩니다. 따라서 반환된 값은 두 숫자의 합이 문자열과 연결된 것입니다.

let p = 5 + 3 + "Ocean";

Output
8Ocean

이러한 예기치 않은 결과 때문에 데이터 유형을 건너뛰는 대신 하나의 데이터 유형 내에서 작업과 메서드를 수행할 가능성이 높습니다. 그러나 JavaScript는 다른 프로그래밍 언어와 달리 데이터 유형을 혼합할 때 오류를 반환하지 않습니다.

결론

이 시점에서 JavaScript에서 사용할 수 있는 주요 데이터 유형 중 일부에 대해 더 잘 이해하게 될 것입니다.

이러한 각 데이터 유형은 JavaScript 언어로 프로그래밍 프로젝트를 개발할 때 중요해질 것입니다.

Source:
https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript