분류 javascript

JavaScript에서 데이터 유형 이해 - JavaScript guide

컨텐츠 정보

  • 조회 174 (작성일 )

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 데이터 유형 이해 


소개 


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


사용하는 특정 데이터 유형에 따라 할당 할 수 있는 값과 수행 할 수 있는 작업이 결정되므로 중요합니다. 즉, JavaScript에서 변수를 사용하여 작업을 수행하려면 주어진 변수의 데이터 형식을 이해하는 것이 중요합니다.


이 학습서에서는 데이터 유형이 JavaScript에서 작동하는 방식과 언어 고유의 중요한 데이터 유형에 대해 설명합니다. 이는 데이터 유형에 대한 철저한 조사는 아니지만 JavaScript에서 사용할 수 있는 옵션에 익숙해지는 데 도움이 됩니다.


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


동적 유형 


JavaScript에는 동적 데이터 유형이 있습니다. 즉, 유형 검사가 컴파일 타임이 아닌 런타임에 수행됩니다. 파이썬의 데이터 유형도 동적으로 입력됩니다.


동적으로 유형이 지정된 언어의 경우 동일한 이름의 변수를 사용하여 다른 데이터 유형을 보유 할 수 있습니다.


예를 들어, let 키워드에 의해 변수로 정의 된 변수 t (주어진 변수를 범위 내에서 제한적으로 유지하도록 함)는 다른 데이터 유형을 보유하도록 지정되거나 초기화 될 수 있지만 정의되지 않은 상태로 둘 수 있습니다.


let t = 16;         // t is a number
let t = "Teresa";   // t is a string
let t = true;       // t is a Boolean
let t;              // t is undefined

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


Numbers 


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;     // remains as 999999999999999
let num6 = 9999999999999999;    // rounded up to 10000000000000000

JavaScript 숫자 유형에는 숫자를 나타내는 것 외에도 세 가지 기호 값이 있습니다.

  • Infinity — 무한대에 접근하는 양수를 나타내는 숫자 값
  • -Infinity— 무한대에 접근하는 음수를 나타내는 숫자 값
  • NaN — 숫자가 아닌 숫자를 나타내는 숫자 값

JavaScript에서 사용 가능한 최대 숫자 이외의 숫자를 계산하면 무한대 또는-무한대가 반환 됩니다. 0으로 나눌 때 정의되지 않은 값의 경우에도 발생합니다.


let num7 = 5 / 0;   // will return Infinity
let num8 = -5 / 0;  // will return -Infinity

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


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


무한대 숫자는 루프에서도 사용할 수 있습니다.


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

유효한 숫자가 아닌 숫자의 경우 NaN이 표시됩니다. 숫자와 숫자가 아닌 값에서 수학 연산을 수행하려고 하면 NaN이 반환됩니다. 다음 예의 경우입니다.


let x = 20 / "Shark";   // x will be NaN

숫자 20은 숫자로 평가 될 수 없으므로 문자열 "Shark"로 나눌 수 없으므로 x 변수에 대해 리턴되는 값은 NaN입니다.


그러나 문자열을 숫자 값으로 평가할 수 있으면 수학 표현식을 JavaScript로 수행 할 수 있습니다.


let y = 20 / "5";   // y will be 4

위의 예에서 문자열 "5"는 JavaScript에서 숫자 값으로 평가 될 수 있으므로 그대로 처리되며 나누기 /에 대한 수학 연산자와 함께 작동합니다. 


연산에 사용 된 변수에 NaN 값을 할당하면 다른 피연산자가 유효한 숫자 인 경우에도 NaN 값이 생성됩니다.


let a = NaN;
let b = 37;
let c = a + b;  // c will be NaN

JavaScript에는 하나의 숫자 데이터 형식 만 있습니다. 숫자로 작업 할 때 입력 한 숫자는 숫자의 데이터 유형으로 해석됩니다. JavaScript는 동적으로 입력되므로 입력하는 데이터 유형을 선언 할 필요가 없습니다.


Strings 


문자열은 하나 이상의 문자 (문자, 숫자, 기호)의 시퀀스입니다. 문자열은 텍스트 데이터를 나타내는 점에서 유용합니다.


JavaScript에서 문자열은 작은 따옴표 '또는 큰 따옴표 "안에 있으므로 문자열을 만들려면 일련의 문자를 따옴표로 묶습니다.


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

작은 따옴표 나 큰 따옴표 중 하나를 사용하도록 선택할 수 있지만 결정한 것은 프로그램 내에서 일관성을 유지해야 합니다.


“Hello, World!”프로그램은 컴퓨터 프로그래밍에서 문자열이 Hello, World! 문구를 구성하는 문자로 사용되는 방법을 보여줍니다. 아래 alert ()에 문자열이 있습니다.


<!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()에 문자열을 표시하십시오.


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

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


Booleans 


부울 데이터 유형은 true 또는 false의 두 값 중 하나 일 수 있습니다. 부울은 수학의 논리 분기와 관련된 진리 값을 나타내는 데 사용되며 컴퓨터 과학의 알고리즘에 알립니다.


데이터 유형이 부울 인 경우 수학자 George Boole의 이름을 갖기 때문에 대문자 B로 시작합니다.


수학의 많은 연산은 true 또는 false로 평가되는 답변을 제공합니다.


  • greater than
    • 500 > 100 true
    • 1 > 5 false
  • less than
    • 200 < 400 true
    • 4 < 2 false
  • equal
    • 5 = 5 true
    • 500 = 400 false

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


let myBool = 5 > 8; // false

5는 8보다 크지 않으므로 변수 myBool의 값은 false입니다.


JavaScript로 더 많은 프로그램을 작성할수록 부울이 작동하는 방식과 true 또는 false로 평가되는 다양한 함수 및 작업이 프로그램 과정을 변경하는 방법에 더 익숙해집니다.


Arrays 


배열은 단일 변수 내에 여러 값을 보유 할 수 있습니다. 즉, 배열 내에 값 목록을 포함하고 값을 반복 할 수 있습니다.


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


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


예를 들어 문자열 배열은 다음과 같습니다.


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

가변 물고기를 호출하면 다음과 같은 결과가 나타납니다.


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

배열은 요소 값을 추가, 제거 및 변경할 수 있으므로 변경이 가능하므로 매우 유연한 데이터 유형입니다.


Objects 


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


일반적으로 ID에 포함 된 정보와 같이 관련된 데이터를 보유하는 데 사용되는 JavaScript 객체 리터럴은 다음과 같이 속성 사이에 공백이 있습니다.


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

또는 특히 name : value 쌍이 많은 객체 리터럴의 경우 각 콜론 뒤에 공백이 있는 여러 행에 이 데이터 유형을 쓸 수 있습니다.

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 언어로 프로그래밍 프로젝트를 개발할 때 이러한 각 데이터 유형이 중요해집니다.