드림코딩 by 엘리_데이터타입

 

프로그래밍 언어에서 가장 중요한것은? → 입력, 연산, 출력

 

사용자에게 console이나 UI에서 입력받은 데이터를 

잘 처리하고 연산해서

알맞게 다시 사용자에게 출력해주는 것이 중요하다.

물론 그 데이터를 전송을 이용해서 서버로 보내서 다시 받아오는 것도 포함될 수 있다.

 

이런 연산을 하면서 CPU를 효율적으로 사용할 수 있도록 CPU에 최적화된 로직을 작성하는 것도 중요하고,

메모리의 사용을 최소화 하는것도 중요하다.

 

변수(Variable)

변경될 수 있는 값을 의미함 자바스크립트에서 변수 선언 시 let 이라는 키워드 이용

let, class etc 좀 더 현대적으로 쓰인 속성들은 ES 6에서 추가되었다.

 

let name = 'ray';

 - let이라는 키워드를 이용해서 name이라는 변수를 선언했다.

 - 그리고 선언함과 동시에 ray라는 변수의 값을 할당했다.

console.log(name);

 - 출력하면 ray 라는값이 출력된다.

name = 'seulki';

 - 다시 name이라는 변수에 seulki 라는값을 다시 할당한다.

console.log(name);

 - console tab에 seulki가 변경되어 출력된다.

 

위에서 무슨일이 일어났냐면 

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

이때 메모리는 텅텅 비워진 박스들이다.

어플리케이션 마다 쓸수있는 박스들의 갯수가 제한적으로 할당되어 진다.

 

 

let이라는 키워드를 이용해서 name이라는 변수를 정의하게 되면 

이렇게 한가지의 박스를 가릴킬수 있는 포인터가 생기게 되는 것이다. 

그래서 name이라는 변수가 가리키고 있는 메모리 어딘가에 ray라는 값을 저장 가능하다.

(이미지에서 값은 ellie)

 

 

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

 

Block scope

 

 

코드를 block안에 작성하게 되면 block 밖에서는 더이상 block안에 있는 내용을 볼 수 없게 된다.

즉 console.log를 이용해서 block 밖에서 name이라는 변수에 접근하게 되면 

아무값도 나오지 않는것이 확인가능하다.

 

 

반대로 block을 쓰지않고 파일안에다가 바로 정의해서 쓰는 변수들을 global scope 라고 부르는데

이렇게 global한 변수들은 어느곳에서나 접근이 가능하다.

block안밖에서 출력해도 보인다.

global한 변수들은 어플리케이션을 실행되는 순간부터 끝날때까지 항상 메모리에 탑재되어 있기때문에

최소한으로 쓰는것이 좋고 가능하면 클래스나 함수, if, for loop 로 필요한 부분에서만 정의해서 쓰는것이 좋다.

 

자바스크립트에서 변수를 선언할 수 있는 키워드는 딱 하나 let

ES 6에 추가되어 있다.

 

 

그전에는 var(Don't ever use this!!)를 썼다. 

현재는 쓰고있지 않다.

그 이유는 대부분 프로그래밍 언어에서는 변수 선언 후 값을 할당하는 것이 정상인데

자바스크립트 var 에서는 비상식적인 행동이 가능하다.

선언 하기 전에 값 할당이 가능한것이다.

심지어 값할당 전에 출력이 가능하다.

변수는 정의되어 있는지만 값은 아직 안들어있는 undefined가 뜬다.

이것을 var hoisting(move declaration from bottom to top) 이라고 하는데

즉 어디에 선언했느냐에 상관없이 항상 제일 위로 선언을 끌여올려 주는것을 말한다. 

또한 var는 block scope가 없다.

block을 철저히 무시한다. 즉 어디에서나 아무데서나 보일 수 있다.

이런 단점들과 risk 때문에 let이 나온 것이다.

그래서 변수를 선언할때 let을 쓴다.

 

Constant

favor immutable data type always for a few reasons : 

 - security

 - thread safety

 - reduce human mistakes

한번 할당하면 값이 절대 바뀌지 않는다.

 

 

우리가 변수를 이용하면 변수가 메모리 어딘가에 할당된 박스를 가리키고 있어서

포인터를 이용해서 값을 계속 바꿔나갈 수 있었다.

const는 가리키고 있는 포인터가 잠겨있다.

그래서 값을 선언함과 동시에 할당한 뒤로는 절대 값변경이 안된다.

 

값이 계속 변경될 수 있는것을 mutable data type 이라고 하는데

데이터타입도 변경가능한 mutable 데이터타입이 앞에서 본 let 키워드를 이용한 변수이다.

하지만 const는 변경이 불가능하기 때문에 immutable 데이터타입 이라고 불린다.

 

그래서 많은 개발자들이 이런말을 주로 한다.

favor immutable data type always for a few reasons :

(왠만하면 값을 할당한 다음에 값이 변경되지 않는 그런 데이터타입을 사용해라)

 - security (보안상)

 - thread safety

(어플리케이션이 실행되면 한가지의 프로세스가 할당이 되고

그 프로세스 안에서는 또 다양한 thread가 동시에 돌아가면서 어플리케이션을 조금더 효율적으로 빠르게 동작할 수 있도록 도와주는데 다양한 thread들이 동시에 변수에 접근해서 값을 변경 가능한데 동시에 값을 변경 가능 하다는 것은 위험하다.

그래서 가능하면 값이 변하지 않는 것을 사용하는 것이 좋다.)

 - reduce human mistakes

(그리고 앞으로 변경될 좋은 이유가 없다면 왠만하면 constants를 이용해서 프로그램을 작성하는 것이 좋다.

이렇게 해야 내가 나중에 코드를 변경하거나 아니면 다른 개발자가 코드를 바꿀때도 그 실수가 방지 가능하다.)

 

정리하면 자바스크립트 에서는 변수를 선언할때 mutable type의 let

immutable type에 const 두가지가 있다.

 

Variable data Types

자바스크립트 데이터타입에는 어떤것이 있을까?

어떤 프로그래밍 언어든 primitive와 object type 두가지로 나눠져있는데 

primitive type은 더 이상 작은 단위로 나눠질 수 없는 한가지의 아이템을 말한다.

(primitive type is single item: number, string, boolean, null, undefined, symbol)

object type은 single items들을 여러개 묶어서 한 단위로 한 박스로 관리 할 수 있게 해주는 것이다.

자바스크립트에서는 function도 데이터타입 중 하나인데

우리 프로그래밍 언어는 first-class function이 지원된다는 의미는 

이 프로그래밍 언어에서는 function도 다른 데이터타입 처럼 변수에 할당이 가능하고 또 그렇기 때문에

함수의 파라미터 인자로도 전달이 되고 함수의 return 타입으로도 function을 return 해주는것도 가능하다.

그것을 first-class function 이라고 부른다.

 

Variable Types : object(real-life object, data structure)

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

 

 

그냥 변수 name, age는 아무것도 설명되지 않지만  

이렇게 ellie라는 object를 만들어서 name과 age가 설명가능하다.

ellie는 constant로 지정되어 있어서 한번 할당된 이 object들은 다시는 다른 object로 변경이 불가하다.

 

 

ellie는 const 키워드로 정의되었기 때문에 

이렇게 ellie가 가리키고 있는 메모리의 포인터는 잠겨있어서 다른 object로 할당이 불가하지만 

이 ellie object 안에는 name과 age라는 key와 그에 맞는 value가 존재한다.

그래서 ellie.name , ellie.age 이런식으로 하면 

각각의 포인터가 가리키고 있는 메모리에 다른 값으로 할당이 가능하다.

 

Variable Types : number

C언어 같은 경우에는 low level language 라고 부르는데 개발자들이 프로그래밍을 짜면서

조금 더 세세하게 메모리 관리가 가능하다.

그 말은 내가 이정도 사이즈의 메모리를 할당해야지 라는 것이 가능하다.

즉 미리 생각해서 해야되는 것이 C언어 이다.

자바에도 number에만 관련된 데이터타입이 많다.

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

 

다행히도 자바스크립트 에서는 number 하나면 숫자는 끝난다.

심지어 number 라고 데이터타입을 선언 하지 않아도 된다.

왜냐면 타입이 다이나믹하게 결정이 되기 때문이다.

 - let a = 10; 

 - let b = 1.2;

** TypeScript에서도 number 하나면 충분하다.

대신 number 라고 타입을 정확하게 명시한다.

 - let a: number = 10;

 - let b: numger = 1.2;

즉 자바스크립트 에서는 integer, decimal number 상관없이 number 타입으로 할당된다.

 

 

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

대부분의 프로그래밍 언어에서도 동일하게 적용된다.

 

숫자를 0으로 나누게 되면 그래프에서 무한될 숫자값이 생기는것을 볼 수 있는데 이것을 infinity 라고 하는데

이렇게 positive한 value값을 0으로 나누면 infinity가 되고 

 

마이너스 negative value를 0으로 나누게 되면 negativeInfinity 값이 나온다.

 

not a number 즉 숫자가 아닌 경우 즉 숫자가 아닌 string을 숫자로 나누게되면 NaN값이 출력된다.

 

그리고 이 세가지 값은 특별한 숫자의 값이고

이게 중요한 이유는 나중에 DOM(html을 CSS와 병합) 요소를

자바스크립트를 이용해서 포지션을 바꾼다든지 뭔가 다양한 계산을 해야할때

나누고자 하는값이 0인지 아닌지 숫자인지 아닌지 확인도 하지않고 연산을 바로 해버리면

숫자가 아닌 infinity나 NaN 을 받을 수 있기때문에

사용자에게 에러가 발생 할 수 있다.

그래서 항상 연산 시 그값이 정말 valid한 값인지 확인하고 연산하는 것이 중요하다.

그리고 현업에서도 이것때문에 에러가 발생하는 경우가 간혹 있다.

 

 

자바스크립트에서의 number는 -2**53(-2의 53승)~2**53(2의 53승) 선까지의  범위의 숫자만 표현 가능하다.

최근에 bigInt라는 타입이 추가 되었다.

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

사실 이 타입은 최근에 추가되어서 크롬, 파이어폭스 에서만 지원이되고 사파리에서는 지원되지 않는다.

따라서 아직 다른 브라우저에서는 지원이 안된다.

그리고 프로그래밍을 하면서 이렇게 큰 범위의 숫자를 다룰 경우가 얼마없다. 흔하게 쓰이지는 않는다.

 

Variable Types : string

 

 

다른 프로그래밍 언어에서 이 캐릭터 한가지의 캐릭터만 들어가는 데이터타입이 따로 있지만(char),

자바스크립트 에서는 한가지 글자든 여러개 글자든 다 string 타입으로 할당되고 

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

 

그리고 많이 쓰이는게 template literals 또는 template string이라고 불리는 것인데

`` 기호(''아님에 주의할것!!) 를 이용해서 원하는 string을 적고 ${}을 이용하면 이 변수의 값이 자동적으로 붙여져서 나온다.

`` 을 이용하게 되면 안에 중간에 씌여진 스페이싱이나 문자열들이 그대로 나오기때문에 간편하게 string을 만들 수 있다.

 

Variable Types : boolean(ture or false)

false값은 0, null, undefined, NaN(Not a Number), ''(비워져있는 string) 모두 false로 간주되어 진다.

true는 any other value, 어떤값을 1이나 string이나 다른 값들은 다 true로 간주된다.

 

 

true라고 값을 바로 할당도 가능하고

3<1 등 이런 expression들도 다 평가가 되어 boolean 타입이 될 수 있다.

 

Variable Types : null, undefined

 

null 이라고 할당하는 경우:

 - 내가 명확하게 너는 텅텅 비어있는 empty 값이야, 너는 아무것도 아니야 이렇게 지정해 주는 것이다.

 

undefined 라고 할당하는 경우 :

 - 선언은 되었지만 아무것도 값이 지정되어 있지 않다.

 - 그래서 텅텅 비었는지 값이 들어있는지 그런게 아직 정해지지 않은 상태이다.

 - 이렇게 undefined라고 값을 할당한 경우도, 아무값이 할당되지 않은 상태도 undefined 이다.

 

Variable Types : symbol(create unique identifiers for objects)

나중에 맵이나 다른 자료구조에서 고유한 식별자가 필요 하거나

아니면 동시에 다발적으로 concurrent 하게 일어날 수 있는 그런 코드에서 우선순위를 주고 싶을때 

정말 고유한 식별자가 필요할때 쓰는 타입이다.

 

간혹 식별자를 string을 이용해서 쓰는 경우도 있는데 

이 string은 다른 모듈이나 파일에서 동일한 string을 썼을때 동일한 식별자로 간주된다.

 

 

하지만 symbol 같은 경우

동일한 id를 이용해서 symbol을 만들었지만 이 두가지의 symbol은 다른 경우이다.

이 다른 경우임을 검사하면 false가 나오는것을 확인가능하다.

그래서 symbol은 동일한 string을 작성했어도 다른 symbol로 만들어지기에 

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

 

 

string이 똑같다면 동일한 symbol을 만들고싶다하면  .for을 붙힌다.

주어진 string에 맞는 symbol을 만들어줘 그래서 두가지가 똑같음을 알수있다.

 

 

symbol은 바로 출력하게 되면 에러가 발생한다.

항상 dot description을 이용해서 string으로 변환해서 출력한다.

 

Dynamic typing: dynamically typed language

자바 같은 경우 변수 선언시 어떤 타입인지 결정해서 타입을 같이 선언했던 반면에 

자바스크립트는 변수 선언 시 타입을 어떤 타입인지 선언하지 않고

런타임 프로그램이 동작할때 할당된 값에 따라서 타입이 변경 가능하다.

이런 dynamic typing 언어는 좋은 아이디어가 있을때 빠르게 프로토타입을 하고싶을 때는 정말 유연하게 쓸 수있는 언어지만

(프로토타입은 '정보시스템의 미완성 버전 또는 중요한 기능들이 포함되어 있는 시스템의 초기모델'이다.)

 

 

hello라는 string 할당 text는 string이 된다.

text에 숫자 1을 할당하면 type이 number가 된다.

text에 string과 number를 더하면 type은 string 이 된다.

반대로 string과 string을 나누면 이때는 type이 number가 된다.

 

 

이때 위험한 것은 많은 개발자들이 이 text라는 이름을 통해서 string의 타입을 예상하고 있다.

(프로그래밍 언어에서 indexing은 배열을 쓸때는 항상 1부터 시작하는 것이 아니라 0부터 시작한다.)

string으로 이해해서 h를 받아왔지만 

중간에 누군가가 타입을 숫자로 바꿔버렸다.

나중에 개발자가 string으로 이해해서 함수를 부르게되면 에러가 발생한다.

 

즉 자바스크립트는 런타임에서 타입이 정해지기 때문에 이거때문에 에러가 런타임으로 발생되는 경우가 많다.

이러한 문제점들 때문에 TypeScript가 나오게 된다.

 

이 언어는 자바스크립트에 타입이 더 올려진 언어인데 자바스크립트를 충분히 배우고 typescript로 넘어간다.

그리고 자바스크립트를 이용해서 배우게되면 바로 브라우저가 이해할 수 있기때문에

실시간으로 연동해서 볼 수 있지만 타입스크립트는 결국 브라우저가 이해할 수 있는 자바스크립트로 트렌스 컴파일러(BABEL)을 이용해야 된다.

이렇게 실시간으로 볼 수 있는게 어렵다.