Javascript

자바스크립트를 한 주 동안 공부하면서 자바스크립트의 역사를 유튜브에서 드림엘리를 통해서 알게 된 것을 시작으로 변수 선언, 조건문, 반복문 등 기본 개념을 공부했다. 그리고 핑퐁게임도 차근차근 따라하며 만들어 보았다.
유튜버 드림엘리에게 배운 자바스크립트 변수 선언의 차이점에 대해 정리해본다.

1 .변수(variable)와 데이터 타입

변수란? 간단하게 변경 될수 있는 값이다.
자바스크립트에서 변수를 선언하는 방법과 데이터 타입 대해 정리하려한다.

var, let, const의 차이점

1) let (added in es6)

mutable data type으로 값변경이 가능한 데이터 타입이다.
자바스크립트에서 변수를 선언 할수 있는 let은 es6 이크마스크립트 6에서 도입되기 시작되었다.

let name = ‘sammy’;
console.log(name);
name=’hello’;
console.log(name);

이와 같이 name이라는 변수에 내 이름의 값을 할당 한 뒤에 hello로 값을 바꾸면 값이 변경된 것을 확인할 수 있다.

es6 도입 전에는 var를 썼는데, 주변에 쓰는 사람을 보면 쓰지 말라고 알려주라고 했다. 2년 전에 내가 코딩공부를 살짝 했을 때만 해도 var를 썼던 기억이 있었는데 조금 놀랐다! es6 도입된지 꽤 되었는데 몰랐다는 것이 머리를 한대 맞은 것 같았다..

var 왜 쓰면 안되나?? 쓰면 안되는 이유!

대부분 프로그래밍 언어에서는 변수를 선언하고 값을 할당하는 것이 정상적이다.. 그런데 var는 값을 정의하기도 전에 값을 할당할 수 있고 출력 가능하다.

var hoisting

어디에 선언했는지 상관없이 항상 맨 위로 선언을 끌어 올려주는 것을 말한다. has no block scope! var는 블럭 안에서 지정한 변수도 밖에서 쓸 수 있다. 대규모의 프로젝트에서 선언하지 않은 값들이 할당되어서 오고 이런 단점이 있었음.

참고로 babel 을 이용해서 es6로 개발하고 배포할때는 es4,5로 바꾸어서 할 수 있다.

• block scope
  block {} 안에 코드를 작성하면 블럭 밖에서 변수에 접근하면 변수값에 접근할 수 없다.

- global scope

블럭 안과 밖 어디에서나 접근이 가능하다..
항상 메모리에 탑재 되어있어서 최소한으로 사용하는 것이 좋다.

가능하면 함수나 클래스에서 필요한 부분에서만 지역변수로 정의 해서 쓰는 것이 좋다.

2) constants

immutable data type 한번 값을 할당하면 절대 값이 바뀌지 않는다.
값이 변경되지 않는 데이터 타입을 사용하는것을 권장한다.

• 이유

1. 보안성
2. thread safety (다양한 thread 들이 동시에 접근해서 값을 변경하려고 할 수 있기 때문에 그렇게 되면 효율적으로 접근 경로들을 관리하는 것이 어려워짐 )

2. javascript 변수 타입

primitive,single item: number, string, boolean, null, undefine,symbol, object, box container,function

• first-class function (함수도 다른 데이터 타입처럼 변수에 할당 가능, 파라미터로도 가능, 리턴 타입으로도 가능하다는 뜻)

자바스크립트 에서는 데이터 타입이 다이나믹하게 결정이 되어서 데이터 타입을 명시하지 않아도 됨! let a = 12;

대신 typescript에서는 적어줘야한다.
-let a: number =12;
-let b: number =1.2;

special numeric values: infinity, -infinity, nan

const infinity= 1/0 ;(무한대)
const negative infinity = -1/0; (음수를 나누면 음수무한대)
const nAn =’not a number’ /2; 숫자가 아닌 값을 나누었을때 값

확인하고 연산이 필요할 때가 있다!

• 추가된 타입 bigInt
  const bigInt = 123043598793659639875081358103850712204n;
  기존 number의 표현 범위 over (-253)~253까지만 표현 가능했었음 - 숫자 끝에 n을 붙이면 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
백틱(backtic) 기호를 이용하면 편리하게 문자열을 표현할 수 있다

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

boolean 타입

false:0,null,undefined,NaN
true: any other value

symbol 타입

맵이나 자료구조에서 고유식별자가 필요하거나 동시다발적으로 일어날수 있는 코드에서 우선순위를 주거나 고유한 식별자가 필요할 때 사용

동일한 string을 작성해도 다른 심볼로 만들어지기 때문에 주어지는 string에 상관없이 고유한 식별자를 만들수 있다.

const symbol1 =Symbol(‘id’);
const symbol2 =Symbol(‘id’);
console.log(symbol1===symbol2); => false
const gsymbol1 =Symbol.for(‘id’); => 주어진 string에 맞는 symbole을 만듦
const gsymbol2 =Symbol.for(‘id’);
console.log(gsymbol1===gsymbol2);=> true

심볼 출력시 주의할점
console.log(value:${symbol1.description}. type:${typeof symbol1});
=> 심볼을 출력할때.description을 이용해서 string으로 변환을 해야한다.