TIL - Variable, Scope, let vs var, data types, hoisting , Dynamic typing

jake·2022년 1월 8일
0

TIL

목록 보기
27/54
post-thumbnail

Variable - 변수 (read & write)

어플리케이션을 실행하게되면 메모리가 할당되어진다.
어플리케이션마다 쓸 수 있는 박스의 갯수가 메모리에 제한적으로 할당되어진다.
변수를 선언하면 하나의 박스를 가르키는 포인터가 생성된다.
변수가 가르키는 메모리에 값이 할당(저장)되어진다.

즉, 변수를 선언하면 메모리에 변수가 저장되면서 포인터가 메모리를 가르킨다.
이 포인터를 통해 값을 변경할 수 있는 것이다.

추가적으로 primitive type, object type에 따라서 메모리에 값이 다른방식으로 저장된다.
primitive type은 Value 자체가 메모리에 저장된다.

object는 커서 메모리에 한번에 못올라간다. 때문에 Object를 가르키는 reference가 메모리에 저장된다. const로 선언했기 때문에 object를 변경할 수 없게 포인터가 잠긴 것이고 이름과 나이는 변경이 가능하다.

Block scope

{ } Block scope에 생성된 변수들은 Block안에서만 사용되어 밖에서 console.log를 찍어봐도 사용할 수 없다.
Global scope로 선언한 변수는 Block에서도 쓸수 있고 Block밖에서도 쓸 수 있다.
Global 변수는 어플리케이션이 실행되는 순간부터 끝날때까지 항상 메모리에 탑재되어있다. 때문에 가능하면 적게 쓰고 가능하면 클래스나 함수 if나 for에 필요한 부분에서만 정의해서 쓰는것이 좋다.

let vs var

자바스크립트에서 변수를 선언할 수 있는 키워드는 let이며 es6에 추가되었다.
데이터를 변경시킬 수 있는 Mutable data type이 let이다.
그전에는 var를 사용했다. 근데 이제 var는 쓰면안된다.
var는 사용하면 안되는 이유는
1. 선언도 하기전에 값을 할당하고 그 뒤에 선언해도 문제없다.
2. 심지어 값을 할당하기 전에도 출력가능하다.
3. block scope이 없다. 때문에 var로 선언한 것은 어디서나 아무대서나 쓸 수 있다. (but, var를 함수 안에서 썼을경우 함수 scope안에서만 사용가능하다. 나머지는 전부 전역변수 취급된다.)

const (read only)

const는 immutable data type이다. 값을 선언하고 할당한뒤에 절대 못바꾼다.
변수가 메모리에 저장되고 메모리를 가르키는 포인터가 잠겨지기 때문이다.

const를 사용해야하는 장점들이 있다.
1. security
보안상의 이유. 작성된 값을 해커들이 값을 변경하는 것을 방지할 수 있다.
2. thread safety
어플리케이션을 실행하면 1가지 프로세스가 할당 되고 그 프로세스 안에서 다양한 thread가 동시에 돌아가면서 어플리케이션을 효율적으로 동작하게 도와준다.
이때 다양한 thread들이 동시에 선언된 변수의 값을 변경하지 못 하게 할 수 있다.
3. 값이 변하지 않는 것이라면 const를 사용해서 작성해야 실수를 줄일 수 가 있다.

Variable types(변수타입)

  • primitive type (원시타입)
    더 이상 작은단위로 나눠질 수 없는 한가지의 아이템을 말한다.(single item)
    number, string, boolean, null, undefiend, symbol이 있다.

  • object type (객체타입)
    single item을 여러개 묶어서 한 단위로 한박스로 관리할 수 있게 하는 것이 object이다.

  • Javascrit에서는 function도 data type중 하나이다.그리고 first-class funcstion이 지원된다는 말이다.
    function도 다른 데이터 처럼 변수에 할당이 가능하고 , 또 이렇게 때문에 함수에 파라미터 인자로도 전달이 가능하고, 함수에서 return 타입으로 function을 리턴할 수 있는 것이다.

정리하자면 자바스크립트는 first-class function을 지원하기때문에
변수에 함수를 할당할 수 있고, 함수의 인자로 함수를 전달할 수 있으며 함수의 리턴값으로 함수를 내보낼 수 있다.


이제 primitive type들에 대해서 하나하나 알아보려 한다.

Number (c언어, Java data types for number 와 Javascript의 number)

c언어, Java는 로우레벨언어로 개발자들이 프로그래밍을 짜면서 조금 더 세세하게 메모리를 관리할 수 있다.

  • C언어는 short,int,long은 정수를 할당할 때, float,double은 실수를 할당할 때 쓴다.

  • 자바도 마찬가지로 number type이 다양하게 있다.
    그래서 작성하기 전에 얼마나 큰 데이터를 저장하는지를 생각한 다음에 작성해야한다.

  • but, Javascript는 이러한 것을 생각할 필요없다. typescript에서도 값이 정수인지 소수인지 상관없이 number타입만 적어주면 끝!

  • number에 대해서 알아놓아야 할 몇가지가 있다.

  1. 양수를 0으로 나누면 Infinity, 음수를 0으로 나누면 -Infinity, 글자(string)을 0으로 나누면 NaN(not a number)이 나온다.

이 세가지의 값을 알아야하는 이유는 DOM요소를 Javascript를 이용해서 포지션을 바꾸거나 다양한 계산을 할 때 나누고자 하는 값이 0인지 아닌지 숫자인지 아닌지 확인도 하지않고 연산을 바로해버리면 Infinity나 NaN을 받을 수 있기 때문에 사용자에게 에러가 발생할 수 가 있다. 항상 연산을 할 때 그 값이 정말 valid한 값인지를 확인하고 연산하는 것이 중요하다!

2. Javascript의 number는 -2의53승 부터 2의53승까지의 숫자만 표현이 가능하다.
근데 최근에 bigInt라는 타입이 추가되어서 큰 숫자뒤에 n만붙여주면 bigInt타입이 된다. 크롬과 사파리에서만 지원하기 때문에 아직 크게 쓰일 것 같지않다.

string

string도 다른언어에서는 한가지의 글자와 여러가지의 글자의 타입이 따로 있다.
but, Javascript는 한가지든 여러가지든 모두 string이다.
또한 일반 변수와 string을 붙이는 것도 가능하다. (template literals를 사용하면 더 쉽다)

boolean

불리언 값은 true와 false를 나타낸다. 아래있는 것을 숙지해놓자.
false: 0, null, undefined, NaN, ''
true : any other value

null, undefined

null은 값을 변수에 할당하여 빈값이라고 지정해 주는 것이다.
undefined는 변수를 선언하고 값을 할당하지 않았을 때 나타나는 것이다.

symbol (참고사이트)

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


호이스팅이 뭔가요?

호이스팅은 어디에 변수를 선언했냐에 상관없이 변수를 범위에 최상단으로 끌어올려주는 것입니다.

Dynamic typing (Javascript는 dynamically typed language)

  • C나 Java는 statically typed language
    즉, 변수를 선언할 때 어떤 타입인지 결정해서 타입을 같이 선언하는 반면에
  • Javascript는 선언할 때 어떤 타입인지 선언하지않고 런타임, 프로그램이 동작할 때 할당된 값에 따라서 타입이 변경 될 수 있다.
    즉, 자바스크립트는 타입이 런타임에서 변경되기 때문에 런타임에서 에러가 발생할 경우가 많다. 이것 때문에 TypeScript가 나왔다!
    TypeScript도 BABEL 트랜스컴파일러를 이용해서 브라우저가 이해할 수 있는 자바스크립트로 바꿔줘야한다.

출처
드림코딩 유튜브

profile
열린 마음의 개발자가 되려합니다

0개의 댓글