Javascript 3 (데이터타입, data types, let vs var, hoisting)

Henrique·2023년 2월 21일

목록 보기

7/8

저번 시간에 main.js였던 파일이름 variable.js로 변경해주고
html파일에서도 연결 variable로 해주기
역사시간에 let이나 class나 이랬던 것은 ES6에 포함되었다는 것을 가르쳐 주었었음.
ES6를 가르쳐줄게! -> 그냥 js를 가르쳐줄게라는 것과 똑같은 말임.

let을 통해서 name을 declaration 했음. 선언함과 동시에 바로 ellie라는 변수 값을 할당한 것임. -> 출력해보면

이렇게 콘솔 창에 ellie가 나오는 것을 볼 수 있음.

그리고 나서 name에 다시 hello라는 값을 다시 할당하면 console창에 hello로 변경되어서 나오는 것을 볼 수 있음.

-> Application을 실행하게 되면 application마다 쓸 수 있는 메모리가 할당되게 된다.
이 메모리는 텅텅 비어있는 박스들임. applicaiton마다 쓸 수 있는 박스들의 갯수가 제한적으로할당되게 된다. let이라는 키워드를 통해서 name이라는 변수를 정의하게 되면 한가지의 박스를 가르킬 수 있는 포인터가 생기게 된다.
그리고 그 박스에 ellie 라는 값이나 hello와 같은 값을 저장할 수 있는 것이다.

코드를 블럭안에 작성하게 되면 block 밖에서는 블록 안에 있는 내용을 볼 수 없음. 즉, console log를 이용해서

이렇게 입력하면 아무것도 나오지 않는 것을 알 수 있음.

Global Scope

반대로 이렇게 블럭을 쓰지 않고 File안에 바로 정의해서 쓰는 변수들을 Global Scope이라고 한다.

얘네는 어디에서나 접근할 수 있음.
이렇게 블록 밖에서 출력해도 보이고, 당연히 블록안에서도 출력하면 보인다.

Global한 변수들은 application이 실행되는 순간부터 종료되는 순간까지 항상 memory에 탑재되어 있기 때문에 최소한으로 쓰는 것이 좋고, 가능한 class나 함수, if나 뽈루(?for look인가) 같이 필요한 부분에서만 정의해서 쓰는 것이 좋다고 한다.

let

js에서 변수를 선언할 수 있는 키워드는 딱 하나, let이다. ES6에 추가된 것임.
그 전에는 var을 썼었음. (아직도 쓰면 안됨)
var은

var에서는 조금 미친 행동을 할 수 있음. 보통 변수 선언하고나서 값을 할당하잖아.
근데 js var에서는 선언도 하기 전에 값을 할당할 수 있음.
값을 할당하기 전에도 출력할 수 있음.

이렇게
근데 변수 정의는 되어있지만 값이 아직 안되어져 있네? 이렇게 뜨는거임.
근데 값을 정의하고 console.log해서 띄워보면

이렇게 뜨는 것을 볼 수 있음.

let을 이용해서 똑같이 한다면 error가 나오는 것을 볼 수 있음.

즉, 값을 선언하기도 전에 쓸 수 있는 것임.
이것을

var hoisting

이라고 하는데 가끔 면접에 가면 이것에 대해 물어보는 경향이 있음.
A : 어디에 선언했는지에 상관없이 항상 제일 위에 선언을 끌어올려주는 것을 말합니다.
(hoisting: 끌어올리다 라는 뜻을 가지고 있음.

지금은 우리가 이 변수를 file 제일 상위에, 즉 Global Scope을 이용해서 선언했음. 즉, -> file 제일 위로 선언이 올라가게 됨.

그래서 지금 우리가 여기서 age를 출력하면 undefined로 뜨는 것을 볼 수 있음.

var를 쓰면 안되는 또다른 이유 = block scope이 없음.

그 말인 즉슨 얘네는 block을 철저히 무시하는 애들임.

block 안에다가 선언했음에도 불구하고 block 밖에서 console.log 하면 4가 뜬다.

초창기에는 이런 유연성을 통해서 금방금방 프로그램을 대충 짜도 동작하는 program을 만들었지만, 어느정도 규모있는 프로젝트 하다보면 선언하지도 않은 값들이 막 할당되고 그런 이상한 일들이 발생함. -> var 때문임. 이런 것 때문에 let이 나온 것임.

굳이 var을 쓸 필요가 없는 것이지.

compatibility를 봐야지 근데 요즘 major 브라우저에서는 거의 지원 된다ㅏ.

Const (Constants)

값을 할당하면 값이 절대 바뀌지 않는 아이를 말한다.

우리가 변수를 이용하면
이 변수가 메모리 어딘가에 할당된 박스를 가르키고 있어서 포인터를 이용해서 값을 계속 바꿔나갈 수 있었음.

그런데 이 constants는 가리키고 있는 이 포인터가 잠겨있음. 그래서 값을 선언함과 동시에 할당한 뒤로는 절대 다시는 값을 변경할 수 없는 것이 바로 constants임.

값이 계속 변경될 수 있는 것을 Mutable data type이라고 한다.
그 반대는 Immutable~

그래서 개발자들이 하는 말들이 있음. 웬만하면 값을 할당한 다음에 다시는 변경되지 않는 그런 data type을 사용하라는 말임.

정말 좋은 이유들이 많이 있음.

그 중에 좋은 이유 3가지를 뽑아보자면 보안상의 이유임.

mutable data면 해커들이 값을 자기 마음대로 막 바꿀 수가 있음.
thread safety -> 어플리케이션이 실행되면 한가지 프로세스가 할당이 되고 극 프로세스 안에서는 또 다양한 thread가 동시에 돌아가면서 application을 조금 더 빠르고 효율적으로 동작할 수 있도록 도와준다. -> 다양한 thread들이 동시에 변수에 접근해서 값을 변경할 수가 있는데
이 동시에 값을 변경한다는 것은 위험한 것.
앞으로 변수가 크게 변경될 일이 없다면 const를 이용해서 변수를 작성해 주는 것이 좋음.
3.나중에 내가 코드를 바꾸거나 다른 개발자가 코드를 바꿀때도 실수를 방지할 수 있음.

정리하자면

js에선 변수를 선언할 때 이렇게 두가지가 있다는 말임.

4. Variable types

js에는 데이터 타입에는 어떤 것들이 있는지 알아보자.

어떤 프로그래밍 언어든 primitive type과 object type 두가지로 나뉘어져 있음.

primitive type은 더이상 나누어질 수 없는 한가지 타입을 말한다.
여기에는 캡쳐에 number~symbol까지임.
object type은 이 single item들을 묶어서 한 단위로 (한 박스로 ) 묶어서 관리할 수 있는 것임.

Javascript에서는 이 function도 data type 중에 하나임.

우리 프로그래밍 언어는 first-class function이 지원이 돼! 이 말은 이 프로그래밍 언어에서는 function도 다른 데이터 타입처럼 변수에 할당이 가능하고, 또 그렇기 때문에 함수의 parameter(인자)로도 전달이 되고 함수에서 return타입으로도 function을 return할 수 있는 것이 가능함 -> first-class function이라고 부른다.

JS만 보는 것보다 다른 언어도 보는게 좋으니

c언어를 가져와 볼게

low level인 언어 -> 개발자들이 프로그래밍을 짜면서 조금더 세세하게 메모리를 관리할 수 있음. -> 내가 이정도 사이즈의 숫자와 관련된 인수만 보더라도 저렇게 short int long~ 엄청 다양한 것을 알 수 있음. short int long 같은 것은 정수를 할당할 때 쓰고, float이나 double같은 아이들은 소수점을 가진 아이들 실수들을 할당할 때 많이 쓴다.
내가 얼마나 큰 data를 담냐에 따라서 이중에서 아느것을 쓸건지 사전에 생각을 잘해서 변수를 할당해야 한다.
만약 내가 한 반에 들어갈 학생 수를 정의하는데에 long을 쓴다면 엄청나게 많은 메모리를 낭비하는 것. 한 반에 학생수가 그렇게 많지는 않잖아.
그 때는 short 아니면 int를 쓰는 것이 적합함.

Java에도 숫자에만 관련된 데이터 타입이 굉장히 많음.

그래서 작성 전에 얼마나 큰 양의 데이터를 저장해야하는지 생각한 다음 선언해야 한다.

그런데 JavaScript에서는??

이거 하나면 숫자는 끝난다!!

얼마나 큰 사이즈 할당할건지 생각할 필요가 전혀 없음.

심지어 js에서는 number이라고 데이터타입을 선언하지 않아도 된다.
왜냐하면 js에서는 type이 다이나믹하게 결정이 되기 때문에
let a
let b
이렇게 어떤 숫자든 할당해주면 끝

js 배운 다음에 typescript 배우라고 했잖아요! type script는 어때요??

type scrip 에서도 number이거 하나면 충분하다. 그대신 number라고 이렇게 type을 명확하게 명시해서 작성을 해야하는 것임.

이렇게 js에서는 integer (정수) 또는 decimal number (소수점 숫자) 이렇게 상관없이 number type으로 할당이 된다. 여기에 보면 값에 상관없이 type은 number로 나오는 것을 볼 수 있음.

하지만 이 number에서도 조금 특별한 값이 미리 정해져있음.

대부분의 프로그램에서도 적용되는 것.

숫자를 0으로 나누면 무한대의 숫자값이 생기는 것을 볼 수 있음.
그것을 infinity라고 부름. 이렇게

positive한 값을 0으로 나누면 infinity가 되고
minus negative value를 0으로 나누면 negative infinity가 나온다.

그리고 하나 더, 숫자가 아닌 경우 (string)을 나누게 되면 NaN이라는 것이 나오게 된다.

이렇게 3개의 값은 특별한 숫자의 값이고, 이것이 중요한 이유는 나중에 우리가 DOM 요소를 js를 이용해서 position을 바꾼다던지 뭔가 다양한 계산을 해야할때 나누고자 하는 값이 0인지 아닌지 숫자인지 아닌지 확인 안하고 바로 연산하면 infinity나 Not a Number (NaN)이 뜰 수도 있음.
-> 사용자가 에러가 발생도 할 수 있음 -> 연산할 때 그 값이 정말 valid한 값인지 확인하고 연산하는 것이 중요. -> 실제로 현업에서도 이거때문에 에러발생 경우 가끔 있음.

할까말까 했는데 이것도 하면 좋아서.

js에서 number는 -2의 53승 부터 2의 53승 까지 이정도 범위의 숫자만 표현이 가능함.
최근에 big int라는 타입이 추가되었음. 그래서 숫자에 젤 마지막에 n만 붙이면
바로 big int로 간주되어진다.
log창에 big int라고 뜨는 것을 볼 수 있음.
근데 나온지 얼마 안되어서 지금은 chrome이랑 firefox에서만 지원된다.
그리고 프로그래밍하면서 이런 큰 숫자를 다루는 경우가 많지는 않음 (걍 추가된 것을 알려주는 것이었음)

number다음으로 알아볼 것은 string

String

string은 다른 프로그램 언어에서는 한 가지의 character만 들어있는 data type이 따로 있지만, js에서는 감사하게도 한가지의 글자든 여러개의 글자든 다 string type으로 할당이 된다.
일반 string과 다른 변수를 + 기호를 사용해서 string을 붙이는 것도 확인이 된다.

둘이 붙어서 console 창에 출력되는거랑 type도 string으로 출력되는 것을 볼 수 있음.

그리고 많이 쓰이는게

Template literals 라는 것인데(또는 Template string이라고 불림)

이렇게 백틱 기호를 이용해서 원하는 string을 적고 dollar sign과 기호를 이용하면 변수의 값이 자동적으로 붙어서 나오는 것을 볼 수 있음.
이렇게 나온다.

plus 기호를 사용하는거랑 tempalte literals를 사용하는 것의 차이는
plus는 court안에 일일이 넣어서 +해야되고 그런 번거롭지만
벡틱을 이용하면 안에 중간에 쓰여진 spacing이나 문자열들이 그대로 나와서 간편하게 string을 만들 수 있음.

다음은

Boolean값임.

이미지에 false나 true로 간주되는 값들이 있음.

null , undefined (둘이 비슷하지만 다른 아이)

null이라고 하면 내가 명확하게 텅텅비어있는 empty 값이야하고 지정해주는 것.

반대로 undefined는 선언은 되었지만 아무 값이 지정되지 않은 것. (텅텅 비었는지 값이 뭐가 있는지 그런게 정해지지 않은 상태)

이렇게 undefined라고 할당해도 되고, 아무 것도 적지 않아도 undefined 상태가 된다

primitive type의 마지막

Symbol

나중에 map이나 다른 자료구조에서 고유한 식별자가 필요하거나 동시 다발적으로 conquerent 하게 일어날 수 있는 그런 code에서 우선순위를 주고싶을 때 정말 고유한 식별자가 필요할 때 쓰이는 아이이다.
간혹 식별자를 string을 이용해서 쓰는 경우도 있음.
string은 다른 모듈이나 다른 파일에서 동일한 string을 썼을 때 동일한 식별자로 간주한다.

하지만, 반대로 symbol같은 경우에는 이렇게 동일한 id를 이용해서 symbol을 만들었지만 이 두가지의 symbol은 다른 경우임.
만약 이것이 동일한지 아닐지 검사를 해보면

아니라고 나오는 것을 볼 수 있음.

그래서 symbol은 동일한 string을 작성했어도 다른 symbol로 만들어지기 때문에 주어지는 string에 상관없이 고유한 식별자를 만들때 사용되어 진다.
나중에 프로그램할 때 유용하게 쓸 수 있음.

String이 똑같다면, 동일한 symbol을 만들고 싶다 라면 이렇게 동일한 symbol을 만들어줘 해서 두가지가 똑같다고 나오는 것을 볼 수 있음.

그리고 symbol은

바로 출력하면 이렇게 에러가 발생하게 된다.

항상 .description을 통해서 string으로 변환한 후 출력을 해야한다.

Dynamic Typing (Javascript의 하이라이트)

C언어나 Java 언어는 Statically type language임. -> 변수 선언할 때 어떤 타입인지 결정해서 type을 같이 선언했던 반면에 Javascript는 선언할 때 어떤 타입인지 선언하지 않고 Runtime -> 프로그램이 동작할때 할당된 값에 따라서 type이 변경될 수 있다는 것을 이야기한다.

이런 Dynamic Typing 언어는 내가 좋은 아이디어가 있어 빠르게 프로토타입을 하고 싶을때는 정말 유연하게 쓸 수 있는 언어이지만, 다수의 엔지니어들이 규모가 있는 프로젝트를 만들 때 dynamic typing 때문에 발등에 불똥 떨어지는 일이 한 두가지가 아닐 수도 있음. -> 그것을 예제를 통해서 보여주고 싶음.

변수와 type에 대해서 이해하는 시간이 될 것임.

이렇게 hello라는 string을 할당하게 되면 이 text는 바로 string이라는 변수가 되는 것을 볼 수 있음.

하지만 얘를

text에 다시 숫자 1을 담으면 어떻게 될까??

type이 number 숫자로 변경이 되었음.

만약이 text에 string 과 number 5를 더해버리면
5까지 string으로 바꿔서 string과 string을 합쳐지는 것으로 만들어버림.

반대로 string과string을 나누면 이때는 js 엔진이 뭐야 숫자들을 나눌 수 있는 나누기 연산자를 썼네?? 그리고 string안에 들어있는 것은 실제로 숫자들이잖아? 하면서 숫자 연산을 해버림.

여기서 진짜 위험한 것을 보여줄게
많은 개발자들이 text라는 변수 이름을 통해서 string의 타입을 예상하고 있음. 그래서 아 나는 제일 첫 번째에 있는 character를 받아와야지! 이렇게 생각함.

프로그래밍 언어에서 indexing은 항상 0부터 시작.
당연히 0번째니까 첫번째 h가 출력이 된다.

중간에 누군가가 type을 숫자로 바꿔버렸네? 근데 나중에 개발자가 string인 것으로 이해해서 이렇게 함수를 부르게 되면 에러가 발생.
이렇게 js는 런타임에 의해서 type이 정해지기 때문에 이것때문에 error가 runtime으로 발생하는 경우가 굉장히 많음. 그래서 dynamic typing 때문에 하도 뒤통수를 많이 맞아서

이렇게 Type Script가 생김. js 위에 type이 더 올려진 언어임.

-> 우리가 js를 배울 것이 아니라 Type Script를 더 먼저 배워야하는 것이 아닌가요? 라고 질문할 수도 있음. 아님. Type Script는 js 위에 type이 올려진 언어이기 때문에 우리가 js를 배우고 TS로 넘어가도 됨. 그리고 js는 브라우저가 이해할 수 있어서 브라우저에서 실시간으로 볼 수 있지만,

TS는 결국 browser가 이해할 수 있는 js로 trans compiler를 이용해야함. 이렇게 실시간으로 볼 수 있는게 어렵기 때문에 일단 js를 충분히 배우고 난 뒤에 TS를 배우면 된다. 그리고 배우는데도 오래걸리지 않음.

깜빡하고 primitive type만 알아보고 object랑 function에 대해 언급을 안함. -> 너무 중요해서 나중에 영상으로 따로 알려줄 것.

object는 우리가 일상에서 보는 물건과 물체를 대표할 수 있는 box 형태를 말함.
그냥 변수 네임 age는 아무것도 설명이 되지 않지만 이렇게 ellie 라는 object를 만들어서 ellie의 이름은 ellie이고, 나이는 20살 이다 이렇게 이야기 할 수 있음.

ellie는 const로 지정되어 있어서 이렇게 한 번 할당된 object는 다시는 다른 object로 변경이 불가능하다. ellie는 const keyword로 정의되어 있기 때문에 ellie가 가리키고 있는 메모리의 포인터는 잠겨있어서 다른 object로 할당이 불가능. ellie object 안에는 name과 age라는 변수들이 존재.