Variable, Data Type

choijw1116·2020년 9월 18일
0
post-thumbnail

1. Variable


변수(variable) 란 값을 저장하는 데이터공간 / 박스와 같다고 생각하자!
변수는 메모리에 읽고 쓰기가 가능한 변할 수 있는 값이다.

let globalName = 'global name';

/*block{}이 아니라 file안에 바로 쓰는 변수는 global scope이라부른다.
어느곳에서나 접근이 가능하다. application이 실행되는 순간부터 끝날때까지 
항상 메모리에 탑재되기 때문에 최소한의 사용이 좋다. 필요한 부분에서만 선언해서 쓴다.*/

{ // 코드를 block안에서 작성 / block밖에서는 안의 내용을 볼수 없음
    let name = 'ellie'; // let키워드를 이용해 name을 선언하고 ellie를 할당
    console.log(name);
    name = 'hello';
    console.log(name);console.log(globalName);
  	// {}안에서도 부를수 있다. global scope이니까
}
console.log(name); // 이렇게 밖에서 name을 불러도 blockscope때문에 출력이 되지 않는다.
console.log(globalName);//밖에서도 부를수 있다. globalscope이니까!

⚠ var를 쓰면 안되는 이유 ⚠


변수를 선언할 때는 var말고 let을 써준다. 왜 var는 안될까?

/* var(don't ever use this!)
var hoisting (끌어올려주다 move declaration from bottom to top)
var has no block scope */

console.log(age);
age = 4;
var age;
// 선언하기도전에 값을 할당하거나 할당전에도 출력이 가능

var hoisting

  • var has no block scope

일단 var는 var를 선언하기도 전에 쓸 수 있어 좋지 않다. (hoisting 이란 어디에 선언했나에 상관없이 항상 선언을 맨위로 끌어올리는 것을 말한다.) 또한, var 는 block scope이 안된다.

  • Block scope

{} 이렇게 코드를 Block 즉, 대괄호 안에다가 작성하게 되면, 밖에서는 더이상 Block안의 내용을 볼 수 없다.
반대로, {} 을 쓰지 않고, 파일 안에 바로 정의해서 쓰는 것을 Global scope이라고 하는데 아무데서나 찾아서 볼 수 있다 .


2. Constant


constants 한번 할당하면 ~~절대 값이 바뀌지 않는다~~. 메모리에서 읽기만 가능하다.

값이 계속 변경될 수 있는 것은 Mutable datatype 이라고 한다.

Mutable dataype : let
inmmutable data type : constant

!Note!

Immutable data types: primitive types, frozen objects (i.e. object.freeze())
Mutable data types: all objects by default are mutable in JS

Favor immutable data type always for a few reasons;
값을 할당한 후에 값이 변경되지 않는 데이터 타입을 사용하는것이 좋다.

  • security(보안상의 이유)
  • thread safety
  • reduce huamn mistakes

3. Variable types


Variable types는 세가지로 나누어져 있다.

  1. primitive, single item : number, string, boolean, null, undefined, symbol

  2. object, box container

  3. function, first-class function


Primitve 타입은 더이상 작게 나누어질 수 없는 single item을 말한다.
number, string, Boolean, Null, Undefined, Symbol 이 있다.

Object타입은 이 single item들을 모아서 한 단위로, 한박스로 관리할 수 있다.

Function은 자바스크립트에서 하나의 varaiable types인데 first-class function 이 지원이 된다. 이 말은 즉, function도 datatype처럼 변수에 할당이 가능하고, parameter(인자) 로도 전달이 가능하고, 함수에서 return 타입으로도 function을 return할 수 있다는 것을 뜻한다.

여기서는 primitive type에 대해서 좀 더 알아보자.


Primitive type


number

자바스크립트에서 integer(정수) 나 deciamal number(소수점) 의 수 등 상관없이 number type으로 할당이 된다. 특별한 값이 미리 정해져 있는데,

 infinity = 1/0;  
 positive한 value의 값을 0으로 나누게 되면 infinity 가 된다.

 infinity = -1/0 
 negative한 value의 값을 0으로 나누게 되면 negative infinity 값이 나온다.
 
 NaN (not a number) 는 수가 아닌것 즉, 문자열을 수로 나누게 되면 NaN이 출력된다.

DOM요소를 자바스크립트를 통해 포지션을 바꾸거나 계산을 할때 나누고자 하는 값이 0인지 아닌지 숫자인지 아닌지 확인을 안하면 infinity나 Nan이 나올 수 있어서 error가 발생하는 경우가 있기 때문이다.

  ES6에 새롭게 추가된것 > bigInt//
  숫자의 맨끝에 n을 붙이면 바로 bigInt가 출력된다.
  

string

자바스크립트에서 문자열은 한가지의 글자든 여러개의 글자든 다 ~~string type~~으로 할당한다.

일반 string과 다른 변수는 + operator(연산자)를 통해서 string type으로 출력한다.

그리고 template literals(string)이라고 해서 ``백틱을 이용해서 그 안에 원하는 string을 적고 ${}달러와 대괄호, 기호를 쓰고 대괄호 안의 변수의 값이 자동적으로 붙여져서 출력되는 것을 확인 할 수 있다.

const helloBob = `hi ${brendan}!`;

Boolean

 false: 0, null, undefined, NaN, ''
 true: any other value 
 
 const canRead = true;   //   이것처럼 바로 true값을 할당해줘도 boolean type이고 
 const test = 3 < 1;   //   3 < 1같은 expression도 boolean type으로 출력한다.

Null

Null은 명확하게 '너는 텅텅 비어있는 empty이야' 라고 값을 지정하는것.

let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);

Undefined

선언은 되었지만, 값이 아무것도 지정이 되어있지 않아서 비어있는지 값이 있는지 모름.


Symbol

  • creat unique indentifiers for objects
const symbol1 = Symbol('id'); // 동일한 'id'
console.log(symbol1 === symbol2); // false로 출력된다.

map이나 다른 자료구조에서 고유한 식별자가 필요하거나 동시다발적으로 코드에서 우선순위를 주고싶을때, 정말 고유한 식별자가 필요할 때 사용한다. 간혹 식별자를 string을 이용해 쓰는 경우도 있다. string은 다른 모듈이나 다른 파일에서 동일한 string을 썼을때, 동일한 식별자 라고 구분한다. 반대로 symbol 같은 경우에는 동일한 id를 이용해서 symbol을 만들어도 두 symbol은 다른 경우이기 떄문에 console로 검사를 하면 서로 같은것이 아니고, false로 나오게 된다.

const symbol1 = Symbol.for('id'); //동일한 'id'
const symbol1 = Symbol.for('id'); // 동일한 'id'
console.log(symbol1 === symbol2); // true

만약 string이 똑같다, 동일한 symbol을 만들고 싶다 고 하면, symbol.for('id') 라고 하면, 주어진 string에 맞는 심볼을 만들어줘 가 되어서 console로 출력하면 true인것을 알 수 있다.


4. Dynamic typing: dynamically typed language


자바스크립트는 선언할때 어떤타입인지 선언하지 않고, 프로그램이 동작할때 할당된 값에 따라서 타입이 변경될 수 있다. 내가 좋은 아이디어가 있을때, 빠르게 프로토타입을 하고 싶을때는 유용하다.

let text = 'hello'; // hello라는 string을 할당하게 되면 
console.log(`value: ${text}, type: ${typeof text}`); 
// value: hello
// type: string  text는 바로 string이라는 변수가 된다.
/*************************************************/
text = 1; // text에 1을 할당하게 되면
console.log(`value: ${text}, type: ${typeof text}`); 
// value: 1
// type: number
// type이 숫자로 변경된것을 볼 수 있다.
/*************************************************/
text = '7' + 5; 
// text에 string과 5를 더해버리면 string에 더하기가 있으니까 
// 숫자5를 string으로 변환해서 string과 string의 결합으로 바꾸어버린다.
console.log(`value: ${text}, type: ${typeof text}`); 
// value: 1
// type: string

type이 string으로 변경된다.

profile
와니완의 월드와이드와니웹🐥

0개의 댓글