데이터 타입

docs.scrimba.com

누군가의 이름, 나이, 그리고 로그인 여부를 저장하면 이미 세 가지 다른 종류의 값을 사용한 것입니다. 이름은 텍스트이고, 나이는 숫자이며, 로그인 플래그는 예 또는 아니오입니다. JavaScript는 이들 각각을 서로 다른 타입으로 취급하며, 각각을 다르게 처리합니다. 이 장은 처음 만나는 몇 가지 타입과 어떤 타입을 다루고 있는지 구분하는 방법에 관한 것입니다.

기본 타입

세 가지 타입이 저장하는 대부분의 것을 담당합니다. **문자열**은 따옴표로 감싼 텍스트입니다. 숫자는 세기나 측정용 숫자입니다. 불린은 예 또는 아니오 값이며, true 또는 false 두 가지 옵션만 가집니다.

const name = "민준"; // 문자열: 텍스트
const age = 27; // 숫자
const isLoggedIn = true; // 불린: true 또는 false

문자열은 이름, 메시지, 색상처럼 단어처럼 읽히는 모든 것에 사용합니다. 숫자는 세거나 계산할 수 있는 모든 것에 사용합니다. 불린은 상자가 체크되었는지 여부처럼 두 가지 선택지 중 하나인 경우마다 사용합니다. 문자열과 숫자에서 훨씬 더 많은 내용을 볼 수 있습니다.

JavaScript의 일상적인 값은 몇 가지 **타입**으로 나뉘며, 그중 세 가지가 대부분의 데이터를 담당합니다. 문자열은 따옴표로 감싼 텍스트입니다(작은따옴표든 큰따옴표든 상관없습니다). 숫자는 모든 숫자 값입니다. 불린은 정확히 두 값 중 하나인 true 또는 false입니다.

const productName = "무선 마우스"; // 문자열
const price = 24.99; // 숫자
const inStock = true; // 불린

각 타입은 역할이 있습니다. 문자열은 보여주거나 읽을 텍스트를 담으며, 문자열에서 다룹니다. 숫자는 계산에 사용하는 모든 것을 담으며, 숫자에서 다룹니다. 불린은 두 가지 선택지 답변을 담으며 price < 30 같은 비교가 하나를 생성하므로 결정이 내려지는 모든 곳에 나타납니다.

JavaScript는 값을 작은 타입 집합으로 정렬하며, 그중 세 가지가 처리하는 대부분의 데이터를 차지합니다. 문자열은 따옴표(작은따옴표, 큰따옴표 또는 템플릿 리터럴용 백틱)로 작성된 문자 시퀀스입니다. 숫자는 숫자 값입니다. 불린은 true 또는 false 두 값 중 하나입니다.

const currency = "EUR"; // 문자열
const balance = 1499.5; // 숫자
const isOverdrawn = balance < 0; // 불린, 여기서는 비교의 결과

문자열과 숫자 사이의 구분은 처음 보이는 것보다 더 중요합니다. "5"와 5는 다르게 동작하기 때문입니다: 하나는 숫자가 포함된 텍스트이고, 다른 하나는 산술 연산을 할 수 있는 값입니다. 불린은 손으로 직접 입력하는 경우가 거의 없기 때문에 일찍 주목할 가치가 있습니다. 비교와 논리 검사에서 나오므로, balance < 0을 "불린"으로 읽을 수 있는 능력이 나중의 조건과 연산자를 제대로 이해하는 데 도움이 됩니다.

Juno기본 타입 계속 사용하는 세 가지: 따옴표로 감싼 텍스트용 string, 숫자용 number, 그리고 true 또는 false 답변용 boolean. 저장하는 항목의 종류에 맞는 타입을 선택합니다. 이름은 문자열, 나이는 숫자, 체크박스는 불린입니다.

Juno기본 타입 세 가지 타입이 대부분의 작업을 수행합니다: 텍스트용 string, 숫자 값용 number, true 또는 false 중 하나용 boolean. 따옴표가 문자열을 만들므로 "5"는 텍스트이지 숫자가 아닙니다. 불린은 입력한 것이 아니라 비교의 결과로 나타나는 경우가 대부분입니다.

Juno기본 타입 문자열, 숫자, 불린이 대부분의 데이터를 담으며, 문자열 대 숫자 구분이 함정입니다: "5"는 텍스트, 5는 산술입니다. 불린 리터럴을 거의 작성하지 않습니다. balance < 0 같은 비교가 하나를 전달하기 때문입니다. 비교를 "이것은 불린이다"로 읽는 것이 나중의 조건을 이해하는 데 도움이 됩니다.

없음: null과 undefined

때때로 값이 없으며, JavaScript는 이를 나타내는 두 가지 방법이 있습니다. **undefined**는 아직 값이 주어지지 않았다는 뜻입니다. 값을 설정하지 않은 변수를 만들면 그 값은 undefined입니다.

let score;
console.log(score); // undefined

null은 의도적으로 비어있다는 뜻입니다. 직접 사용하여 "지금 이것에는 값이 없고, 내가 의도한 것입니다"라고 말합니다.

let winner = null;
console.log(winner); // null

간단히 말해서: undefined는 JavaScript가 "아직 여기에 아무것도 없다"고 말하는 것이고, null은 "여기에 아무것도 없고, 의도적입니다"라고 말하는 것입니다.

두 값 모두 "값 없음"을 나타내며, 차이는 누가 설정했는지입니다. **undefined**는 JavaScript가 기본적으로 제공하는 것입니다: 값 없이 선언된 변수는 예를 들어 undefined로 시작합니다.

let selectedColor;
console.log(selectedColor); // undefined

null은 직접 할당하는 값으로, 의도적으로 비어있거나 아직 채우지 않은 슬롯을 표시합니다.

let couponCode = null;
console.log(couponCode); // null

undefined는 기본 부재입니다; null은 의도적인 부재입니다. 이 구분이 읽는 유용한 방법입니다: undefined를 보면 뭔가 설정되지 않았고, null을 보면 누군가 비우기로 선택했습니다.

null과 undefined 모두 부재를 나타내며, 그들을 구분하는 관례는 의도에 관한 것입니다. **undefined**는 JavaScript가 자체적으로 생성하는 부재입니다: 선언되었지만 할당되지 않은 변수, 누락된 속성, 아무것도 반환하지 않는 함수입니다.

let discount;
console.log(discount); // undefined

null은 직접 할당하는 부재로, "아직 건드려지지 않음"이 아니라 "의도적으로 비어있음"을 신호합니다.

let appliedCoupon = null;
console.log(appliedCoupon); // null

둘을 구분해서 유지하는 것은 코드베이스에서 진짜 신호입니다: undefined는 보통 누군가 이것을 설정하지 않았다는 뜻이며, 버그나 완성되지 않은 경로를 가리킬 수 있고, null은 신중한 선택으로 읽힙니다. 또한 나중의 검사에서 동일하게 동작하지 않으므로, 둘을 섞으면 비교와 연산자가 나타날 때 혼동을 야기합니다. undefined를 머신의 기본값으로, null을 명시적 "비어있음"으로 취급하면, 그들의 동작이 무작위로 느껴지지 않습니다.

Juno없음: null과 undefined "값 없음"을 나타내는 두 가지 방법. undefined는 아직 아무것도 설정되지 않았을 때 JavaScript의 기본값입니다. null은 "의도적으로 비어있음"을 뜻하는 직접 작성한 것입니다. 변수에 값을 주지 않았다면 undefined를 기대합니다.

Juno없음: null과 undefined 둘 다 부재를 의미하며, 차이는 누가 설정했는지입니다. undefined는 저절로 나타나며, 값 없이 선언된 변수 같은 경우입니다. null은 뭔가를 의도적으로 비어있음으로 표시하기 위해 할당하는 것입니다. 이렇게 읽으면 부재가 실수인지 선택인지 알 수 있습니다.

Juno없음: null과 undefined 관례가 무거운 작업을 수행합니다: undefined는 JavaScript가 제공하는 부재, null은 의도적으로 할당하는 부재입니다. 따라서 undefined는 종종 "아무도 이것을 설정하지 않았습니다"를 표시하며, 이는 버그일 수 있고, null은 의도로 읽힙니다. 둘을 구분해서 유지하면 나중의 비교가 놀라지 않습니다.

typeof로 타입 확인하기

값의 타입이 확실하지 않을 때, typeof가 알려줍니다. 값 앞에 놓으면 타입의 이름을 나타내는 문자열을 반환합니다.

console.log(typeof "민준"); // "string"
console.log(typeof 27); // "number"
console.log(typeof true); // "boolean"

답이 항상 텍스트, "number" 같은 **문자열**임을 주목합니다. 이는 사용하기 전에 무엇을 다루고 있는지 확인하고 싶을 때 편합니다.

typeof는 값의 타입을 문자열로 보고합니다. 모든 값 앞에 놓으면 "string", "number", "boolean" 등을 얻습니다.

const label = "checkout";
console.log(typeof label); // "string"
console.log(typeof 24.99); // "number"
console.log(typeof false); // "boolean"
console.log(typeof undefined); // "undefined"

처음에 모두를 놀라게 하기 때문에 지금 알아야 할 한 가지 **특이점**이 있습니다: typeof null은 "null"이 아니라 "object"입니다.

console.log(typeof null); // "object"

이것은 언어의 오래된 버그이며 고정되지 않았습니다. 고정하면 오래된 코드를 깨뜨리기 때문입니다. 이것은 당신이 잘못한 것이 아닙니다. typeof null이 거짓말을 한다는 것을 기억하고, 필요할 때는 null을 직접 확인합니다.

typeof는 값을 가져가서 타입의 이름을 나타내는 문자열을 반환합니다. 런타임에 "내가 무엇을 다루고 있나"를 묻는 가장 빠른 방법입니다.

console.log(typeof "checkout"); // "string"
console.log(typeof 1499.5); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"

외톨이인 한 가지 결과를 반드시 암기해야 합니다: typeof null은 "null"이 아니라 "object"를 반환합니다.

console.log(typeof null); // "object"

이것은 **역사적 특이점**이며, JavaScript의 첫 버전에 베이크된 버그이며, 너무 많은 기존 코드가 이제 잘못된 답에 의존하기 때문에 수정되지 않았습니다. 실질적 결과는 typeof만으로 값이 null인지 알 수 없다는 것입니다; 대신 직접 비교로 확인합니다. 이것은 JavaScript의 후방 호환성 트레이드오프의 전형적인 예로, 알려진 실수가 그대로 남아있는 것은 그것을 깨뜨리면 웹이 깨질 것이기 때문입니다.

Junotypeof로 타입 확인하기 값 앞에 typeof를 놓으면 "number"처럼 문자열로 된 타입을 알려줍니다. 확실하지 않을 때 무엇을 다루고 있는지 확인하는 가장 빠른 방법입니다. 답은 항상 텍스트이므로 typeof 27은 따옴표를 포함하여 "number"를 줍니다.

Junotypeof로 타입 확인하기typeof는 타입을 문자열로 반환하므로 값을 사용하기 전에 확인할 수 있습니다. 한 가지 함정을 주의합니다: typeof null은 "null"이 아니라 "object"입니다. 이것은 언어가 호환성을 위해 유지한 버그이므로, typeof를 신뢰하는 대신 null을 직접 테스트합니다.

Junotypeof로 타입 확인하기typeof는 런타임에 "이것이 무엇의 타입인가"를 문자열로 답합니다. 암기할 한 가지 결과는 잘못된 것입니다: typeof null은 "object"이며, 이것은 웹을 깨뜨릴 것이기 때문에 고정된 첫 버전 버그입니다. 따라서 null을 확인할 수 없습니다; 직접 비교로 그 대신 확인합니다.

타입의 더 넓은 그림

문자열, 숫자, 불린, 그리고 null과 undefined를 만났습니다. 이것이 작은 프로그램에 필요한 대부분의 것을 저장하기에 충분합니다. 나중의 장에서는 값을 함께 그룹화하는 방법을 추가하지만, 이러한 그룹들 각각은 여전히 이미 본 간단한 타입으로 구축됩니다.

지금은 모든 값이 타입을 가지고 있고, 타입이 값으로 할 수 있는 것을 결정한다는 것을 아는 것이 이득입니다. 숫자는 더할 수 있고, 문자열은 연결할 수 있고, 불린은 확인할 수 있습니다. 다음 단계로 연산자를 염두에 두어야 합니다. 이것이 이 값들을 조합하기 시작하는 곳이기 때문입니다.

지금까지의 타입, 문자열, 숫자, 불린, null, 그리고 undefined는 **원시 타입**입니다: 간단하고 단일한 값입니다. JavaScript는 또한 배열과 객체 같은 값의 모음을 담는 비원시 타입을 가집니다. 이들은 자신의 장에서 다루어지며, 도달했을 때 배워볼 가치가 있는 방식으로 다르게 동작합니다.

이제 명확히 할 한 가지: number는 단일 타입입니다. JavaScript는 어떤 언어들처럼 정수와 소수를 별도의 타입으로 나누지 않으므로, 10과 10.5 모두 같은 number 타입입니다. 이것은 숫자를 더 쉽게 생각할 수 있게 하며, 모든 숫자 값을 다루는 단일 타입을 가집니다.

여기서 다룬 타입, 문자열, 숫자, 불린, null, 그리고 undefined는 **원시 타입**입니다: 단일하고 자체 포함된 값입니다. 나머지, 배열과 객체는 참조 타입이며, 모음을 담고 복사하거나 비교할 때 다르게 동작합니다. 이 차이가 많은 놀라움의 원인이며, 이 타입들이 올 때 자신의 취급을 받습니다.

타입이 테이블에 있는 동안 플래그할 가치가 있는 몇 가지가 있습니다. number는 모든 숫자 값(정수든 소수든)을 위한 한 가지 타입이므로, 숫자에서 다룬 별도의 정수 타입을 생각할 필요가 없습니다. 두 가지 추가 원시가 존재하며 당신이 일찍 거의 만나지 않습니다: 일반 숫자보다 크기가 너무 큰 정수용 bigint, 그리고 고유한 키용 symbol. 또한 타입은 고정되지 않습니다: JavaScript는 특정 상황에서 하나를 다른 것으로 변환하며, 이 동작을 강제 변환이라고 부릅니다(예를 들어 연결할 때 숫자를 문자열로 변환). 이것은 실제 결과를 가지고 있으며, 연산자는 이것이 중요해지기 시작하는 곳입니다.

Juno타입의 더 넓은 그림 모든 값이 타입을 가지고 있으며, 타입이 그것으로 할 수 있는 것을 결정합니다: 숫자 더하기, 문자열 연결, 불린 확인. 문자열, 숫자, 불린을 포함한 일상적인 타입과 null 그리고 undefined는 작은 프로그램이 저장하는 대부분을 다룹니다. 나중의 장에서 값을 함께 그룹화하지만, 모두 이들에서 구축됩니다.

Juno타입의 더 넓은 그림 당신이 아는 다섯 가지, 문자열, 숫자, 불린, null, 그리고 undefined는 원시 타입입니다: 간단한 단일 값입니다. 배열과 객체는 비원시이며, 나중에 오고, 다르게 동작합니다. 편리한 사실: number는 10과 10.5 모두를 위한 한 가지 타입이므로, 추적할 별도의 정수와 소수가 없습니다.

Juno타입의 더 넓은 그림 원시는 단일 값입니다; 배열과 객체는 다르게 복사되고 비교되는 참조 타입이며, 이것이 놀라움이 존재하는 곳입니다. number는 모든 숫자 값을 다루며, bigint와 symbol은 드문 경우를 위해 존재합니다. 타입은 또한 서로 변환되며, 이것을 강제 변환이라고 부르며, 연산자는 이것이 중요해지기 시작하는 곳이므로, 마음의 뒤쪽에 유지합니다.

타입이 여기서 어디로 가는지

작성하는 모든 값, 읽어내는 모든 값은 타입을 가지고 있으며, 이것의 이름을 지정하는 것에 능숙해지는 것이 이후의 모든 것의 기초입니다. 다음 장은 당신이 가장 많이 처리할 두 가지를 깊이 있게 다룹니다: 텍스트 작업용 문자열과 계산용 숫자. 그 후, 연산자는 이 타입들이 서로 만나기 시작하고, 비교하고, 결합하고, 때때로 변환하는 곳이며, 어떤 타입을 다루고 있는지 아는 것이 이것이 당신을 놀라게 하지 않게 합니다.