2. 타입

# 기본 타입

1. 기본 타입
타입(data type) : 프로그램에서 다룰 수 있는 값의 종류
기본 타입 : 자바스크립트에서 미리 정의하여 제공하는 여러 가지 형태의 타입
자바스크립트의 기본 타입 = 원시 타입 + 객체 타입

(1) 원시 타입(primitive type)
- 숫자(number)
- 문자열(string)
- 불리언(boolean)
- 심볼(symbol) : ECMAScript 6부터 제공됨
- undefined
 
(2) 객체 타입(object type)
- 객체(object)

var num = 10;          // 숫자
var myName = "홍길동"; // 문자열
var str;               // undefined

 

 

2. 숫자(number)
자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현
매우 큰 수나 매우 작은 수를 표현할 경우에는 e 표기법을 사용할 수 있음

var firstNum = 10;     // 소수점을 사용하지 않은 표현
var secondNum = 10.00; // 소수점을 사용한 표현
var thirdNum = 10e6;   // 10000000
var fourthNum = 10e-6; // 0.00001

 

 

3. 문자열(string)
문자열 : 큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합
큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음

작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음

var firstStr = "이것도 문자열입니다.";      // 큰따옴표를 사용한 문자열
var secondStr = '이것도 문자열입니다.';     // 작은따옴표를 사용한 문자열
var thirdStr = "나의 이름은 '홍길동'이야."  // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.
var fourthStr = '나의 이름은 "홍길동"이야.' // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.

자바스크립트에서는 숫자와 문자열을 더할 수도 있음
→ 숫자를 문자열로 자동 변환 & 두 문자열을 연결하는 연산을 수행

var num = 10;
var str = "JavaScript";
document.getElementById("result").innerHTML = (num + str); // 10JavaScript

 

 

4. 불리언(boolean)
불리언 값 : 참(true)과 거짓(false)을 표현

→ 예약어인 true와 false를 사용하여 나타낼 수 있음

var firstNum = 10;
var secondNum = 11;
document.getElementById("result").innerHTML = (firstNum == secondNum); // false

 

5. 심볼(symbol)
심볼 타입 : ECMAScript 6부터 새롭게 추가된 타입
→ 심볼 = 유일하고 변경할 수 없는 타입

→ 객체의 프로퍼티를 위한 식별자로 사용 가능

var sym = Symbol("javascript");  // symbol 타입
var symObj = Object(sym);        // object 타입

참고) 심볼 타입은 익스플로러에서 지원 X

6. typeof 연산자
typeof 연산자 : 피연산자의 타입을 반환

→ 피연산자가 단 하나뿐인 연산자

typeof 10;        // number 타입
typeof "문자열";  // string 타입
typeof true;      // boolean 타입
typeof undefined; // undefined 타입
typeof null;      // object 타입

 

 

7. null과 undefined
자바스크립트에서..

null = object 타입이며, 아직 '값'이 정해지지 않음
undefined = null과는 달리 '타입'이 정해지지 않음
→ 자바스크립트에서 undefined는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환

var num;          // 초기화하지 않았으므로 undefined 값을 반환함.
var str = null;   // object 타입의 null 값
typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함.

null과 undefined : 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결괏값이 다름
null과 undefined : 타입을 제외하면 같은 의미 but 타입이 다르므로 일치X

null ==  undefined; // true
null === undefined; // false

 

 

8. 객체(object)
자바스크립트의 기본 타입 = 객체(object)
객체(object) : 실생활에서 우리가 인식할 수 있는 사물로 이해 가능
객체 = 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체

var dog = { name: "해피", age: 3 }; // 객체의 생성
// 객체의 프로퍼티 참조
document.getElementById("result").innerHTML =
    "강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";

 

# 타입 변환

1. 타입 변환(type conversion)
자바스크립트 : 타입 검사가 매우 유연한 언어
자바스크립트의 변수는 타입이 정해져 있지 않음 & 같은 변수에 다른 타입의 값을 다시 대입할 수도 있음

var num = 20; // Number 타입의 20
num = "이십"; // String 타입의 "이십"
var num;      // 한 변수에 여러 번 대입할 수는 있지만, 변수의 재선언은 할 수 없습니다. 재선언문은 무시됩니다.

 

 

2. 묵시적 타입 변환(implicit type conversion)
특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용

→ 아래의 세 번째 예제에서처럼 의미에 맞게 자동으로 타입을 변환할 수 없을 때 자바스크립트는 NaN 값을 반환

참고) NaN(Not a Number) : 정의되지 않은 값이나 표현할 수 없는 값

        → 0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환되는 읽기 전용 값

10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
"3" * "5";     // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
1 - "문자열";  // NaN

 

 

3. 명시적 타입 변환(explicit type conversion)
자바스크립트에서는 묵시적 타입 변환을 많이 사용 but 명시적으로 타입을 변환할 방법도 제공
명시적 타입 변환을 위해 자바스크립트가 제공하는 전역 함수 :   
- Number()
- String()
- Boolean()
- Object()
- parseInt()
- parseFloat()

Number("10"); // 숫자 10
String(true); // 문자열 "true"
Boolean(0);   // 불리언 false
Object(3);    // new Number(3)와 동일한 결과로 숫자 3

 

 

4. 숫자를 문자열로 변환
String() 함수 : 숫자를 문자열로 변환하는 가장 간단한 방법
toString() 메소드 : null과 undefined를 제외한 모든 타입의 값이 가지고 있음

숫자(Number) 객체 : 숫자를 문자열로 변환하는 다음과 같은 메소드를 별도로 제공
- toExponential()
- toFixed()
- toPrecision()

메소드	설명
toExponential()	정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환
toFixed()	소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환
toPrecision()	입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환

참고) 메소드(method) : 객체의 프로퍼티 값으로 함수를 갖는 프로퍼티

 

5. 불리언 값을 문자열로 변환
: String() 함수와 toString() 메소드

String(true);     // 문자열 "true"
false.toString(); // 문자열 "false"

 

 

6. 날짜를 문자열이나 숫자로 변환
: String() 함수와 toString() 메소드
날짜(Date) 객체 : 문자열과 숫자로 모두 변환할 수 있는 유일한 타입 in 자바스크립트
 
날짜(Date) 객체 : 날짜를 숫자로 변환하는 다음과 같은 메소드를 별도로 제공
- getDate()
- getDay()
- getFullYear()
- getMonth()
- getTime()
- getHours()
- getMinutes()
- getSeconds()
- getMilliseconds()

메소드	설명
getDate()	날짜 중 일자를 숫자로 반환함. (1 ~ 31)
getDay()	날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일 : 6)
getFullYear()	날짜 중 연도를 4자리 숫자로 반환함. (yyyy년)
getMonth()	날짜 중 월을 숫자로 반환함. (1월 : 0 ~ 12월 : 11)
getTime()	1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환함.
getHours()	시간 중 시를 숫자로 반환함. (0 ~ 23)
getMinutes()	시간 중 분을 숫자로 반환함. (0 ~ 59)
getSeconds()	시간 중 초를 숫자로 반환함. (0 ~ 59)
getMilliseconds()	시간 중 초를 밀리초(millisecond) 단위의 숫자로 반환함. (0 ~ 999)

String(Date());        // Mon May 16 2016 19:35:25 GMT+0900
Date().toString();     // Mon May 16 2016 19:35:25 GMT+0900
var date = new Date(); // Date 객체 생성
date.getFullYear();    // 2016
date.getTime();        // 1463394925632 -> 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환함.

 

 

7. 문자열을 숫자로 변환
Number() 함수 : 문자열을 숫자로 변환하는 가장 간단한 방법
문자열을 숫자로 변환해 주는 두 개의 전역 함수를 별도로 제공
- parseInt()
- parseFloat()

메소드	설명
parseInt()	문자열을 파싱하여 특정 진법의 정수를 반환
parseFloat()	문자열을 파싱하여 부동 소수점 수를 반환

 

8. 불리언 값을 숫자로 변환
: Number() 함수

Number(true);  // 숫자 1
Number(false); // 숫자 0

 

# 변수

1. 변수의 선언과 초기화
변수(variable) : 데이터(data)를 저장할 수 있는 메모리 공간 + 그 값은 변경 가능
→ var 키워드를 사용하여 변수를 선언

선언되지 않은 변수를 사용, 접근 → 오류 발생
But 선언되지 않은 변수를 초기화 : 자동으로 선언을 먼저 한 후 초기화를 진행

var month; // month라는 이름의 변수 선언
date = 25; // date라는 이름의 변수를 묵시적으로 선언

 

초기화 : 선언된 변수를 나중에 초기화 / 선언과 동시에 초기화 → 모두 가능

var month;     // 변수의 선언
var date = 25; // 변수의 선언과 동시에 초기화
month = 12;    // 변수의 초기화

 

쉼표(,) 연산자를 이용하여 여러 변수를 동시에 선언/초기화 가능

var month, date;             // 여러 변수를 한 번에 선언
var hours = 7, minutes = 15; // 여러 변수를 선언과 동시에 초기화
month = 10, date = 5;        // 여러 변수를 한 번에 초기화

 

 

2. 변수의 타입과 초깃값
자바스크립트의 변수: 타입이 정해져 있지 않음 & 같은 변수에 다른 타입의 값을 다시 대입 가능
→ 한 변수에 다른 타입의 값을 여러 번 대입 가능 but 한 번 선언된 변수를 재선언 하는 것은 불가능

var num = 10;        // 변수의 선언과 함께 초기화
num = [10, 20, 30];  // 배열 대입
var num;             // 이 재선언문은 무시됨.

 

배열(array) : 여러 값들로 이루어진 하나의 집합
선언만 되고 초기화하지 않은 변수 → undefined 값

var num;  // undefined
num = 10; // 10

 

 

3. 변수의 이름
→ 식별자(identifier) (변수는 이름을 가지고 식별하기 때문 in 자바스크립트)

- 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)로만 구성
- 숫자로는 시작 불가능 (숫자와의 구분을 빠르게 하기 위함)
- 대소문자를 구분

- 자바스크립트 언어에서 예약된 키워드는 이름으로 사용 불가능