js 3. 데이터타입

Kanon·2021년 11월 4일

JavaScript TIL 드림코딩 자바스크립트

JavaScript 문법 이해하기

목록 보기

2/2

❤️ Variable 변수

let을 이용하여 변수 name을 선언하고 선언한 동시의 변수의 값을 ellie라고 할당해줌.
console.log(name)하면 console창에 name의 값이 뜸

그 name을 다시 hello로 지정하자
console.log(name)값이 hello로 바뀐것을 알 수 있다.

어플리케이션 실행->어플리케이션 마다 쓸 수 있는 메모리(박스) 갯수가 제한적으로 할당된다.

let name: let을 이용하여 name이라는 변수 정의 시 한가지 메모리(박스)를 가르킬 수 있는 포인터가 생성.

name이라는 변수가 가르키고 있는 메모리 어딘가에 ellie라는 값을 저장할 수 있음
추후 name의 변수가 가르키는곳에다 다른 값을 넣어 저정할 수 있음.

❤️ Block scope

블럭 안에서 코드를 작성하게 되면 블록 밖에서는 더 이상 블록 안에있는 내용이 보이지 않게된다! (console창에서 안보임)

블록 밖에서 console.log(name) 을 쳐보았더니
아무값도 나오지 않는 것을 확인할 수 있다.

Global scope: 블럭을 쓰지않고 파일안에다 바로 정의해서 쓰는 변수들
Gobal한 아이들은 어디곳에서나 접근이 가능함!

블록 밖과 안 관계없이 글로벌 이름을 출력하면 보인다!

global한 변수들은 어플리케이션이 실행되는 순간부터 끝날 때 까지 항상 메모리에 탑재되어있기 떄문에 최소한으로 쓰는 것이 좋고,
가능하면 class나 함수 if나 for문 등 필요한 부분에서만 정의해서쓰는것이 좋다.

자바스크립트에서 변수 선언할 때 쓰는 키워드는 let 하나 뿐이다.
(ES6에 추가됨. 그전에는 var을 씀)

❤️ Var 쓰지말자!

대부분의 프로그래밍 언어는 변수를 선언한 후 값을 할당하는 것이 정상적인데

var age;
age = 4;

JS var에서는 선언하기도 전에 값을 할당할 수 있다.(정상적 행동x )

age= 4;
var age;

값을 할당하기도 전에 출력될 수 있음

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

출력하면 undefined가 뜨는데
변수는 정의되어있지만 값이 할당되어 있지 않다고 판단한것.
값을 할당하고 출력하면 4로 값이 나오는 걸 확인 할 수 있다.

❤️ let vs var

이것을 let을 이용하여 똑같이 한다면 error가 나온다.
let을 선언하기도 전에 값을 넣었다고 에러뜨는것! ->에러 나오는게 정상적

하지만 var는 값을 선언하기도 전에 쓸 수 있다.
이것을 Var hoisting이라고 한다.(간혹 면접에서 물어보는 경우 ㅇ)

Hoisting: 어디에 선언했는지와 상관없이 항상 제일 위로 선언을 끌여올려주는 것.
hoist는 끌어올려준다는 의미

지금은 우리가 이 변수를 파일 제일 상위에 즉 글로벌스코프를 이용해서 선언했기 때문에
파일 제일 위에 선언이 올라가게 된다.

그리하여 여기서 age를 출력하게 되면

undifined로 나오는 것을 확인할 수 있다.

Var는 block scope이 없다.

=블록을 철저히 무시한다.
var를 쓰면 안되는 이유 3번쨰

변수 age를 블록 안에서 선언했음에도 불구하고 console을 이용하여 age를 밖에서 출력하면 정상적으로 4가 출력됨을 알 수 있다.

아무리 깊은 블록 안에서 선언을 하여도 어디에서나, 아무곳에서나 보일 수 있는 것이
바로 var이다.

이것은 초창기에는 유연성을 이용하여 프로그램을 금방 대충 짜고 동작할 수 있는 프로그램을 만드는 것이 가능하였지만 어느정도 규모가 있는 프로젝트를 하다보면 선언하지도 않은 값들이 할당되어서 var 때문에 이런 이상한 일들이 벌어짐.

var의 위험성을 개발자들이 충분히 인지하고 있었기 때문에 let이 등장한 것이다.
따라서 변수를 선언할 때는 let을 써야한다.

ES6호환 가능성 중요한데 IE(인터넷익스플로어)말고 메이저 브라우져에서는 ES6부분이 돌아가니 안심해도된다.

ES5에서는 IE의 경우 최신버전 말고 구버전은 지원안됨.

무시하고 ES6개발하면댐!

❤️ constant

constant: 한번 할당하면 값이 절대 바뀌지 않는다.
값을 선언한 동시에 할당한 뒤로는 절대 값을 변경할 수 없다.

Mutable 데이터 타입: 값이 계속 변경 될 수 있는것.
->let 키워드를 이용한 변수

Immutable 데이터 타입: 값이 변겅되지 않음.
->const

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

이유 3가지

보안상의 이유[security] : 한번 작성한 값은 해커들이 값을 바꿔나가는 것이 가능한데 Immutable 데이터 타입은 그런것들을 방지해준다.

[Thread safety]: 어플리케이션이 실행되면 한가지의 프로세스가 할당되고 그 프로세스 안에서는 다양한 쓰레드가 동시에 돌아가면서 어플리케이션을 좀더 효율적 빠르게 동작될수록 도와줌

다양한 쓰레드들이 동시에 변수에 접근해서 값을 변경 할 수 있는데
동시에 값을 변경한다는 것은 위험한 것이다!
가능하면 값이 변하지 않는 것을 사용하는 것이 좋다.

[reduce human mistakes]
앞으로 변경되어야 될 좋은 이유가 없다면 왠만해서는 const를 이용하여 프로그램을 작성하는 것이 좋다.이렇게 해야 내가 나중에 코드를 변경하거나, 다른 개발자들이 코드를 바꿀때도 그 실수를 방지해줄 수 있다.

⭐정리⭐

Javascript에서는 변수를 선언할 때 Mutable 타입의 let, Immutable의 const가 있다.

❤️ Variable types

Primitive type: 더 이상 작은 단위로 나누어질 수 없는 한가지의 아이템
ex) 숫자, string, boolean, null, undefined, symbol

Object type: single 아이템들을 여러 개 묶어서 한단위(한박스로) 관리할 수 있게 해주는것.
Function: 데이터 타입 중 하나. (In JS)

우리 프로그래밍 언어(자바스크립트)는 first-class function이 지원된다!

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

❤️ 다른언어와의 비교

📚 C언와의 비교(숫자와 관련된 데이터 타입)

C언어: low level 언어 ->개발자들이 프로그래밍을 짜면서 조금더 세세하게 메모리를 관리할 수 ㅇ ->내가 이정도 사이즈의 메모리를 할당해야지 하는것이 가능.

숫자 관련 변수:
short, int, long, float, double등 굉장히 다양한 것들이 존재한다.

Short,int,long: 정수를 할당할 때 씀
Float, double: 소수점인 것, 실수들을 할당할 때 많이 씀

이것들도 내가 얼마나 큰 사이즈를 담냐에 따라서 short를 쓸건지, int를 쓸껀지 등을 사전에 생각을 잘해서 변수를 할당해야된다.

만약에 한 반에 들어갈 수 있는 학생수를 담을 변수를 정의하는데 long을 쓴다는 것은 굉장히 메모리를 낭비하는 것이다. 그럴때에는 short나 int를 쓰는 것이 적합하다.

이런식으로 미리 생각해서 코드를 치는 것이 C언어이다.

📚 Java와의 비교(숫자와 관련된 데이터 타입)

Java는 숫자에 관련된 데이터 타입이 굉장히 많다!
작성하기 전 얼마나 큰 양의 데이터를 저장해야하는지 생각하고 선언해야한다!

📚 JS의 경우(숫자와 관련된 데이터 타입)

하지만 Javascript는 number 하나면 숫자는 충분하다!
얼마나 큰 사이즈의 숫자를 할당할건지 생각할 필요가 전혀없다.
Number타입을 이용하여 숫자를 쓰면 된다!

JS에서는 number이라고 데이터 타입을 선언하지 않아도 된다.
왜냐하면 JS에서는 타입이 다이나믹하게 결정되기 때문.
이렇게

let a 
let b

처럼 어떤 숫자를 할당해주면 끝이다!

📚 타입스크립트와의 비교(숫자와 관련된 데이터 타입)

Type Script에서는 number라고 타입을 명확하게 명시하여 작성해주면 된다!

❤️ Special value

17과 17.1 정수나 소수점자리 숫자든 값 상관없이
Type은 같은 number로 나오는 것을 확인 할 수 있다.(typeof 연산자를 활용하여 type을 알아냄)

하지만 number에서도 특별한 값이 미리 정해져있다!

• 숫자(+)를 0으로 나누게 되면 무한대의 값이 나옴 ->infinity
• -의값을 0으로 나누게 되면 -infinity의 값이 나온다.
• 스트링(not a number)을 숫자로 나누게 되면 NaN(Not a Number)의 값이 출력 된다.

특별한 숫자의 값이 중요한 이유:

Dom 요소를 JS를 이용해서 포지션을 바꾼다던지 다양한 계산을 해야할 때
나누고자 하는 값이 0인지 아닌지, 숫자인지 아닌지 확인 x ->연산을 하면
숫자가 아닌 Nan이나 infinity의 값이 나와 사용자에게 에러가 발생할 수 있다.
항상 연산을 할 때 그 값이 유효한지 확인하고 연산하여야 한다.

현업에서도 이러한 부분에서 에러가 발생하는 경우가 있으므로 유의하기!

❤️ bigInt

JS에서의 number는 -2의 53승 ~ 2의 53승 범위의 숫자만 표현이 가능한데
최근에 bigInt라는 타입이 추가되었음
(숫자 제일 마지막에 n만 붙이면 bigInt로 값이 간주됨)
Chrome,Fire fox에서만 지원됨! 흔하게 쓰여지지는 않겠지만 그냥 추가되었다고만 알면됨.

❤️ String

JS에서는 한가지 글자든 여러개의 글자든 다 string 타입으로 할당이 된다.

일반 string과 다른 변수를 +기호를 이용하여 string을 붙이는 것도 확인할 수 있다.
밑의 결과를 보면 알 수 있듯이 hello brendan이 여서 출력되고 그 타입이 string인 것 또한 알 수 있다.

📌 Template literals(string)

``(백틱)기호를 이용해서 원하는 스트링을 적고 ${ }를 이용하면
변수의 값이 자동적으로 붙여서 나오는 것을 알 수 있다.

아래에서 두번째: ``(백틱)으로 표현한 문장을 + 기호로도 표현할 수 있는데
이는 아래에서 첫번째 코드와 같다.
하지만 이렇게 표현하다 보면 ''과 +를 일일히 찍어야 하므로 번거롭기에
아래에서 두번째 방법을 선호한다. (안에 그대로 있는 스페이스와 문자열이 그대로 출력되기 때문에 간편하다.)

❤️ boolean

False: 0, null, undefined, NaN, '' (비어져있는 스트링)
True: 그밖의 다른 값 1, string …

True값을 바로 할당해도 되고
3<1은 거짓이므로 참거짓을 판별할수도있다 ->False로 할당

❤️ Null과 undefined

Null이라고 할당하는 경우에는 너는 아무값도 아니야 하고 지정해주는것.
위의 경우 null로 값이 할당되어져있는 경우.

Undefined
선언은 되었지만 아무것도 값이 지정되어있지않음.
텅텅 비었는지 값이 들어가있는지 정해져 있지않음.

let x ;
let x undefined;

이렇게 두가지 형태로 쓸 수 있다.

❤️ Symbol

Primitive type의 마지막 symbol
Symbol: map이나 다른 자료구조에서 고유한 식별자가 필요하거나, 아니면 동시에 다발적으로 일어날 수 있는 코드에서 우선순위를 주고싶을때, 정말 고유한 식별자가 필요할 때 쓰여진다.

식별자를 string을 이용하여 쓰는 경우,

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

반면 symbol을 이용하여 식별자를 쓰는 경우

동일한 id를 이용하여 symbol을 만들었지만
각각 다른 식별자로 간주된다.

만약 이것이 동일한지 아닌지 검사를 해보려면

console.log(symbol === symbol2) 와 같이 쓰면 알 수 있다.

따라서 symbol1과 symbol2는 같지 않으며, 각각 다른 식별자이다.
이렇게 false라는 값이 나옴을 확인 할 수 있다.

❤️ symbol.for

스트링이 똑같다면 동일한 symbol을 만들고 싶다!
Symbol.for('id'): 주어진 스트링에 맞는 symbol을 만들어줘!
->두가지가 똑같은 것을 알 수 있다

Symbol은 바로 출력하려고 하면 이렇게 error가 발생한다!

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

.description을 붙여주니 잘 출력이 됨을 알 수 있다.

❤️ Dynamic typing

JS는 동적언어(dynamically typed language)
C,JAVA는 정적언어(Statically Typed Language)
이다.

정적언어는 변수를 선언할 때 어떤 타입일지 결정하여 타입을 같이 선언했던 반면 ,
JS는 선언할 때 어떤 타입인지 선언하지 않고 프로그램이 동작할 때 할당된 값에 따라서
타입이 변경될 수 있다.

동적언어: 내가 좋은 아이디어가 있을 때 빠르게 프로트타입하고싶을 때 유용하게 쓸 수 있는 언어지만 다수의 엔지니어,규모 큰 프로젝트 만들 때
Dynamic typing 때문에 발에 불똥이 떨어지는 경우가 한두번이 아닐수 있다.

hello는 string이기 때문에 value:hello type:string이 출력됨.

text 변수를 1로 바꾸었을 떄 1은 숫자이기 때문에 type은 number로 나온다.

'7' + 5 는 문자열 + 이므로 JS에서는 ''가 없는 5를 string으로 변환하여
string+string 문자열로 인식해버린다.
따라서 type은 string이고 value값은 75라는 값이 나온다.

'8' / '2'는 숫자들을 나눌 수 있는 나누기 연산자 사용과 ''(스트링)안에 들어있는것이 실제로는 숫자라고 인식을 하였기에

number로 타입이 변환되면서
type: number value:4라는 결과값이 나온 것이다! ->나누기가 연산된것!