[JavaScript] JavaScript Basic2

1. JavaScript는 동적 타입 언어이다.

 

동적 타입(dynamic/weak type) 언어(JavaScript, Python 등)

• 자바스크립트는 var, let, const 키워드를 사용해 변수를 선언할 뿐 데이터 타입을 사전에 선언하지 않는다.
• 즉, 동적 타입 언어는 변수 선언이 아닌 할당에 의해 타입이 결정(타입 추론)되며 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.
• 변수의 값이 언제든지 변경 될 수 있기 때문에 값을 확인하기 전에는 타입을 확신할 수 없다.
• 개발자의 의도와 상관 없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.
• 즉, 유연성은 높지만 신뢰성은 떨어진다. => 파이썬도 해본 결과 유연성 높은게 동적 타입 언어의 최대 장점 같음... 
• 이로 인해 변수를 사용하기 전 데이터 타입 체크를 하기도 하는데 이는 번거롭기도 하고 코드의 양도 증가한다.

// JavaScript는 동적타입언어이다.
// => 데이터 타입을 사전에 선언하지 않는다.
// => 변수 선언이 아니라 할당에 의해 타입이 결정 되며 재할당에 의해 동적으로 변수의 타입이 변화할 수 있다.

var test;
console.log(typeof test);       // undefined

test = 1;
console.log(typeof test);       // number

test = 'JavaScript';
console.log(typeof test);       // string

test = true;
console.log(typeof test);       // boolean

test = null;
console.log(typeof test);       // object
// 자바스크립트의 첫 번째 버전의 버그이지만 기존 코드에 영향을 줄 수 있어 아직까지 수정 되지 못하고 있다.

test = Symbol();
console.log(typeof test);       // symbol

test = {};  // 객체
console.log(typeof test);       // object

test = [];  // 배열
console.log(typeof test);       // object

test = function(){}; // 함수
console.log(typeof test);       // function

 

2. implicit coercion (암묵적 타입 변환)

자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환 되는 것을 암묵적 타입 변환(implicit coercion)이라고 한다.

암묵적 타입 변환은 코드에서 드러나지 않으므로 타입 변환 된 결과를 예측할 수 있어야 오류를 방지할 수 있다.

 

String

// 문자열 타입으로 변환 String

// 1. 문자열 연결 연산자 : 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적으로 변환
console.log(10 + '20');

// 2. 템플릿 리터럴 표현식 삽입 : 표현식의 결과를 문자열 타입으로 암묵적으로 변환
console.log(`10 + 20 : ${10 + 20}`);

// 문자열 타입이 아닌 값을 문자열 타입으로 암묵적으로 변환하는 결과
console.log(1 + '');
console.log(NaN + '');
console.log(Infinity + '');
console.log(true + '');
console.log(null + '');
console.log(undefined + '');
//console.log(Symbol() + '');   // Cannot convert a Symbol value to a string
console.log({} + '');           // 객체 - "[object Object]"
console.log([] + '');           // 배열 - ""
console.log(function(){} + ''); // 함수 - "function(){}"

Number

// 숫자 타입으로 변환 Number

// 1. 산술 연산자
// 산술 연산자의 피연산자는 모두 숫자여야 하므로 숫자가 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.
console.log(10 - '5');
console.log(10 * '5');
console.log(10 / '5');
console.log(10 % 'JavaScript');     // NaN - 피연산자 숫자 변환 불가로 연산 수행 불가

// 2. 비교 연산자
// 비교 연산자로 크기를 비교하기 위해 모두 숫자 타입이여야 하므로 숫자가 아닌 피연산자를
// 숫자 타입으로 암묵적 타입 변환한다.
console.log(10 > '5');
console.log(10 > '20');
console.log(`10 > 'a' : ${10 > 'a'}`);  
// 문자는 모두 NaN으로 변환되기 때문에 NaN은 비교 연산자에서 어떤 값과도 비교 불가능
// 따라서 항상 false를 반환한다.
// 참고
console.log(`NaN == NaN : ${NaN == NaN}`);
console.log(`isNaN(NaN) : ${isNaN(NaN)}`);

// 3. + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환 수행
console.log(+'');                   // 0
console.log(+'1');                  // 1
console.log(+'JavaScript');         // NaN
console.log(+true);                 // 1
console.log(+false);                // 0
console.log(+null);                 // 0
console.log(+undefined);            // NaN
//console.log(+Symbol());           // Cannot convert a Symbol value to a number
console.log(+{});                   // NaN
console.log(+[]);                   // 0
console.log(+function(){});         // NaN

// 빈 문자열, 빈 배열, null, false는 0으로 변환된다.
// true는 1로 변환된다.
// 객체와 undefined, 함수는 변환되지 않아 NaN이 반환된다.

Boolean

// 논리 타입으로 변환 Boolean
// 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값)
// 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.
// Truthy -> true, Falsy -> false로 암묵적 타입 변환된다.

if(undefined) console.log("if(undefined)");         // false
if(null) console.log("if(null)");                   // false
if(0) console.log("if(0)");                         // false
if(1) console.log("if(1)");                         // true
if(NaN) console.log("if(NaN)");                     // false
if('') console.log("if('')");                       // false
if('JavaScript') console.log("if('JavaScript')");   // true

// false, undefined, null, 0, NaN, ''(빈 문자열)은 Falsy 값이며
// 이 외의 모든 값들을 Truthy 값이다.

 

3. explicit coercion (명시적 타입 변환)

개발자의 의도에 따라 값의 타입을 변환하는 것이다.

자바스크립트에서 기본 제공하는 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법, 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법이 있다.

 

String

// 문자열 타입으로 변환 String

// 1. String 생성자 함수를 new 연산자 없이 호출
console.log(String(10));
console.log(String(NaN));
console.log(String(Infinity));
console.log(String(true));
console.log(String(false));

// 2. toString() 메소드 사용
console.log((10).toString());
console.log((NaN).toString());
console.log((Infinity).toString());
console.log((true).toString());
console.log((false).toString());

// 3. 문자열 연결 연산자 이용 - 암묵적 변환 챕터에서 확인함
console.log(10 + '20');         // 문자열 연결 연산자

Number

// 숫자 타입으로 변환 Number

// 1. Number 생성자 함수를 new 연산자 없이 호출
console.log(Number('10'));
console.log(Number('10.01'));
console.log(Number(true));          // 1
console.log(Number(false));         // 0

// 2. parseInt, parseFloat 함수 이용 (문자열 -> 숫자만 가능)
console.log(parseInt('10'));
console.log(parseFloat('10'));
console.log(parseInt('10.01'));
console.log(parseFloat('10.01'));

// 3. + 단항 산술 연산자 이용 - 암묵적 변환 챕터에서 확인함

// 4. * 산술 연산자 이용
console.log('10' * 1);
console.log('10.01' * 1);
console.log(true * 1);
console.log(false * 1);

Boolean

// 논리 타입으로 변환 Boolean

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
console.log(Boolean('JavaScript'));     // true
console.log(Boolean(''));               // false
console.log(Boolean(1));                // true
console.log(Boolean(0));                // false
console.log(Boolean(NaN));              // false
console.log(Boolean(Infinity));         // true
console.log(Boolean(null));             // false
console.log(Boolean(undefined));        // false
console.log(Boolean({}));               // true
console.log(Boolean([]));               // true

console.log('----------------------------------');
// 2. ! 부정 논리 연산자를 두 번 사용하는 방법
console.log(!!'JavaScript');
console.log(!!'');
console.log(!!1);
console.log(!!0);
console.log(!!NaN);
console.log(!!Infinity);
console.log(!!null);
console.log(!!undefined);
console.log(!!{});
console.log(!![]);