[Javascript] 변수 데이터 타입(data types)

 

 

변수에 저장할 수 있는 데이터 유형에 대해 몇 가지 알아보겠습니다.

 

• 1. 숫자(Number)
• 2. 문자열(String)
• 3. boolean
• 4. 배열(Array)
• 5. null
• 6. undefined
• 7. 객체(Objects)
• 8. symbol(ES6에서 추가)
• 9. 동적 타이핑(Dynamic typing)

 

** JavaScript에서는 데이터 타입을 확인하기 위해 typeof 라는 키워드를 사용합니다.

 

숫자(Number)

30과 같은 숫자 (정수라고도함) 나 2.456(부동소수점 또는 부동 소수점 숫자라고도 함) 같은

십진수 숫자를 변수에 저장할 수 있습니다.

JavaScript는 일부 프로그래밍 언어처럼 숫자 유형에 따른 다른 데이터 유형을 가지고 있지 않습니다.

변수에 숫자 값을 대입할 때, 따옴표는 사용하지 않습니다.

let age = 20;

 

**number type사용 시 주의할 점 3가지

const infinity = 1 / 0; // 양의 무한대
const negativeInfinity = -1 / 0; // 음의 무한대
const nAn = 'not a number' / 2; // 산술 연산 불가(not-a-number)

console.log(infinity); // Infinity
console.log(negativeInfinity); // -Infinity
console.log(nAn); // NaN

const infinity = 1 / 0;

console.log(infinity);

양의 값을 0으로 나누게 되면

양의 무한대의 숫자 값이 생기는데 이것을 양의 무한대(인피니티(infinity))라고 부릅니다.

 

 

const negativeInfinity = -1 / 0;

console.log(negativeInfinity);

음의 값을 0으로 나누게 되면

음의 무한대의 숫자 값이 생기는데 이것을 음의 무한대(네거티브인피니티(negativeInfinity))라고 부릅니다.

const nAn = 'not a number' / 2;

console.log(nAn);

숫자가 아닌 경우 문자열을 숫자로 나누게 되면

산술 연산이 불가하기 때문에 NaN값이 출력됩니다.

 

 

이렇게 3가지의 값은 특별한 숫자의 값이고 이 값들이 중요한 이유는 

추후 Javascript를 이용해 DOM요소의 position값을 바꾸거나 다양한 연산을 해야 할 경우
 data type을 확인하지 않고 연산을 하게 되면 
error를 발생시킬 수 있으므로 
항상 type을 확인하고 사용하는 것이 중요합니다.

 

 

문자열(String)

문자열은 텍스트의 조각입니다.

변수에 문자열 값을 대입할 때, 작은따옴표(')나 큰따옴표(")로 묶어야 합니다.

그렇지 않으면 JavaScript는 다른 변수 이름으로 해석하게 됩니다.

let name = "hyoni";

 

 

불리언(Booleans)

불리언(Booleans)은 true나 false라는 값을 가지는 참/거짓을 표현하는 데이터 유형입니다.

일반적으로 조건을 테스트하는 데 사용되며 그다음 코드가 조건에 따라 실행됩니다. 

let test1 = true;
let test2 = 6 < 3;

console.log(test1); // true
console.log(test2); // false

위 코드에서 

test2는 (<) 연산자를 사용하여 6이 3보다 작은 지를 확인 합니다.

예상한 대로 6이 3보다 작지 않으므로 false를 반환합니다.

 

 

배열(Array)

배열은 대괄호([])로 묶이고 쉼표로 구분된 여러 값을 포함하는 단일 객체입니다.

let array1 = ["hyoni", "Bob", "Jimi"];
let array2 = [10, 15, 20];

console.log(array1[0]); // hyoni
console.log(array2[1]); // 15

위와 같은 배열이 정의되면

console.log(array1[0]); // hyoni
console.log(array2[1]); // 15

개별 값에 접근할 수 있습니다.

위 코드에서 대괄호에는 반환할 값의 위치를 지정하는 index값이 들어있습니다.

 

 

객체(Objects)

Javascript에서 객체(Objects)는 실제 사물(real life object)을 모델링하는 코드 구조입니다.

예를 들어 사람 객체는 이름, 키, 몸무게, 취미 등의 정보를 가지고 표현할 수 있습니다.

let person = {
  name: "Bob",
  hobby: "study"
};
console.log(person.name); // Bob
console.log(person.hobby); // study

객체의 저장된 정보를 검색하기 위해 위와 같은 구문을 사용합니다.

 

 

null

let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`); // value: null, type: object

nothing변수에 null이라는 값을 할당하는 것은 아무것도 아닌 값을 할당하는 것과 같습니다.

 

 

undefined

 let x;
 console.log(`value: ${x}, type: ${typeof x}`); // value: undefined, type: undefined

x변수를 선언하고 값을 할당하지 않으면 undefined값이 들어있는 것을 확인할 수 있습니다.

즉 선언은 되었지만 값이 지정되어있지 않은 것입니다.

 

let x;

이 코드는

let x = undefined;

이 코드와 동일합니다.

 

 

Symbol

Symbol은 생성자가 symbol 원시 값(객체가 아니면서 메서드 또는 속성도 가지지 않는 데이터입)을 반환하는 내장 객체입니다. symbol 원시 값은 심볼 값, 혹은 짧게 심볼이라고만 부르며 고유함이 보장됩니다.

심볼은 객체에 속성을 추가할 때 고유한 키를 부여하여 다른 코드와 충돌하지 않도록 할 때 많이 쓰입니다.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);

console.log(symbol1 === symbol2);

symbol1과 symbol2의 값이 동일한지 아닌지 ===연산자를 이용해 확인합니다.

심볼은 동일한 스트링을 작성했어도 다른 심볼로 만들어지기 때문에

주어지는 스트링에 상관없이 고유한 식별자를 만들 때 사용됩니다.

즉,  symbol1과 symbol2가 동일하지 않으므로 false를 반환합니다.

 

 

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true

console.log(symbol1); // error
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); //value: id, type: symbol

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true

만약 동일한 심볼을 만들고 싶다면

Symbol.for()을 사용해 주어진 스트링에 맞는 동일한 심볼을 만들 수 있습니다.

 

console.log(symbol1);

심볼은 바로 출력하게 될 경우 error가 발생하게 됩니다

console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); // value: id, type: symbol

그러므로 항상. description을 이용하여 스트링으로 변환 후 출력해야 합니다.

 

 

동적 타이핑(Dynamic typing: dynamically typed language)

JavaScript는 동적 유형을 갖춘 동적 언어입니다.

JavaScript의 변수는 특정 값 유형과 직접 연관되지 않으며

모든 변수에는 모든 유형의 값이 할당(및 재할당)될 수 있습니다.

변수를 선언할 때 어떤 타입인지 선언하지 않고

프로그램이 동작할 때 할당된 값에 따라서 타입이 변경될 수 있습니다.

let text = 'hello';
console.log(text.charAt(0)); //h (charAt(0) => index 0번째 출력)
console.log(`value: ${text}, type: ${typeof text}`); // value: hello, type: string

text = 1;
console.log(`value: ${text}, type: ${typeof text}`); // value: 1, type: number

text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`); // value: 75, type: string

text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`); // value: 4, type: number

 

console.log(text.charAt(0)); // h
console.log(`value: ${text}, type: ${typeof text}`); // value: hello, type: string

text변수의 값 "hello"는 문자열이기 때문에

text.charAt(0)을 출력하면 0번째 index의 "h"가 출력되고 

text변수의 값 타입은 string인 것을 확인할 수 있습니다.

**

 

text = 1;

console.log(`value: ${text}, type: ${typeof text}`); // value: 1, type: number

text변수에 1을 재할당 하였습니다.

type을 출력해 보면 number type인 것을 확인할 수 있습니다.

 

text = '7' + 5;

console.log(`value: ${text}, type: ${typeof text}`); // value: 75, type: string

text변수에 문자열 "7" + 숫자 5를 재할당 하였습니다.

문자열에 +가 있으면 숫자 5를 string으로 변환하여 

문자열 7과 변환된 문자 5가 더해져 75가 되고 type은 string이 됩니다.

 

text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`); // value: 4, type: number

text변수에 문자열 "8" / 문자열 "2"를 재할당 하였습니다.

스트링과 스트링을 나누게 되면 자바스크립트 엔진이 스트링은 나눌 수 없다고 판단합니다.

그래서 스트링 안에 있는 값이 실제로 숫자값인 것을 파악하고 

나누기 연산자를 사용하기 위해 스트링을 숫자로 변환하여 연산합니다.

즉 8 / 2가 되기 때문에 값은 4가 되고 type은 number가 됩니다. 

 

 

** charAt() 메서드는 String지정된 인덱스에 있는 단일 UTF-16 코드 단위로 구성된 새 문자열을 반환합니다.

charAt(index)

index

반환할 문자의 0 기반 인덱스입니다.