자바스크립트 기초 2

테루·2020년 12월 4일

JavaScript js 자바스크립트

JavaScript 기초

목록 보기

2/7

Data, Types, let vs var, hoisting

Variable

변수(variable)이란 하나의 상자와도 같다
물건을 넣거나 보관하는 용도로 사용된다.

상자와 변수의 차이점은 상자는 물건을 보관하지만 변수는 데이터를 보관한다.

먼저 변수 let과 var를 비교하기 전에 Hoisting에 대해 설명하겠다

Hoisting이란?

변수의 선언문을 유효범위의 최상단으로 끌어올리는 행위를 말한다 =>선언과 할당의 분리라고 생각하면 좋을 것 같다.

함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행시킨다 .

함수 블록 { } 안에서 유효하다.

즉 함수 내에서 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.

실제로 코드가 끌어올려지는 것은 아니며 자바스크립트 parser내부적으로 끌어올려서 처리하는 것이다.

실제 메모리에서는 변화가 없다.

var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다.

var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지않는다.

if(ture){
 var name = 'youddomack';
 }
 console.log(name);

위의 코드를 호이스팅에 의해 아래와 같은 코드로 변환된다.

var name;
if(ture){
name = 'youddomack';
}
console.log(name);

Let

let name = "ellie";
name = "doyeon";

let으로 변수의 값을 저장하고 나중에 그 변수의 값을 바꾸는 게 가능하다

Const

const는 let과 다르게 한번 값이 할당되면 값은 절대 바뀌지 않는다. 값이 계속 변경될 수 있는 것을 mutable 데이터 타입이라고 하는데 let 이 mutable데이터 타입이고 const는 immutable데이터 타입이라고 한다.

Block scope { }

{ }안에 생성된 변수들은 { }밖에서는 사용이 안된다.

{ } 안에 정의하지않고 바깥쪽에서 선언한 변수는 global scope라고 해서 어디에서든 사용이 가능하다

global scope은 어플리케이션이 시작할때부터 끝날때 까지 항상 메모리에 탑재 되어 있기 때문에 최소한으로 사용하는 것이 좋고 사용할때도 되도록이면 class, 함수, if, for문에서 사용하는 것이 좋다.

Variable types

Primitive single item

number, string, boolean, null, undifined

Object

function, frist-class function

object는 single아이템들을 여러개 묶어서 하나의 상자로 관리하게 할 수 있게 해주는 것이다

first class function

javascript에서는 함수를 객체로 취급하고 다른 변수나 객체 및 배열에 저장할 수 있고 함수를 가져오거나 반환하거나 둘 다 수행 할 수 있다.

Number

javascript에서는 number를 따로 선언하지 않아도 된다.
자바스크립트에서는 타입이 다양하게 결정이 되기 때문에 단순히

let a = 1;
let b = 2;

이렇게 설정하면 된다

나중에 javascript를 배운다음 좀 더 type에 대해서 자세하게 사용하려면 typeScript를 배우면 된다.
TypeScript는

let a: number = 12;
let b: number = 20;

이렇게 된다.
String

백틱을 이용한 String출력(요즘엔 거의 이것만 사용하는 것 같음)

console.log(`value:${함수}`)

Boolean

false: 0,null, undefined, Nan
true: 이 외 다른 값들

그냥 변수로 const test = false; 설정해도 되고
const test = 3<1;
이렇게 값이 평가 되어서 false로 되게 설정해도 된다.

null과 undifined의 차이

null은 아무것도 없는 텅텅빈 값이라고 하면

undifined는 선언은 되어있지만 값이 아무것도 할당되어있지 않은 것을 말한다

Nan은 Not a number라고 숫자가 아니라는 것을 의미한다

Symbol

맵이나 다른 자료구조에서 고유한 식별자가 필요하거나 동시 다발적으로 일어나는 코드에서 우선순위를 주고싶을때 사용된다.

const symbol1 = Symbol("id");
const symbol2 = Symbol("id");

Symbol은 고유식별자 이기 때문에 설령 내부 String을 같게 하더라도 둘을 비교하면 false값이 나오게 된다.

혹시 같은 심볼을 선택하고싶다면

const symbol2 = Symbol.for("id");

Symbol.for()을 사용하면 된다.

Symbol.for()은 매 호출마다 새로운 심볼을 만들지 않고 현재 레지스트리에 해당 키를 가진 심볼이 있는지 먼저 검사를 한다.
있다면 그 심볼을 반환하고 만약 키에 해당하는 심볼이 없다면 Symbol.for()는 새로운 전역 심볼을 만들것이다..

Dynamic typing

~~(드림코딩 엘리님 유튜브에서 허락맡고 가져왔습니다!)~~

자바스크립트는 동적 타이핑 언어로 타입지정 없이 값이 할당되는 과정에서 값의 타입에 의해 자동으로 타입이 결정된다.

위의 사진처럼 String값에 number를 더하게 되면 number값이 String값으로 변하게 되서 두 String값이 하나로 합쳐진다.
또 두 String값을 나눌때 그 안의 값이 숫자일 경우 두 값을 나누게 되면 저장되는 것은 String이 아닌 number 즉 숫자이다.