본문 바로가기
Front-End/JavaScript & TypeScript

data type, let vs var vs const, hoisting

by 두두리안 2022. 6. 11.
728x90

global let , let(mutable data type)

// 2.Variable 
let globalName='global name';
{
    let name='duduri';
    console.log(name); // duduri
    name='hello';
    console.log(name); // hello
}
console.log(name); //
console.log(globalName); // global name

globalName = 전역변수 ( 애플리케이션이 끝날때까지 메모리에 저장되어있다)

{ .. } 블럭밖에서 name 접근할 경우 값이 안나온다 (블록스코프)

{ .. } 블럭밖에서 globalName 접근할 경우 값이 나온다

 

var 를 지양하자 (호이스팅)

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

1. var는 선언하기도 전에 쓸수 있어 위험하다 (var hoisting)

2. 호이스팅 : 선언된값을 위로 끌어온다

3. 블록스코프 {} 를 무시한다

4. 프로젝트가 커질수록 선언되지않은 값이 할당될경우 위험하다

 

const (immutable data type)

// 한번 설정되면 값이 변하지 않는다
// 왠만하면 설정하고 값이 변하지않는걸로 사용한다 
const daysInWeek=7;
const maxNumber=5;

1. 보안성을 보장해준다

2. 동시에 값 변경을 막아준다

3. 실수를 줄여준다

 

variable types

primitive 타입 더이상 작은걸로 나누어 지지않는다

1. single item: number , string , boolean , null , symbol
2. object타입 한박스 단위로 나누어준다
3. function()
 

number

const count=14; // integer
const size=14.1; // decimal number
console.log(`value : ${count},type:${typeof count}`); // 14, number
console.log(`value : ${size},type:${typeof size}`); // 14.1, number

 

Infinity, -Infinity

// 무한대 숫자 Infinity
const infinity=1/0;
//  -Infinity
const negativeInfinity=-1/0;
// 숫자가 아닌값을 출력할때는 NaN으로 출력
const nAn='not a number' / 2;
console.log(infinity); // Infinity
console.log(negativeInfinity); // -Infinity
console.log(nAn); // NaN

 

bigInt

const bigInt=123456789456123123456789789456123n;
console.log(`vale: ${bigInt} , type:${typeof bigInt}`); // ..., bigint

 

string

const char='c';
const brendan='brendan';
const greeting='hello' +brendan;
const helloBob=`hi ${brendan}!`;

console.log(`value : ${greeting} , type : ${typeof greeting}`); // hello brendan, string
console.log(`value : ${helloBob},type : ${typeof helloBob}`); // hi brendan, string
console.log(`value:` + helloBob + 'type:' + typeof helloBob); // hi brendan, string

 

boolean

// fale: 0,null,undefined,NaN,''
// true: any other value
const canRead=true;
const test=3<1; //false
console.log(`value: ${canRead}, type: ${typeof canRead}`);// true, boolean
console.log(`value:${test}, type: ${typeof test}`);// false, boolean

 

null

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

 

undefined (선언되었지만 값은 없다)

let x;
console.log(`value: ${x}, type: ${typeof x}`);// undefined, undefined

 

symbol

const symbol1=Symbol('id');
const symbol2=Symbol('id');
console.log(symbol1===symbol2); //false

const gSymbol1=Symbol.for('id');
const gSymbol2=Symbol.for('id');
console.log(gSymbol1===gSymbol2); //true

console.log(`value ${symbol2.description}, type:${typeof symbol2}`) //id, symbol

 

Dynamic typing

let text='hello';

console.log(text.charAt(0)); //h
console.log(`value: ${text}, type: ${typeof text}`); // hello, string

text=1;
console.log(`value: ${text}, type: ${typeof text}`); // 1, number

text='7'+5;
console.log(`value: ${text}, type: ${typeof text}`); // 75, string

text='8'/'2';
console.log(`value: ${text}, type: ${typeof text}`); // 4, number ??

console.log(text.charAt(0));  // number 변했지만 text 가져올경우 타입에러 발생
// typescript 나오게됨

 

object

const duduri={name:'duduri' , age:20};
console.log(`value: ${duduri}`); //20
duduri.age=21;
console.log(`value: ${duduri}`); //21

 

참고자료

https://youtu.be/OCCpGh4ujb8

728x90

'Front-End > JavaScript & TypeScript' 카테고리의 다른 글

Web_components with Lit  (0) 2023.11.08
JavaScript 와 ECMAScript 의 탄생  (0) 2023.10.21
자바스크립트 메모리 관리  (1) 2023.10.03
async vs defer  (0) 2022.05.30