[JS]데이터타입, 변수(var,let,const)

고정원·2021년 6월 8일

1Q/1Day

목록 보기

1/13

JS의 데이터 타입과 ES6 기초문법

1. 'use strict';

ES5에 추가되었고, JS는 매우 유연한 언어이다. 때로는 너무 유연할 때도 있는데 js파일의 제일 처음에 'use strict' 문구를 추가하면 오류들을 잡아준다. 잊지말고 추가해 주기!

2. Variable

: 앱을 실행하면 앱마다 쓸 수 있는 메모리가 할당되는데, 텅텅 비어있는 박스인 메모리는 앱마다 제한적으로 할당된다.

변수는 원칙적으로 선언 후에 값을 할당되어야 한다!!!

그러나...!!

📍var( don't ever use this!)

변수 선언시 var키워드를 사용하면 변수 선언도 전에 값을 할당 할 수 있고, 실행시킬수도 있다. 또한 { block scope }을 무시하기 때문에 아무리 우리가 변수를 블록스콥 깊숙히 넣어놔도 어디서든 불러올 수 있어서 에러나기 아주 좋다~

//good 선언 후 할당
var = age;
age = 4; 
console.log(age) //4

//bad 선언 전에 할당가능
name = 'hi'; //hi
var = name; 
//할당 전에 출력가능
console.log(job) //undefined → 에러가 아니라 undefined값이 출력

//📍똑같이 let에서 선언전에 할당하면?
name = 'hi';
let name;
//🔥Uncaught ReferenceError에러 발생 → 이렇게 에러뜨는게 정상🔥

하여 ES6에 추가된 let 과 const 키워드를 사용하여 변수를 선언하는 것이 바람직하다.

Variable, (read/write) - mutable

📍let (mutable) - 변수설정, 변수 재할당 가능

let 키워드를 사용해서 name이라는 변수를 정의하면, 한 개의 메모리를 가리킬 수 있는 포인터가 생기게 되는 것이다.

그래서 이 name이라는 변수가 가리키고 있는 메모리 어딘가에 우리가 'GOGO'라는 값을 저장할 수 있다.

let name;
name = 'GOGO';
console.log(name); // GOGO
🤓변수가 재할당되어져야 할때만 let키워드를 사용하길 권장한다.

Constant, (read only) - immutable

📍const - 변수, 재선언, 재할당 모두 불가능

보안,쓰레드안전성,실수 등을 줄이기 위한 이유로 되도록이면 const 키워드를 사용하는 것이 바람직하다.
→ use const whenever possible!
→ favor immutable date type always for a few reason

*Immutable data types: premitives types, frozen objects(i.e. object,freeze()

*Mutable data types: all objects by default are mutable in JS

3.Variable types 데이터타입

타입별 메모리에 할당되는 방법은 primitive 타입은 값 자체가 별로 안크니까 메모리에 바로 할당된다. 반면 object타입은 너무 커서 한번에 메모리에 할당되지 않고, 오브젝트의 레퍼런스(ref)가 메모리에 저장된다.

→ const Go = { name: 'go', age: '20' }
: const를 사용하여 오브젝트 변수를 생성하면 해당 오브젝트는 변경불가하지만,
  오브젝트변수를 가르키는 ref가 메모리에 저장됨으로써 변수의 key와 value를 변경 할 수 있다.

3.1 primitive, single item : number, string, boolea, null, undefined, symbol

: JS에서는 number라고 타입을 선언하지 않아도 된다.

Special numeric values

3가지(special numeric values: infinity, -infinity, NaN)처럼 무한의 값이 나 오면 Error!!

→ 나누고자하는 값이 유한한 값이 아닌경우, 위치값(좌표)을 계산하는 작업에서 📍에러가 난다.

const infinity = 1 / 0;
const negaticeInfinity = -1 / 0;
const nAn = `not a number` / 2;
console.log(infinity);
console.log(negaticeInfinity);
console.log(nAn);

bigInt( fairly new, don't use it yet)

const bigInt = 12345284655225551111111n; //over (-2**53) ~ 2*53)
console.log(`<value: ${bigInt}, type: ${typeof bigInt}`);

String

const char = 'c';
const brenden = 'brenden';
const greeting = 'hello' + brenden; //문자열 더하기 
console.log(`value: ${greeting}, type: ${typeof greeting}`);

🤩template literals(string) ${ } 백틱기호와 달러사인 => string + 변수

const helleBob = `hi ${brenden}!`;
console.log(`value: ${hellBob}, type: ${typeof hellBob}`); // template literals(string) o
console.log(`value: ` + greeting + 'type: ' + typeof greeting);//template literals(string) x

boolean

→ false: 0, null. undefined, NaN, ''

→ true: any other value

//null : 확실하게 값이 없는 상태 
let nothing = null;
console.log(`value: ${nothing}, type:${typeof nothing}`);

//undefined : 선언은 되었지만 아무것도 값이 할당되어 있지 않은 상태, 그래서 값이 비어있는지 어쩐지 정해지지 않은상태
let x;
console.log(`value: ${x}, type:${typeof x}`);