TIL 4. let vs var, hoisting, data type

rhdwnals1·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
love myself ᰔ

0개의 댓글