TIL 4. let vs var, hoisting, data type

주민콩·2020년 10월 22일
0

JavaScript

목록 보기
1/3
post-thumbnail

let(ES6) / var

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

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

name-4;
let name; // error 발생 

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

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

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

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

block을 이용했는데도 불구하고 밖에서 선언해도 값이 출력이 된다.
즉, 우리가 아뭄리 블록을 이용해서 변수를 선언해도 어디서나 보일 수 있는게 바로 var이다.
따라서, var보다 변수는 let 사용하는것을 권장한다.

var hoisting !

어디에 선언했냐 상관없이 항상 위로 끌어올리는 것을 말한다.

const(constant)

let은 mutable data type, const는 immutable data type
즉, 값을 할당한 뒤에는 다시는 변경되지 않는 데이터 타입을 사용할 것 !
변수의 값이 바껴야 할 이유가 없다면 const를 사용한다.

variable types

primitive type

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

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

object

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

function

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

template literals(string)

template literals를(백틱 '') 사용하면 일반 따옴표를 사용하는 것 보다 해당 표현식을 쉽게 표기 할 수 있다. 안에 spacing 이나 문자열들이 그대로 나온다.
ES6에 추가된 템플릿 리터럴은 변수를 이용해 동적으로 문자열을 생성할 수 있는 문법이다.

boolean

false : 0, null, undefined, NaN(Not a Nymber), "
true : 위를 제외한 모든값.

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

null & undefined

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

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

undefined : 선언은 되었지만 값이 지정되어 있지 않은 것.

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

symbol

map이나 다른 자료구조 등 동시다발적으로 일어나는 코드에서 우선순위를 매길 수 있어서 중요하다.

const symbol = Symbol('id');
const symbol = Symbol('id');
console.log(symbol1 === symbol2);  // false 똑같아 보여도 엄연히 다르다.

똑같다고 표현하고 싶으면

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

Dynamic typing : dynamically typed language

object (mutable data type)

const jm = {name: 'jm', age: '25'};   // jm 이 object
jm.age: 27; // jm이라는 변수 안에 있는 age이기 때문에 jm뒤에 .을 찍어야 한다!

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

기본형(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: jm}
let y = x;
console.log(x); // {name: jm}
console.log(y); // {name: jm}
y.birth = 1996;
console.log(x); // {name: jm, birth: 1996}
console.log(y); // {name: jm, birth: 1996}
//참조형은 기본형과 달리 값이 바로 할당되는게 아니라 변수로 가는 길이 할당된다. 
  따라서 y만 수정해도 x도 같이 수정되는 것이다.
profile
코딩하면서 기록하는 메모장 ᰔ

0개의 댓글