타입기초_2020.10.26

BootCamp_Codestates/Pre Tech Blog

타입기초_2020.10.26

Nomad Kim 2020. 10. 27. 17:50

Achievement Goals

자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다.
원시 자료형 string, number, boolean, undefined 의 의미를 이해할 수 있다.
타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있어야 한다.
typeof 를 활용하여 특정 값의 타입을 확인할 수 있다.
== 및 !=가 타입 검사를 하지 못한다는 것을 알 수 있다.

console.log(typeof 42);
// expected output: "number"

console.log(typeof 'blubber');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined"

느슨한 언어

자바스크립트는 동적 언어이다. 즉, 변수의 타입을 미리 선언할 필요가 없고 타입은 프로그램 처리 과정에서 자동으로 파악된다.

같은 변수에 여러 타입의 값을 넣을 수 있다.

var foo = 42;    // foo 는 이제 Number 임
var foo = "bar"; // foo 는 이제 String 임
var foo = true;  // foo 는 이제 Boolean 임

데이터 타입

최신 ECMAScript 표준은 다음과 같은 7개의 자료형을 정의한다

기본 타입

Boolean
Null
Undefined
Number
String
Symbol(ECMAScript 6 에 추가됨)
Object

오브젝트(Object)를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다.

1. Boolean 타입

Boolean 은 논리적인 요소를 나타내고, true 와 false 의 두 가지 값을 가질 수 있다.

2. Null 타입

Null 타입은 딱 한 가지 값, null 을 가질 수 있다.

어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급한다.

null은 특정 객체를 가리키지 않음을 지정할 때 null을 사용한다. 또한 직접 값을 비교할 수 있다.

let number3 = null;
if (number3 == null) console.log("number3은 null 상태이다.");
console.log(typeof(null)); // *** typeof 연산자를 null에 사용하면 object를 반환 한다.

null은 특수하게 typeof 연산자를 null에 사용하면 object를 반환 한다. 그 결과로 볼 때 null은 '객체가 없음'을 뜻하는 특수한 객체 값으로 생각할 수 있다. 하지만 실무에서 null은, 값이 null 하나뿐인 어떤 고유한 자료형에 속한 것으로 간주되며, 객체뿐 아니라 수나 문자열 "값이 없음"을 나타내는 데도 쓰인다.

3. Undefined 타입

값을 할당하지 않은 변수는 undefined 값을 가진다.

let number1;
if (number1 == undefined) console.log("변수 존재하지만 값이 없다..");
 
let number2 = 30;
    number2 = undefined; // 존재하는 변수를 undefined로 재할당할 수 있다.

Null과 Undefined 관계와 사용법

둘의 typeof의 연산자의 값은 다르지만 동치연산자(==)를 사용하면 두 값이 같다고 간주한다.

console.log(undefined == null); // true
console.log(undefined === null); // false

그래서 엄격한 동치 연산자(===)를 사용해야 한다. null과 undefined는 둘 다 false로 판정되는 값이며 불리언 값 false로 변환된다.

둘의 사용방법의 차이는 undefined는 시스템 수준에서 예기치 않은 상황에 발생한, 오류성 값 부재를 표현할 때 사용 하고 null은 일반적인 프로그램 수준에서 예상 가능한 값 부재 상황을 표현하고 싶을 때는 null을 사용한다. 만약 이들 값 중 하나를 변수나 프로퍼티에 할당할 필요가 있거나 함수로 인자로 전달할 필요가 있다면, undefined보다는 null을 사용하는 게 적절하다.

Null, Undefined 출처: https://deftkang.tistory.com/18 [deftkang의 IT]

4. Number 타입

숫자를 이용하여 덧셈(+)/뺄셈(-)/곱셈(*)/나눗셈(/)/나머지값구하기연산자(%)등의 연산을 할 수 있다.

var num2 = num * 2;	
console.log(num2);	// num과 2를 곱한 값, 2

var remainder1 = 30 % 7;
console.log(remainder);  // 30을 7로 나눈 나머지, 2

%는 Modulo Operator, 나머지 값을 구할 수 있는 연산 기호(연산자)이다.

같은수의 판별

일치연산자(===)를 이용하여 같은 수인지 확인할 수 있다.

주의점: 동등연산자(==)나 !=대신 항상 일치연산자(===)나 !==를 사용하는 습관을 갖는 것이 좋다.

let one = 5;
let two = 5;

console.log(one === two); // true

유효하지 않은 숫자 연산

NaN : Not A Number라는 의미를 가진 특수한 값으로 유효하지 않은 숫자 연산을 실행했을때 생성된다.

var a = 0;
var b = 0;
var c = a / b;

console.log(c);	// NaN

NaN을 판별하기 위해 'isNaN' 함수를 사용할 수 있다.

var b = 10;
var c = isNaN(b);
console.log(c); // false

var d = NaN;
var e = isNaN(d);
console.log(e); // true

숫자 판별하는 법

type of 연산자를 사용한다.

console.log(typeof 42);
// expected output: "number"

console.log(typeof 'blubber');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined"

5. String 타입

자바스크립트의 String 타입은 텍스트 데이터를 나타내는데 사용한다. 이는 16비트 부호없는 정수 값 요소들의 집합이다. String의 각 요소는 String의 위치를 차지한다. 첫 번째 요소는 0번 인덱스에 있고, 다음 요소는 1번, 그 다음 요소는 2번... 같은 방식이다. String 의 길이는 String이 가지고있는 요소의 갯수이다.

String 타입의 장점:

접합 연산자로 손쉽게 복잡한 문자열을 만들 수 있다.
문자열은 디버깅이 쉽다 (화면에 출력한 내용이 문자열 변수에 있는 값과 같다)
문자열은 많은 API 에서 사용하는 공통분모이고 (입력 필드, 로컬 스토리지 값, XMLHttpRequest 요청에서 responseText를 사용할 때 등) 그러다보니 문자열만으로 작업하는게 매혹적일 수 있다.

compound type 의 자료형