[javascript] 드림코딩 자바스크립트 2.데이터 타입, data types, let vs var, hoisting

두번째 Javscript 공부시간인 데이터 타입, let vs var, hoisting을 배울 시간입니다.

 

// 2.Variable == 변수 (변경될 수 있는 값);
// JS == let  (added in ES6)

이번에는 우리가 제일 중요한 Variable을 정리해보자 Variable을 변수라고도 하는데

변수라는 것은 변경될 수 있는 값을 뜻한다.

 

Javscript에서는 변수를 만들때 let이라는 키워드를 만드는데 let은 ES6에 추가된 아이다.

ES6는 전세계적으로 Javascript를 이용하는 문법을 뜻한다.

 

// 두가지가 log되는 방식 == 어플리케이션을 실행하면 어플리케이션마다 사용할 수 있는 메모리 할당 
// 이 메모리는 텅텅 빈 상자

let name = 'jungho';
console.log(name);
name = 'hello';
console.log(name);

자 여기서 let이라는 키워드를 사용해 name이라는 변수를 만들고 그안에 'jungho'라는 변수의 값을 할당한것이다.

 

그리고 출력해보면 jungho라는 값이 출력되고 그리고 다시 선언한 name이라는 변수에 'hello'로 할당한뒤 출력해보면

hello로 변경되서 다시 출려되는 것을 볼 수 있다.

 

방금 일어난 사항을 정리해보면

어플리케이션을 실행하게 되면 어플리케이션 마다 사용할 수 있는 메모리가 할당된다.

이 메모리는 텅텅 비어진 박스인데 어플리케이션마다 사용할 수 있는 박스가 제한된다. 우리가 let을 사용해서

정의하게되면 한가지 박스를 가리킬 수 있는 포인터가 되는 것.

그레서 이 name이라는 변수가 가리키는 메모리 어딘가에 우리가 ellie이라는 값을 저장할 수가 있다.

그리고 추후에 name에 변수가 가리키는 곳에다 다른 값을 넣어 저장할 수 있다.

{
    let name = 'jungho';
    console.log(name);
    name = 'hello';
    console.log(name);
}

그 다음 우리가 알아볼 것은 block scope이다 이렇게 괄호를 이용해서 블럭을 이용해 코드를 블럭 안에 작성하면

 

블럭 밖에서는 더이상 블럭 안에 내용을 볼수 없다.

{
    let name = 'jungho';
    console.log(name);
    name = 'hello';
    console.log(name);
}

console.log(name);

그래서 블록 밖에서 console.log로 name에 접근하게 되면

아무 값도 받아오지 않는걸 확인 할 수 있다. 반대로 블럭을 사용하지 않고

// global scope ==  반대로 위와같이 블럭을 쓰지않고 파일안에다 변수로 선언해서 사용하는 법을 global scope라고 불림 
let globalName = 'global name';
{
    let name = 'jungho';
    console.log(name);
    name = 'hello';
    console.log(name);
}

console.log(name);

파일안에다 변수로 선언해 사용하는 법은 global scope라고 불린다.

 

이렇게 global한 아이들은 어느곳에서나 접근 가능

 

let globalName = 'global name';
{
    let name = 'jungho';
    console.log(name);
    name = 'hello';
    console.log(name);
     console.log(globalName);

}

console.log(name);
console.log(globalName);

그래서 블럭 밖이나 안에서도 바깥에 있는 아이들이 보이기 때문에 globalName이 출력된다.

global한 변수들은 어플리케이션이 실행되는 순간부터 끝날때 까지 항상 메모리에 탑재되어 최소한으로 쓰는 것이 좋다.

 

가능한 class나 함수 function or if나 필요한 부분에서만 정의하는 것이 좋다.

 

Javscript에서 변수로 선언할 수 있는 것은 딱하나 let밖에 없다.

그리고 이 let은 es6에서 추가되었는데 그전에는 무엇을 썼냐면 바로 var을 사용하였다.

// 선언도 하기전에 값 할당.
console.log(age)
age = 4;
var age;

그런데 var을 사용하면 안되는 이유는 대부분 프로그래밍에서는 선언후 값을 할당하는데 var에서는

선언도 하기전에 값을 할당할 수 있는데  심지어 할당 전에 값을 출력할 수도 있다.

출력하면 undefined가 뜨는데 변수는 정의되어 있지만 값이 아직 안 들어가 있다고 뜬다.

console.log(age)
age = 4;
// 값을 다시 log
console.log(age)
var age;

그리고 다시 값을 log 하고 출력하면 4가 나오는게 확인이 가능 이것을 let을 이용해서 똑같이 하면

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

name = 4;
let name;

let을 선언하기도 전에 값을 넣으니 에러가 나온다. 이런 에러가 나오는게 정상, 하지만 var은 선언하기도 전에 사용할 수 있는데 이것을 var hoisting이다.

 

var hoisting은 어디에 선언했나 상관없이 항상 제일 위로 선언을 끌어올려주는 것을 말한다.

age = 4;
var age;

지금은 우리가 변수를 파일 제일 상위에 global scope를 사용해 선언해서 파일제일 위에 선언이 올라감

'use strict';
console.log(age);

그래서 우리가 제일위에서 age를 선언하면 undefined가 나오는것을 확인해볼 수 있다. 그리고 var을 더이상 쓰면 안되는 이유는

// var에는 block scope 가 없다 == var을 block scope을 철처히 무시한다.
{
    age = 4;
    var age;
}

console.log(age);

var은 block scope을 철처히 무시하는 존재이다. 분명 우리가 age라는 변수를 block안에다 선언해도 콘솔 밖에서 선언하면

정상적으로 나온다. 그래서 우리가 아무리 깊은곳에 block scope을 선언해도 어디에서나 보이는 것이 var이다.

 

이것은 초창기에는 이런 유연성을 이용해 금방금방 프로그램을 짜도 동작하는 어플리케이션을 만들었지만

 

어느정도 규모있는 프로젝트를 하다보면 선언하지도 않는 값들이 할당되는 이상한 일들이 나오는데 이 이유가 바로

 

var을 사용할때 이다. 그래서 이런 위험성을 알고있는 개발자들이 있었기 떄문에 let이 나온 것이다.

 

개발자들 이 변수를 선언할 때는 let을 쓰라고 예기하는데 굳이 var을 선언할 필요없다.

하지만 우리가 이런 최신 기능을 쓸때는 compatibility(호환성)을 생각해 봐야하는데 다행이 es6는 Edge나

 

FireFox(파이어폭스) Chrome(크롬) Safari(사파리) 이런 메이저 브라우저에 다 지원이 되기 떄문에 안심하고 사용해도 된다.

 

IE는 전세계에서 1%도 안되는 소수 사용자가 쓰는 브라우저라 정말정말

지원하려면 bable을 이용해 es6 -> 5로 내려 개발

ES5로 검색해보면 최신버전만 지원되고 그 이전은 es5도 지원이 안됨 그냥 무시하고 개발해도 된다.

 

두번째로 변수에 대해 알아보았다. 이번에는 Constant에 대해알아보자. Constant라는 뜻은 한번 할당하면 값이 절대 바뀌지 X

 

우리가 변수를 이용하면 이 변수가 메모리 어딘가 할당된 박스를 가리켜 포인터를 이용해 값을 바꿔나갈 수 있었는데

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

// 3.Constants == 한번 할당하면 값이 절대 바뀌지 X
// favor immutable data type always for a fw reasons;
// - security (보안)
// - thread safety 
// - reduce human mistakes
const daysInWeek = 7;
const maxNumber = 5;

값이 계속 변경될 수 있는 것을 Mutable Data Type이라고 하는데 이 Virus(바이러스)도 Mutation(돌연변이)를 통해서

계속 유전자 서열을 바꿔나가듯이 데이터 Type도 변경이 가능한 Mutable Data Type이 바로 우리가 앞에서 살펴본

 

let키워드 변수, 하지만 이 Constants에서는 변경이 불가하기 때문에 Immutable(불변) Data Type이라고 불린다.

그래서 많은 개발자들이 이런말을 많이 하는데

favor immutable data type always for a fw reasons;

그 말은 웬만하면 값을 할당한 다음에 다시는 변경되지 않는 그런 데이터 타입을 사용하라는 말인데

 

정말 좋은 이유 세가지를 뽑자면

• security(보안상) - 한번 작성한 값을 다른 해커들이 코드를 이상한 것을 삽입해 값을 계속 변경이 가능한데
  이 immutable data type은 그것을 방지할 수 있다.
• thread safety - 어플리케이션이 실행되면 한가지 프로세서가 할당되고 그 프로세서 안에서는 다양한 thread가
  동시에 돌아가면서 어플리케이션을 조금 더 효율적이게 빠르게 동작하도록 도와준다.
  다양한 thread들이 동시에 변수에 접근해 값을 변경할 수 있는데
  동시에 값을 변경한다는 것은 조금 위험 그래서 가능한 값이 변하지 않는 것을 사용하는게 좋다.
• reduce human mistakes - 앞으로 변경될 좋은 이유가 없다면 const를 이용해 프로그램을 작성하는게 좋은데
  이렇게 해야 내가 나중에 코드를 변경하거나 다른 개발자가 코드를 바꿀 때 실수를 방지해줄 수 있다.

 

정리해 보자면 Javascript에서는 변수를 선언할때

Mutable Type(변경 가능한 유형)에 let 그리고 Immutable Type(변경 불가한 유형)에 const 이 두가지 가 있다.

 

4번째로 부터는 바로 Variable Types에 대해 알아볼 건데 Javascript Data Type에는 어떤 것이 있는지 알아볼것이다.

// 4.Variable types
// primitive, single item: number, string, boolean, null, undefined
// object, box container
// function, first-class function

어떤 프로그래밍 언어든 바로 primitive 타입과 object 두가지로 나눠져 있는데

primitive 타입은 더이상 작은 단위로 나눠질 수 없는 한가지 아이템을 말하는데 이 곳에는

single item(단일 아이템),string(문자열), boolean(참 혹은 거짓을 가진 값), null(아무것도 아닌 값),

undefined (변수가 존재하나, 어떠한 값으로도 할당되지 않아 자료형이 정해지지 않는 상태) 가 있다.

 

밑에 oject는 위 single item을 여러개 묶어서 한 단위로 한 박스로 관리하게 해주는 것이 object이다.

위 function도 javascript는 데이터 타입 중 하나인데,

first-class function(function도 다른 데이터 타입처럼 변수에 할당 가능 하고 또 그렇기 때문에 함수의 파라미터를

인자로 도 전달이 가능하고 함수의 return type으로도 function을 return 하는 것이 가능하다.) 라는 뜻이다.

 

우리가 javscript만 공부한다고 javscript만 보기 보다 좀더 다양한 언어를 비교하면서 보는 것도 좋은 방식이다.

 

C 언어 같은 경우는 좀 low Level인 언어로 불리는데 그 이유는 개발자들이 프로그래밍을 짜면서 조금 더 세세하게

메모리를 관리할 수 있기 때문이다. 그 말은 내가 어느 정도의 사이즈의 메모리를 할당하는 것이 가능하다.

 

그래서 숫자의 관련돤 변수만 보더라도 short, int, long, float, dulble 등 다양한 것들이 존재한다.

shot,int,long같은 경우는 정수들을 할당할 때 사용하고

 

float,double은 소수점 인 아이들 실수들을 할당할때 많이 사용하는데, 이것도 내가 얼마나 큰 사이즈의 데이터를 담냐에 따라서 short를 사용할건지 int를 사용할지 이것들을 사전에 생각을 좀 더 잘해 변수를 할당해야함.

 

예를들어 내가 한 반에 들어갈 수 있는 학생 수를 변수에 정의하는데 자료형의 long을 쓴다는 것은 굉장한 메모리를

낭비할 수 있다. 한 반에 1234명이나 들어가는 경우는 없다. 그때는 short나 int를 쓰는 것이 적합하다.

 

그렇게 미리 생각해서 해야하는게 C언어이다.

Java(자바)에도 숫자의 관련된 데이터 타입이 굉장히 많다. 그래서 작성하기 전에는 얼마나 큰 양에 데이터를 정할것인지 생각하고 할당해야하는데.

 

다행이도 Javascript에서는 number(숫자)이거 하나면 끝난다. 얼마나 큰 사이즈를 할당할지 생각할 필요 없다.

그래서 이 number(숫자)타입 만을 이용해 숫자를 쓰면되는데

심지어 Javascript(자바스크립트)에서는 number이라고 데이터 타입을 선언하지 않아도 된다. 그 이유는 Javascript에서는 타입이 Dynamic(동적)하게 결정이 되기 떄문에 이렇게 let으로 어떤 숫자든 할당하면 끝

타입스크립트는 어떨까? Typescript(타입스크립트)에서도 동일하게 number하나면 충분하다. 대신 이렇게 number라고

타입을 명시해서 사용해야한다. 이렇게 Javscript에서는

const count = 17; // integer = 정수
const size = 17.1; // decimal number = 소수점의 숫자 
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

integer(정수)나 decimal number(소수점의 숫자)등 상관없이 number 타입으로 할당되는데

log를 확인해보면 값에 상관없이 type에 number가 나오는 것을 확인할 수 있다.

 

하지만 이 number에서도 조금 특별한 값이 미리 정해져 있는데, 대부분의 프로그래밍 언어 에서도 동일하게 적용된다.

// number - spicla numeric value(특별한 값): infinity, -infinity, NagativeInfinity, nAn
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity);
console.log(nagativeInfinity);
console.log(nAn);

여기에 보면  infinity에 숫자 1을 0으로 / 나누게 되면

그래프에서 infinity loof(무한루프)를 돌게 되면서 무한대의 숫자 값이 생기는 걸 볼 수 있다.

이렇게 postive(부정)한 value의 값을 0으로 나누면 infinity(무한)가 되고,

-nagative(긍정)의 value를 나누게 되면 -Infinity(nagative-infinity) 값이 나온다.

그리고 한가지 더 'not a number'(숫자가 아닌 경우)를 숫자로 나누게 되면 NaN이 출력된다.

 

그래서 이 세가지 값은 특별한 숫자의 값이고 이게 중요한 이유가 나중에 DOM요소를 Javascript를 이용해

position(포지션)을 바꿔 온다던지 뭔가 다양한 계산을 해야 될 때 나누고자 하는 값이 0인지 아닌지 숫자인지

아닌지 확인하지않고 연산하면 숫자가 아닌 infinity나 NaN값을 받아서 사용자에게 에러가 발생할 수가 있다.

 

그래서 항상 연산 할 떄에 그 값이 정말 vaild(유요한)값인지 확인하고 연산하는 것이 중요 그리고 실제 현업에서도

이것 떄문에 에러가 발생하는 경우가 간혹 있다.

// bigInt (fairy new, don't use it yet) = 새롭게 추가된 bigInt 
const bigInt = 1234567890123456789012345678901234567890; // over (-2**53) ~ 2*53)
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);
Number.MAX_SAFE_INTEGER;

이제 Number에서 넘어가기전 새롭게 추가된 bigInt가 있는데 Javscript에서 Number는 

(-2**53) = -2에 53승 부터 2의 53승 까지 이 정도의 범위 숫자만 표현 가능한데 최근 BigInt라는 타입이 추가 되었다.

// bigInt (fairy new, don't use it yet) = 새롭게 추가된 bigInt 
const bigInt = 1234567890123456789012345678901234567890n; // over (-2**53) ~ 2*53)
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);
Number.MAX_SAFE_INTEGER;

그래서 숫자의 제일 마지막에 n만 붙이면 bigInt로 간주되어 진다.

그래서 console을 확인하면 type에 bigint라고 나오는 것을 확인해 볼 수 있는데 사실 이것은 최근에 추가된 것이기 때문에, 크롬이나 파이어 폭스에만 지원하고.

사파리에서 열어보면 숫자 끝에 이상한 문자열이 붙어 있다라고 하면서 인식하지 못한다. 그래서 아직 다른 브라우저에서 지원되지 않고 프로그래밍을 하면서 큰 범위의 숫자를 다룰 경우가 많지 않기에

 

그냥 추가되었다고 알기만 하면 됨.

// string 
const char = 'c';
const brendan = 'brendan';
const greeting = 'hello' + brendan;
console.log(`value: ${greeting}, type: ${typeof greeting}`);
const helloBob = `hi ${brendan}!`; // template literals (string)
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);

number(숫자)다음 으로 알아볼 것은 String(문자열)이다. string은 다른 프로그래밍 언어에서

위 char에 들어있는 데이터 타입은 따로 있지만 Javascript에서는 너무 감사하게도 한가지 글자든 여러개 글자든

한가지 글자든 여러 글자든 다 string 타입으로 할당된다.

 

const greeting = 'hello' + brendan;

그리고 일반 string과 다른 변수 + 기호를 이용해서 string을 붙이는 것도 확인 된다.

이렇게 hellobrendan이라고 string이 연결되서 나오는 것을 볼 수 있고 type도 string(문자열)로

나오는 것을 볼 수 있다.

const helloBob = `hi ${brendan}!`; // template literals (string)

그리고 많이 쓰는 template literals (string)이라고 하는데 ` ` 기호를 이용해 원하는 string을 적어서 ${}!를 이용해 {}

안에 변수의 값을 넣으면 값이 자동적으로 붙여져 서 나오는 것을 확인할 수 있다.

그래서 이렇게 string 값이 나오는 것을 확인 할 수 있다.

console.log(`value: ${helloBob}, type: ${typeof helloBob}`);

아까 부터 console.log 를 할때 이렇게 `` 기호를 이용해 template literal을 이용해 출력하는데 이 아이를 기존의

plus type을 이용하게되면

console.log('value:' + helloBob + ' type: ' + typeof helloBob);

이런식으로 코드를 넣어서 + 해야되는 불편함이 있다.

console.log(`value: ${helloBob}, type: ${typeof helloBob}`);

그래서 이렇게 ``를 사용해면 안에 중간에 쓰여진 spacing(간격)이나 문자열이 그대로 나오기 때문에 간편하게 string을 만들 수 있다.

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

다음으로는 boolean(참 혹은 거짓 == ture && false)다. 여기서 좀더 중요한 사실은

 

1.false 값 = 0, null, undefined, NaN, "" 으로 간주

2.true 값 = 1, any, other value, 으로 간주

 

이렇게 true라고 값을 바로 할당해도 되고

const canRead = true;

이렇게 3이 1보다 작다라는 것은 거짓이다. 이렇게 이런 explanation들도 revelation(평가)가 되어서 false로 할당되는 것을 확인 할 수 있다.

const test = 3 < 1; // false

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


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

그 다음은  null & undefined 인데 이 두개는 비슷한거 같지만 서로 조금 다른 아이.

 

null을 할당하면 = '너는 텅텅 비어있는 mt값이라서 더는 아무것도 아니야'; 라고 지정해주는 것

undefined를 할당할때 = '선언은 되었지만 아무것도 값이 지정되지 않음'; 텅텅 비었는지 값이 들어있는지 정해지지 X 상태

// undefined = '선언은 되었지만 아무것도 값이 지정되지 않음'
// 텅텅 비었는지 값이 들어있는지 정해지지 않은 상태
let x;
console.log(`value: ${x}, type: ${typeof x}`);

let x = undefined; // 정해지지 않은 상태이기 떄문에 undefined도 가능하다.

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

그래서 아직 정해지지 않는 상태이기 떄문에 undefined도 가능하다.

// symbol, create unique identifiers for objects 
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');

Primitive Type의 마지막 Symbol 타입에 대해 알아볼 건데 이 Symbol 타입은 나중에 map이나 다른 자료구조에서

 

고유한 식별자가 필요하거나 아니면 동시에 다발적으로 이뤄지는 confront(대면)한 상황에서 그런 코드에서 우선순위를 주고 싶을때 정말 고유한 식별자가 필요할때 쓰여지는 아이인데

 

간혹 식별자를 string을 이용해서 쓰는 경우도 있는데, 이 string은 모듈이나 다를 파일에서 동일한 string을 사용할때

동일한 식별자로 간주한다.

 

하지만  반대로 Symbol같은 경우 위처럼 동일한 'id'값을 이용해서 심볼을 만들었지만 이 두가지 심볼은 다른 경우다.

 

그래서 만약 이값이 동일한지 아닌지 확인해보려면

// symbol, create unique identifiers for objects 
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);

두값을 비교해보면 된다.

확인 결과 false값이 나온다. 그래서 이 Symbol은 동일한 string을 작성해도 다른 Symbol로 만들어지기 때문에

주어지는 string에 상관없이 고유한 식별자를 만들때 사용한다.

// symbol, create unique identifiers for objects 
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(symbol1 === symbol2); // true

Symbol이 똑같다면 동일한 Symbol을 만들고 싶다면 이렇게 Symbol을 Symbol.for('id'); 해서 두가지가 똑같다고 

나오는걸 확인해볼 수가 있다.

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true
console.log(`value: ${symbol1}, type: ${typeof symbol1}`);

그리고 Symbol은 바로 출력하게 되면 에러가 발생하는데.

//  그래서 항상 .description을 이용해 string으로 변환후 출력
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

그래서 항상 description을 이용해서 string으로 변환후에 출력이 가능하다.

여기까지 Javscript에서 변수를 어떻게 선언하는지 데이터 타입은 어떤것이 있는지 알아보았다.

 

이제 Javascript에 하이라이트 Dynamically typed에 대해 알아보자.

 

자바스크립트에 Dynamically type langauge는 앞에서 보여준 C나 Java언어는 statically langauge이다.

 

즉 우리가 변수를 선언할 때 어떤 타입인지 결정해서 타입을 같이 선언했던 반면 Javascript에서는 선언할때

 

어떤 타입인지 선언하지 않고 런타임 프로그램이 동작할 때 할당된 값에 따라서 타입이 변경될 수 있다는 것을

 

얘기한다. 이런 Dynamically type langauge는 내가 좋은 아이디어가 있을때 빠르게

 

Prototype(프로토타입) 하고 싶을 때는 정말 유연하게 쓸 수 있는 언어지만 다수에 엔지니어들이 아니면

 

어느정도 규모가 있는 프로젝트를 만들때 이런 Dynamic Type때문에 발등에 불똥이 떨어지는 일들이 한 두번이

 

아닐 수 있는데, 그것을 예제를 통해 알아보자.

 

let text = 'hello';
console.log(`value: ${text}, type: ${typeof text}`);

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

 

let text = 'hello';
console.log(`value: ${text}, type: ${typeof text}`);
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);

하지만 이것을 text를 다시 숫자 1을 할당하면

이제 type이 숫자로 변경이 된다.

let text = 'hello';
console.log(`value: ${text}, type: ${typeof text}`);
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);

그리고 만약  text에 string과 5를 더하면 어떻게 될까, 여기서 Javascript 엔진이 굉장히 interesting하게 이해를 하는데

문자열에 + 가 있으니 number 숫자 type을 string으로 변환되어 string과 string을 합해주는 것을 하게된다.

이러면 string으로 type이 변환되는 것을 볼 수 있다.

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

반대로 string과 string을 나누면 이떄는 Javscript엔진이 숫자들을 나눌 수 있는 연산자를 쓰니, 숫자와 숫자를 나눠서

number로 type이 변환되면서 정말 나누기가 된것을 확인할 수 있다. 그래서 정말 위험한 것을 하나 보여주겠다.

let text = 'hello';
console.log(`value: ${text}, type: ${typeof text}`);
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);
text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`);

많은 개발자들이 이 text라는 변수 이름을 통해 string에 type을 예상하고 있다. 그래서

let text = 'hello';
console.log(text.charAt(0));

이렇게 제일 첫번째 있는 char를 받아와야된다고 생각한다.

프로그래밍 언어에서 index는 배열을 쓸 때는 항상 1부터 시작하는게 아닌 0부터 시작한다.

그래서 이렇게 0부터 index가 매겨저 당연히 0번째니 첫번째 h가 출력된다.

그래서 확인해보면  h가 출력된다. 이렇게 string으로 이해하기 떄문에 h를 받아오는게 맞는데,

let text = 'hello';
console.log(`value: ${text}, type: ${typeof text}`);
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);
text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`);
console.log(text.charAt(0));

근데 나중에 개발자가 나는 string인 것으로 이해해서 아래에 다시 함수로 부르게 되면,

에러가 발생하게 된다. 즉 Javascript는 런타임에서 type이 정해지기 때문에 이것때문에 에러가 런타임으로 발생하는 경우가 많다.

 

그래서 이 Dynamic Typing 때문에 하도 뒤통수를 많이 맞아서 Typescript가 나오게 된다. 이 Typescript는 Javascript

위에 Type이 더 올려진 언어이다.

 

Typescript는 Javscript처럼 브라우저가 바로 이해하지 못해서 이해할 수 있는 Javscript로 transcompiler를 이용해야 되는데 실시간으로 볼수 있는게 어렵게 때문에

 

Javascript를 배운뒤 Typescript를 배우면된다.

 

// object, real-life object, data structure
const ellie = {name: 'ellie', age: 20};

마지막으로 중요한 object에 대해서만 알아보고 마치겠다.

Object는 우리가 일상생활에서 보는 물건과 물체들을 대표할 수 있는 박스 형태를 말한다.

 

그냥 변수 name은 아무것도 설명되지 않지만 {}에 name과 age를 설정할 수 있는데

지금 ellie 는 const(상수)로 설정이 되어있어 한번 할당된 object는 다시는 다른 object로 변경 X

ellie는 const 키워드로 정의되어 있기 떄문에 이렇게 ellie가 가리키고 있는 메모리에 포인터는 잠겨있어 다른 오브젝트로 할당이 불가 하지만 ellie 오브젝트 안에는 name과 age가 존재한다.

ellie.name;
ellie.age

그래서 이런식으로 ellie.name하면 각각에 포인트가 가리키고 있는 메모리에 다른 값으로 할당이 가능하다.

// object, real-life object, data structure
const ellie = {name: 'ellie', age: 20};
ellie.age = 21;

그래서 이렇게 ellie의 age(나이)를 21로 변경이 가능하다.

 

이렇게 해서 변수에 관련된 모든 사항들은 다 살펴보았다.