변수(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(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는 var를 선언하기도 전에 쓸 수 있어 좋지 않다. (hoisting 이란 어디에 선언했나에 상관없이 항상 선언을 맨위로 끌어올리는 것을 말한다.) 또한, var 는 block scope이 안된다.
{} 이렇게 코드를 Block 즉, 대괄호 안에다가 작성하게 되면, 밖에서는 더이상 Block안의 내용을 볼 수 없다.
반대로, {} 을 쓰지 않고, 파일 안에 바로 정의해서 쓰는 것을 Global scope이라고 하는데 아무데서나 찾아서 볼 수 있다 .
constants
한번 할당하면 절대 값이 바뀌지 않는다. 메모리에서 읽기만 가능하다.
값이 계속 변경될 수 있는 것은 Mutable datatype
이라고 한다.
Mutable dataype : let
inmmutable data type : constant
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;
값을 할당한 후에 값이 변경되지 않는 데이터 타입을 사용하는것이 좋다.
Variable types
는 세가지로 나누어져 있다.
primitive, single item
: number, string, boolean, null, undefined, symbol
object
, box container
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에 대해서 좀 더 알아보자.
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
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인것을 알 수 있다.
자바스크립트는 선언할때 어떤타입인지 선언하지 않고, 프로그램이 동작할때 할당된 값에 따라서 타입이 변경될 수 있다. 내가 좋은 아이디어가 있을때, 빠르게 프로토타입을 하고 싶을때는 유용하다.
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으로 변경된다.