[JS] 데이터타입, data types, 변수 선언 let vs var, hoisting

Variable, rw (read / write)

: 변수

: 변경될 수 있는 값

:  let을 많이 씀

 

let name = 'ellie';

-  해석:  let이라는 키워드 이용해서 name이라는 변수를 선언(declaration)하고 ellie라는 변수의 값을 할당한다.

 

name = 'hello';

- 해석: 다시 name 이라는 변수에 hello 라는 값을 할당하면 console에는 ellie와 hello가 나란히 출력된다.

 

 

변수가 쓰이는 원리 어플리케이션을 쓰게 되면, 어플리케이션마다 쓸 수 있는 메모리가 할당되어진다.  이 메모리는 텅텅 비어있는 박스들인데  let이라는 키워드를 이용해서 name이라는 변수를 정의하게되면 한가지의 박스를 정의할 수 있는 포인터가 생김. name이라는 변수가 가리키고 있는 메모리 박스 어딘가에 ellie라는 값을 저장할 수 있음. 추후에 name이 가리키고 있는 값에 다른 값(hello)를 저장할 수 있는 것.

 

Block scope

:  괄호 (블럭)를 이용해 코드를 작성하면 블럭 밖에서는 안에 내용을 볼 수 없다.

따라서 블럭 밖에서 console.log(name); 을 적어 접근하게되면 아무 값도 나오지 않는다.

 

 

 

 global scope

-  반대로 블럭을 쓰지않고 파일 안에 정의해서 쓰는 변수를 global scope이라고 하는데 어느 곳에서나 접근 가능하다. 

블럭 밖에서도, 안에서도 보이기 때문에 콘솔에서 둘다 출력됨.

 

===>  global 변수들은 어플리케이션의 시작부터 끝날때까지 항상 메모리에 탑재돼 있어서 최소한으로 써야함. (class, if, for, 함수 등 필요한 부분에서만 쓰는 것이 좋다)

 

 

<JS에서 변수 선언 키워드> 

딱하나!

let

그 전에는 var 을 썼다.

* var을 쓰면 안되는 이유?

1. var hoisting : move delaration from bottom to top 2.has no block scope

 

1. var hoisting

- 대부분의 자바스크립트에서는 변수 선언 후 값을 할당하는 게 정상적.
var age;
age = 4;

 

하지만 선언도 하기 전에 값을 할당할 수 있고
age = 4;
var age;

 

값을 할당하기 전에도 출력할 수 있다.
console.log(age);
age = 4;
var age;

===>  undefined로 나온다.( 변수는 정의돼있지만 값이 아직 안들어가있다.) 그래서 

 

console.log(age);
age = 4;
console.log(age); (값을 할당)
var age;
===>  값을 할당한 후 출력하면 4로 나온다.

 

 

 

만약 var이 아닌  let을 사용한다면 에러가 뜬다. (정상적)
선언하기도 전에 값을 할당했기 때문이다.

 

 

하지만 var은 선언하기 전에 값을 할당할 수 있다. 그리고 이것을 var hoisting 이라고 한다.

* var hoising :  어디에 선언했는지 상관없이 항상 제일 위로 선언을 끌어올려주는 것을 의미한다.

 -  global scope을 이용해서 선언했기때문에 파일 제일 위에 선언이 올라가게된다.


+ console.log(age);
-  age를 출력하게되면 undefined로 나온다.

 

 

 

 

 

2. has no block scope

 

:  var은 블럭을 철저히 무시한다.

 

age라는 변수를 블럭 안에서 선언했음에도 불구하고 콘솔을 이용해 age를 밖에서 출력하게되면 정상적으로 나온다. 

아무리 블럭을 이용해 변수 선언해도 어디에서나 보일 수 있음.
초창기에는 이런 유연성을 이용해서 대충 동작하는 어플리케이션을 만들었지만 어느정도 규모있는 프로젝트를 하다보면 선언하지도 않은 값들이 할당되어옴. 이런 위험부담때문에 let을 써야한다.



===> 호환성 생각해봤을 때 es6는 메이저브라우저에서 다 지원되기때문에 안심하고 써도됨.

 

 

---

constant, r(read only)읽기만 가능하고 다른 값을 쓰는게 불가능

:  favor immutable data type always for a few reasons:
    -security 보안상 (해커들이 데이터를 바꿀 수 있음)
    -thread safety (어플리케이션을 효율적,빠르게 돌릴 수 있음)
    -reduce human mistakes(값을 바꾼다는 것은 위험한 것이기때문에 안변하는게 좋다 변경해야할 이유가 없으면 const를 사용하         는게 좋다)
: 할당하면 값이 바뀌지않음. (잠금)
:  값을 선언함과 동시에 절대로 값이 변경될 수 없음.

 

 

데이터 타입엔 mutable / immutable 2가지가 있다.

mutable data types	immutable data types
변경이 가능한 데이터타입	값이 절대로 바뀌지 않는 것.
= object (스스로 변경 가능) - JS에서 모든 object는 변경이 가능하다 ex) -  JS에서 array(배열)은 mutable data type.	-  primitive types ex) ellie라는 string을 정리하게 되면 ellie를 메모리에 통째로 올렸다가 다른 string으로 변경이 가능하지, ellie에서 i를 빼고 다른 것으로 바꾼다던지 데이터 자체 변경x.  -frozen objects : 변경X

 

JavaScript 변수 선언
Mutable (바뀌는것)	Immutable  (바뀌지 않는것)
let	const

 

---

 

Variable types (2가지)

primitive (Variable로 값이 저장됨)	object (object로 값이 저장됨)
- single item(더 이상 나눠질 수 없는 한 가지 아이템) - 값 자체가 메모리에 저장됨	box container(싱글아이템들을  한박스로 관리해주는 것) - 너무 커서 메모리에 한번에 올라갈 수 없음. object를 가리키는 ref가 메모리에 저장된다.
-number -string -boolean -null -undefined -symbol	-function -first-class function (뜻: 프로그래밍 언어에서는 function 도 다른 데이터타입처럼 변수에 할당 가능하고 함수의 parameter(인자)로도 전달되고 return타입으로도 function을 return할 수 있는 것이 가능하다)

 

C언어 (좀 더 세세한 메모리 관리 가능)
-short / int / long (숫자 할당할 때), float / double (소수점 할당할 때) 등 다양함. 얼마나 큰 사이즈를 담느냐에 따라 데이터타입을 다 다르게 써야한다.


Java에서도 숫자에 관련된 데이터타입이 많다.


.
.
.

 

 

 

primitive

---

1. number

---

하지만 JS에서는 number만 사용하면 끝!!
JS에서는 number선언 안해도 됨(타입이 다이나믹하게 결정되기 때문)
let a = 12;
let b = 1.2;
어떤 숫자든 할당하면 끝.

아직 배우진 않았지만 TS(Time Script)에서도 number을 쓴다.  let a: number = 12; let b: number = 1.2; ===> 이런게 있구나 알아만두기.

 

 

 

---

JS에서는
integer :정수
decimal number: 소수점
===>number type으로 할당된다.


Special numeric values : infinity, -infinity, NaN
:  number에서도 특별한 값이 적용돼있다.

1. infinity
:  숫자를 0으로 나누면 무한대(infinity)가 된다.

2. negative infinity
:  마이너스 값(negative value)을 0으로 나누면 negative infinity값이 나온다.

3. NaN (not a number)
: 숫자가 아닌 경우. 숫자가 아닌 string을 숫자로 나누면 NaN값이 나오게된다.

다양한 계산 해야될때 나누어야 하는 값이 0인지 아닌지 숫자인지 아닌지 모르고 연산을 하면 숫자가 아닌 Infinity, -Infinity, NaN가 나와 사용자에게 에러날 수 있음. 연산할때 그 값이 valid한 값인지 확인해야한다.

 

 

---

* bigInt

-  JS의 number는 -2의 53승부터 2의 53승까지 가능(표기:  -2**53 ~ 2*53)

-  최근에는 bigInt 라는게 추가되었다. 숫자의 마지막에 n만 붙이면 bigInt로 간주됨
ex) const bigInt = 12345678912345678945615234789465n;

===> chrome, firefox에서만 인식됨.(다른브라우저 지원X) 많이 쓰지는 않을 것으로 예상되지만 알아만두기

 

 

 

 

 

---

2. string (문자열)

---

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

ex)
const char = 'c';
const brendan = 'brendan';

 

 

2 .  일반 string과 +기호를 이용해 string을 고칠 수 있다.
ex)
const greeting = 'hello' + brendan;

-  string이 연결되어 나옴.

 

 

3. template literals 또는 template string (많이쓰임)
문법:
'hi ${brendan}!';
      └원하는 string(hi)을 적고 달러의 값을 적고 그 안에 괄호에 변수(brendan)을 쓰면 그 변수의 값이 자동적으로 붙여져서 나옴

ex)
const helloBob = 'hi ${brendan}!';

 

(아래) +기호를 썼을 때 번거롭다 ( 코트('')에 넣어서 플러스하고 또 코트에 넣어서 플러스... 반복..)

(위) ``(back tick;빽틱, 백틱)을 이용하면 간편하게 만들 수 있다.

 

 

 

---

3. Boolean

---

:  false: -, null, undefined, NaN, ' '

: true: any other value (1이나 string 값)

 

ex)

const canRead = true;

const test = 3 < 1; // false

 

 

---

4. Null

---

: empty값 지정해주는 것

 

ex)

let nothing = null;

 

 

---

5. undefined

---

: 선언은 됐지만 아무것도 값이 지정돼있지 않는다.

 

ex)

let x;    OR    let x = undefined;

: 둘 다 똑같은 의미

 

 

---

6. symbol

---

:  자료구조에서 고유 식별자 필요하거나, 동시다발적인 코드에서 우선순위 주고싶을 때 고유한 식별자로 필요할때 쓰임.

:  간혹 식별자를 string이용해 쓰는경우있음. 다른 모듈 다른 파일에서 동일한 string을 썼을때 동일한 식별자로 간주됨.

:  반대로 symbol의경우, 동일한 id를 이용해 symbol을 만들었지만 이 2가지의 심볼은 다른 경우다.

:  동일한지 아닌지 검사해보면 동일한게 아니라는 결과가 나온다. (아래 사진 참고)

 

 

 

 

-  똑같이 만들고싶다면 이렇게.

 

 

+심볼은 바로 출력하면 에러발생. 항상 .description 이용해 string으로 변환해야한다.

 

 

 

 

 

object

: 일상속 물건, 물체를 대체할 수 있는 박스 형태

: 그냥 변수 name, age는 아무것도 설명되지 않지만 ellie라는 objec를 만들고, 20살이라는 오브젝트를 만들 수 있다.

 

ex)

const ellie = { name: 'ellie', age: 20};

-  ellie는 const로 지정돼있어 다른 오브젝트로 변경X. 대신 name, age는 변경가능

const ellie = { name: 'ellie', age: 20};
ellie.age = 21;

-  ellie의 나이는 21살로 변경 가능

 

---

Dynamic typing

: c언어, Java - 변수 선언할 때 타입을 선언함

:JavaScript - 선언할 때 타입 선언X, 동작할 때 할당된 값에 따라 타입이 변경될 수 있음.

 

좋은 아이디어있을때 빠르게 프로토타입에 도움됨. 

but 규모있는 프로젝트만들때 발등에 불똥떨어질수 있다.