변수(Variable)

💁‍♀️ 변수(Variable)란,
프로그램이 실행될 때 잠재적으로 변경 될 수있는 명명된 값

👀 데이터 타입

🙋‍ 잠깐 ! 자바스크립트의 데이터 타입은 무슨 특징이 있나요?
자바스크립트의 데이터 타입은 크게 원시 타입, 객체 타입으로 분류

• 원시 타입 : number, string, boolean, undefined, null, symbol
• 객체 타입 : 위 6가지 이외의 모든 타입 (객체, 함수, 배열 등)

1) number

숫자 타입은 모두 실수로 처리

var integer = 10;
var double = 5.5;
var negative = -10;

console.log(10 == 10.0); // true
console.log(10 / 4); // 2.5 출력 (실수끼리의 나누기이므로 소수점까지 처리)

2) string

var string;
string = 'JavaScript'; // 홑따옴표
string = "JavaScript"; // 쌍따옴표
string = `JavaScript`; // 백틱

string = '작은 따옴표로 감싼 문자열 내의 "큰 따옴표"는 문자열로 인식';
string = "큰 따옴표로 감싼 문자열 내의 '작은 따옴표'는 문자열로 인식";

[1] 템플릿 리터럴

💁‍♀️ 템플릿 리터럴이란,
ES6부터 도입 된 멀티라인 문자열, 표현식 삽입 등 편리한 문자열 처리 기능을 제공하는 문자열 표기법

◼ 일반 문자열 내에서는 줄바꿈이 허용 X

// var str = '안녕하세요.
// 반갑습니다';

var str = '안녕하세요.\n반갑습니다.'; 
// 이스케이프 시퀀스를 사용해야만 가능

◼ 백틱(템플릿 리터럴)을 사용하면 줄바꿈 허용, 모든 공백 적용

var multiline = `안녕하세요.
반갑습니다.
제 이름은 효연입니다.`
console.log(multiline); // 개행이 그대로 출력

var lastName = '조';
var firstName = '효연';

// 문자열은 문자열 연산자 '+'를 사용해 연결
console.log('제 Full Name은 ' + lastName + firstName + '입니다.');

// 표현식 삽입을 이용하면 문자열 연산자보다 가독성 좋고 간편하게 문자를 조합 가능
console.log(`제 Full Name은 ${lastName}${firstName}입니다.`); // 위와 동일한 출력 (백틱의 효과)

// 표현식 삽입은 반드시 백틱 내에서만 사용
console.log('제 Full Name은 ${lastName}${firstName}입니다.'); // 그대로 출력

3) boolean

자바와 동일한 성질

var flag = true;
console.log(flag);
flag = false;
console.log(flag);

4) undefined & null

// var undef = undefined; // 개발자가 의도적으로 변수에 할당하는 것은 지양
var undef;                // 자바스크립트 엔진이 변수 초기화 시 undefined 사용
console.log(undef);

// null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용
var nullVal = 'something';
nullVal = null; // 이전 참조가 제거되어 더 이상 'something'을 참조 X
console.log(nullVal);

5) symbol & object

💁‍♀️ symbol이란,
다른 값과 중복 되지 않는 유일무이한 값으로 이름 충돌 위험이 없는 객체의 유일한 프로퍼티

• 키 값을 만들기 위해 사용
• 심볼 외의 원시 값을 리터럴을 통해 생성, 심볼은 Symbol함수를 통해 호출하여 생성

typeof : 변수의 자료형을 확인할 때 사용

// 심볼 생성
var key = Symbol('key');
console.log(typeof key); // symbol 출력

// 객체 생성
var obj = {};

obj[key] = 'value'; // 심볼 key에 value라는 문자열을 담음
console.log(obj[key]); // value 출력

---

👀 동적 타입 언어

💁‍♀️ 동적 타입 언어이란,
데이터 타입을 사전에 선언하지 않는 것을 의미하며, 변수 선언이 아니라 할당에 의해 타입이 결정되고 재할당에 의해 동적으로 변수의 타입이 변화할 수 있음

• JavaScript는 동적 타입 언어

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

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

test = "I'm Joy";
console.log(typeof test); // string 출력

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

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

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 출력

---

👀 암묵적 형변환

1) to string

[1] 문자열 연결 연산자

문자열 타입이 아닌 피연산자를 문자열 타입으로 변환

console.log(10 + '20');

[2] 템플릿 리터럴 표현식 삽입

표현식의 결과를 문자열 타입으로 변환

console.log(`10 + 20 : ${10 + 20}`);

[3] 빈 문자열 추가

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 (Symbol은 문자열로 변환 불가능)
console.log({} + '');           // 객체 - "[object Object]"
console.log([] + '');           // 배열 - ""
console.log(function(){} + ''); // 함수 - "function(){}"

2) to number

[1] 산술 연산자

산술 연산자의 피연산자는 모두 숫자여야 하므로 숫자가 아닌 피연산자를 숫자 타입으로 변환
NaN : Not a Number

console.log(10 - '5');
console.log(10 * '5');
console.log(10 / '5');
console.log(10 % 'JavaScript'); // NaN
								// 피연산자를 숫자로 변환 불가 (연산 수행 불가)

[2] 비교 연산자

비교 연산자로 크기를 비교하려면 모두 숫자 타입이여야 하므로 숫자가 아닌 피연산자를 숫자 타입으로 변환
isNaN() : NaN은 비교연산자(==)대신 isNaN으로 확인

console.log(10 > '5');
console.log(10 > '20');
console.log(`10 > 'a' : ${10 > 'a'}`);  
// 문자는 모두 NaN으로 변환되기 때문에 NaN은 비교 연산자에서 어떤 값과도 비교 불가능
// 따라서 항상 false를 반환

/* 참고 */
console.log(`NaN == NaN : ${NaN == NaN}`); // false
console.log(`isNaN(NaN) : ${isNaN(NaN)}`); // true

[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

📌 Ref. 🔥중요🔥

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

3) to boolean

💁‍♀️ JavaScript 엔진은 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 => 정상 출력

📌 Ref. 🔥중요🔥

* false, undefined, null, 0, NaN, ''(빈 문자열)은 Falsy 값
* 이 외의 모든 값들은 Truthy 값

---

👀 명시적 형변환

1) to 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());

2) to 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] * 산술 연산자 이용

console.log('10' * 1);
console.log('10.01' * 1);
console.log(true * 5);  // 5 
console.log(false * 5); // 0

3) to 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

[2] ! 부정 논리 연산자를 두 번 사용

console.log(!!'JavaScript');    // true
console.log(!!'');              // false
console.log(!!1);               // true
console.log(!!0);               // false
console.log(!!NaN);             // false
console.log(!!Infinity);        // true
console.log(!!null);            // false
console.log(!!undefined);       // false
console.log(!!{});              // true
console.log(!![]);              // true