데이터타입, data types, let vs var, hoisting

변수란

• 변수(variable) = 변경될 수 있는 값 의미함
• 변수를 선언시 var, let, const 키워드를 사용. 하지만 var는 ES6 이후 권장하지 않음.
• const는 단 한 번만 할당 가능한 변수로 재선언, 재할당 모두 불가능 상수(constant)라 한다.
• 변수의 이름을 '식별자`라고도 한다.
  
  

var 키워드 대표적인 문제점

1. 변수 선언과 동시에 undefined 초기값으로 할당되어 진다.
2. 1번의 호이스팅에 문제로 인하여, 권장하지 않는 키워드이다.
3. 블록 레벨 스코프를 지원하지 않아, 전역 변수가 선언되는 부작용 발생

var 호이스팅 문제란?

호이스팅은 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 선언문이 동작되는 것 의미.

console.log(score); // undefined

var score;

var, let, const, function, funtion*, class 키워드를 사용시 모두 런타임 이전 단계에서 먼저 실행(호이스팅) 된다. 다만, 위 소스코드 처럼 console.log(score) 실행되는 시점에는 아직 var score 선언되기 이전이므로 참조 에러가 발생되는게 정상이지만, var 경우 undefined가 출력이 되는 문제로 개발 과정에서 혼란이 가중된다.

var 블록 스코프 문제란?

예를 들어 아래 for문 안 블록 스코프 벗어나 변수가 참조되는지 여부로 let과 다르게 var는 for문 안이든 밖이든 문제없이 i에 접근하여 값을 출력한다.

let

for (let i = 0; i < 10; i++) {}
console.log(i); // i is not defined

var

for (var i = 0; i < 10; i++) {}
console.log(i); // 10

상수(const)

읽기만 가능한 즉 변경할 수 없는 변수값을 지정하는 것으로 크게 3가지에 장점을 가지고 있다.

1. Security : 해커들이 코드 조작을 방지 할 수 있어 보안성이 높다.
2. Thread-safe : 동시에 함수를 호출하여 실행이 되더라도 수행 결과가 올바로 나오도록 한다.
3. Reduce human mistakes : 협업상에서 실수를 줄일 수 있다.

const result = 10;
result = 100; // Type Error

---

스코프

블록 스코프

• 블록 스코프(block scope)는 코드 내에서 중괄호{}로 둘러싸인 부분을 말한다.
• 블록 내에서 정의된 변수를 블록 외부에서는 접근할 수 없다.
• 블록 내에서 선언된 변수를 "지역 변수"라 하며, 유효 범위 블럭 안에서 정의된다.

{
  let name = "ellie";
  console.log(name); // ellie
}
console.log(name); // 아무값도 출력되지 않는다.

글로벌 스코프

• 변수가 전역 범위에서 선언된 경우 글로벌 스코프(global scope)라 한다.
• 전역 범위로 선언된 변수를 "전역 변수"라 한다.
• 전역 변수는 블록 내부에 바인딩되어 있지 않아 어떤 블록에서도 접근이 가능하다.

let name = "ellie";
{
  console.log(name); // ellie
}
console.log(name); // ellie

---

데이터 타입

변수(variable)가 메모리에 저장되는 방식은 원시(primitive) 타입과 또는 객체(object) 타입 두 가지로 구분한다.

구분	데이터 타입	설명
	숫자 타입	숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재
	문자열 타입	문자열
원시 타입	undifined 타입	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
(primitive type)	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	심볼 타입	ES6에서 추가된 7번째 타입
객체 타입 (object Type)		객체, 함수, 배열 등

primitive, object 차이

• primitive : 값(value) 자체가 메모리에 저장됩니다.
• object : 값(value) 크기로 인하여 object가 가르키는 참조(reference)가 메모리에 저장됩니다.

---

number

infinity

양의 number 타입을 0으로 나누거나, 음의 number 타입을 0으로 나눌때 결과

const infinity = 1 / 0;
console.log(infinity); // Iinfinity
const negativeInfinity = -1 / 0;
console.log(negativeInfinity); // -Iinfinity

NaN(not a number)

숫자가 아닌 것을 number와 연산을 했을 경우

const num = 2 * 2;
console.log(`${typeof num} : ${num}`); // number : 4
const nAn = "string" * 2;
console.log(`${typeof nAn} : ${nAn}`); // number : NaN

---

템플릿 리터럴

• 백틱(backtick) 코드( ` )를 사용하여 문자열을 작성한다.
• 특수문자열을 사용하지 않고 멀티라인 문자열을 지원하여 줄바꿈(개행)이 가능하다.
• 표현식 삽입으로만으로 + 연산자 없이 문자열 연결 연산자로 동작된다.

console.log("1 + 2 = " + (1 + 2)); // 1 + 2 = 3
console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3

개행이란?

일반 문자열에서는 줄바꿈 넣으면 토큰(token)에러가 발생된다. 개행이 필요한 경우 이스케이프 시퀀스(escape sequence)를 사용하거나, 템플릿 리터럴 표기법으로 표현해야된다.

토큰(token) 에러

var string = 'Hellog
World'
console.log(string);
// Invalid or unexpected token

템플릿 리터럴 이용한 개행 출력시

var string = `<p>Hello
World</p>`;

Hello
World

이스케이프 시퀀스 이용한 개행 출력시

var string = "<p>Hello \n World</p>";

Hello
World

표현식

표현식을 삽입하려면 ${}으로 표현식을 감싼다. 표현식 결과는 문자열이 아니더라도 문자열로 취급된다.

var first = "ji-hun";
var last = "jang";

console.log(`My name is ${first} ${last}.`); // My name is ji-hun jang.

---

boolean

불리언 타입(boolean type)의 값은 논리적 참(true), 거짓(false)뿐이다.

• false = 0, null, undefined, NaN, ''
• true = false를 제외한 모든 값

연산자 불린값

연산자를 이용하여 어떤 조건이 참(true)인지 거짓(false)인지를 나타내기 위해 사용된다.

1 > 2; // false
true && false; // false

자세한 내용 : https://helloworldjavascript.net/pages/150-boolean.html

---

null, undefined

null

• null은 변수에 값이 없다는 것을 의도적으로 명시 할 때 사용
• 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 Null 반환한다.

var foo = null;
console.log(foo); // null
console.log(Boolean(foo)); // false

var element = document.querySelector(".myClass"); // .myClass란 노드는 없는 상태임
console.log(element); // null

undefined

• undefined를 직역하면 "정의되지 않은"이다.
• 변수 var가 선언은 되어 있지만 값이 지정되지 않은 상태임

var foo;
console.log(foo); // undefined
console.log(Boolean(foo)); // false

undefined는 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값으로 개발자가 의도적으로 변수에 undefined를 할당하는 것은 본래 취지에 어긋난다. 변수가 없다는 것을 명시하고자 하는 경우 null 할당하는 것이 정확하다.

---

동적 타이핑

C, Java에 정적 타입 언어로 경우 변수를 선언할때 데이터 타입을 사전에 선언한다.

char str // string
int num // number

자바스크립트는 변수를 선언할 때 타입을 선언하지 않으며, 값이 할당하는 시점 변수의 타입이 동적으로 결정되고 변수의 타입은 언제든지 자유롭게 변경(재할당)할 수 있다.
그래서 자바스크립트는 동적 타입 언어라 한다.

var foo = "Hello";
console.log(`typeof ${foo}`); // string

foo = 3;
console.log(`typeof ${foo}`); // number

동적 타입 언어 주의사항

암묵적 타입 변환 같은 문제로 동적 타입 언어는 유연성은 높지만, 신뢰성은 떨어지므로 다음과 같은 사항을 주의하자.

1. 변수는 필요한 만큼 최소한으로 유지하도록 한다.
2. 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수 부작용을 억제한다.
3. 전역 변수는 최대한 사용하지 않는다.
4. 변수보다는 상수를 사용해 값 변경을 억제한다.
5. 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다.