[JS] data types, let/const/var, hoisting

let,var,const / block,global scope

let (added in ES6)

요즘은 ES6 이전 문법은 잘 쓰지 않는다.
let name -> hello
-> hi
-> yj

let name = 'yj';
// let이라는 키워드를 이용해서 name이라는 변수를 선언, 'yj'라는 변수의 값을 할당.
name = 'hi';
// name이라는 변수에 'hi'라는 값을 재할당.

block scope ({})

중괄호를 이용해서 코드를 블록안에 작성하면 블록 밖에서는 그 코드에 접근할수 없다.

{
	let name = 'yj';
	name = 'hi';
}
console.log(name); // 아무값도 나오지 않는다.

global scope

블럭을 쓰지않고 파일안에 바로 정의해서 쓰는 변수들
어느 곳에서나 접근이 가능하다. global한 변수들은 앱이 실행되는 순간부터 끝날때까지 항상 메모리에 탑재되어 있기 때문에, 가능하면 최소한으로 필요한 곳에만 쓰는것이 좋다.

let globalName=' global name';
{
	let name = 'yj';
	name = 'hi';
    console.log(name); //  괄호 안에서도 global name이 출력된다.
}
console.log(name); // 밖에서도 global name이 출력된다.

let vs var

대부분의 언어들은 변수를 선언하고 나서 값을 할당하는게 정상적인데,
javascript var에서는 변수를 선언하기도 전에 값을 할당하는게 가능하다.
심지어 값을 할당하기도 전에 출력도 가능하다.

console.log(age) // undefined
age = 4;
console.log(age) // 4
var age;

name = 4;
let name; //error 발생!!!!

이런 현상을 var hoisting이라고 한다.
hoisting은 어디에 선언했는가와 상관없이 항상 제일 위로 선언을 끌어올려주는 것을 말한다.

var를 사용하면 안되는 또 다른 이유

var은 block scope({})이 없다.
var은 block을 철저히 무시하는 키워드이다.

{
  age = 4;
  var = age;
}
console.log(age); // 4

block을 이용했는데도 불구하고 밖에서 선언해도 값이 출력이 된다.
즉 우리가 아무리 블록을 이용해서 변수를 선언해도 어디에서나 보일 수 있는게 바로 var이다.
어느정도 규모있는 프로젝트를 하다보면 선언하지도 않은 값들이 동작해서 문제가 발생할 수 있다.
따라서 let을 사용하는것을 권장한다.

const (constant)

const name -> yj
-/>
-/>
let은 mutable data type const는 unmutable data type
'favor immutable data type always'
즉 왠만하면 값을 할당한 뒤에 다시는 변경되지 않는 데이터 타입을 사용해라.
변수의 값이 계속 바뀌어야 할 이유가 없다면 const를 사용할것!!!!

variable types(변수의 타입)

primitive type

더이상 작은 단위로 나눠질 수 없는 하나의 아이템(single item)

• number
• string
• boolean
• null
• undefined
• symbol

object

single item을 여러개 묶어서 한단위로, 한박스로 관리해 주는것

function

first-class function
function도 다른 데이터 타입처럼 변수에 할당이 가능하고 또 함수의 parameter(매개 변수)로도 전달이 되고 함수에서 return type으로도 함수를 return하는 것이 가능하다.

number(숫자형)

javascript에서는 정수나 실수 어떤수던 상관없이 number 타입으로 할당이 된다.

number의 특별한 값

• infinity = 1 / 0
• negativeInfinity = -1 / 0
• NaN(not a number) = 'not a number' / 2

이것들 때문에 연산 할때는 값이 정말 유효한 값인지 확인하는 것이 중요하다.

문자열을 숫자로 바꾸는 함수

parseFloat('100.111') -> 100.111
문자열을 실수로 바꾸는 함수이다.

• 수로 시작할 때 그 수를 실수로 바꾼다.
• 띄어 쓰기로 여러 개의 수가 있으면 첫번째 수만 바꾼다.
• 공백으로 시작하면 공백은 무시한다.
• 수가 아닌 문자로 시작하면 NaN을 반환한다.

parseInt('100.111') -> 100
문자열을 정수로 바꾸는 함수이다.

• string을 n진법일 때의 값으로 바꾼다. n은 옵션으로 2부터 36까지 입력할 수 있다. 입력하지 않으면 10으로 처리한다.
• string의 처리는 parseFloat()와 거의 같다.
• 소수 부분은 버린다.
• 0x로 시작하면 16진법으로 처리한다.
  parseInt( '100', 2 ) : 100은 2진법으로 4다.
  parseInt( '0x100' ) : 100은 16진법으로 256이다.

Number("1.901") -> 1.901
문자열을 숫자형으로 바꾸는 함수이다.

string(문자열)

const char = 'c'; 
const brendan = 'brenden'; 
const greeting = 'hello' + brendan; 
console. log(`value: ${greeting}, type: ${typeof greeting}`) 
// value: hello brendan, type:string
const helloBob = `hi ${brendan}!`;
//template literals(string)
//`(백틱기호)를 이용해서 사용가능하다.
console.log (`value: ${helloBob}, type ${typeof helloBob}`);
// value: hi brenden, type: string
console.log ('value: ' + hellobob + 'type: ' + typeof helloBob);

template literals(string)

template literals를 사용하면 일반 따옴표를 사용하는것보다 해당 표현식을 쉽게 표기할 수 있다. 안에 spacing이나 문자열들이 그대로 나온다.
표현식을 ${…}로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어준다.

백틱을 사용하면 문자열을 여러 줄에 걸쳐 작성할 수도 있다.

let guestList = `손님:
 * John
 * Pete
 * Mary
`;

alert(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함

작은따옴표나 큰따옴표를 사용하면 위와 같은 방식으로 여러 줄짜리 문자열을 만들 수 없다.

boolean

false: 0, null, undefined, NaN, ''
true: 위를 제외한 모든값.

const canRead= true; //true라고 바로 값을 할당 가능
const test = 3 < 1;//이는 거짓이므로 false

null & undefined

null
null은 내가 명확하게 '텅텅 비어있는 empty값이야 '라고 지정하는것. 빈 객체

let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);
// value: nothing, type: null

undefined
값이 지정되어져 있지 않은것.

let x = undefined; // 직접 undefined라고 할당해도 되고 아무것도 넣지 않아도 된다.

symbol

map이나 다른 자료구조에서 고유한 식별자가 필요하거나 동시다발적으로 일어나는 코드에서 우선순위를 매길수 있어서 중요하다.

Dynamic typing : dynamically typed language

javascript는 선언할 때 어떤 타입인지 선언하지 않고 run time(프로그래밍이 동작할때) 할당된 값에 따라서 타입이 변경될수 있는 것.

let text = 'hello';
console.log(`value: ${text}, type: ${typeof text}`); 
//value:hello, type: string
text = 1;
console.log(`value: ${text}, type: ${typeof text}`); 
//value: 1, type: number
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);
//value: '75', type: string
text = '8'/'2';
console.log(`value: ${text}, type: ${typeof text}`);
//value: 4, type: number

object

const yj = {name: 'yj', age: 27};
yj.age: 28;

yj는 const키워드로 정의되어 있기때문에 다른 object로 할당이 불가하지만 yj object 안에는 name 과 age라는 변수들이 존재한다.
그래서 yj.name, yj.age 처럼 변경이 가능하다.

기본형(primitive type)과 참조형(reference type)

//기본형 변수 = 값
let x = 3;
let y = x;
console.log(x); // 3 
console.log(y); // 3
y = 5;
console.log(x); // 3
console.log(y); // 5

//참조형 변수 = 주소값
let x = {name: yj}
let y = x
console.log(x); // {name: yj}
console.log(y); // {name: yj}
y.birth = 1994
console.log(x); //{name: yj, birth: 1994}
console.log(y); //{name: yj, birth: 1994}

//참조형은 기본형과 달리 값이 바로 할당 되는게 아니라 변수로 가는 길이 할당된다. 따라서 y만 수정해도 x도 같이 수정되는 것이다.