변수, 상수, scope, 데이터타입 등

[변수]

어플리케이션을 실행하게 되면 어플리케이션마다 쓸 수 있는 메모리가 할당됨

초반의 메모리는 텅 비어있는 박스로, 어플리케이션마다 쓸 수 있는 제한된 수의 박스를 할당 받음.

 

자바스크립트에서 변수를 선언할 수 있는 키워드는 딱 하나! let임 이것은 ES6에 추가됨.

let name = 'js'

let을 통해 name이라는 변수를 정의하게 되면,

한 가지의 박스를 가리킬 수 있는 포인터가 생기게 됨.

name이라는 변수가 가리키고 있는 메모리에 js라는 값이 저장됨.

변수명		메모리
name	------(포인터)------>	js

 

name ='javascript'

추후에 name의 변수가 가리키고 있는 메모리에 다른 값(javascript)을 넣어서 저장할 수 있음

 

[scope]

block scope{중괄호}를 이용해서

블럭{} 안에 코드를 작성하게 되면

블럭 밖에서는 더 이상 블럭 안에 있는 내용을 볼 수 없게 됨

{let name = 'js'}
console.log(name)

그 말은 console.log를 이용해서 블럭 밖에서 name이라는 변수에 접근하게 되면 아무 값도 나오지 않게 됨.

 

반대로 블럭을 쓰지 않고 바로 정의해서 쓰는 변수를 global scope이라고 부름

이런 아이들은 어느곳에서나 접근이 가능함

그래서 블럭 밖에서 출력할 수도 있고 블럭 안에서도 출력할 수 있음

let name = 'js';
console.log(name);
{console.log(name)};

 

글로벌한 변수는 어플리케이션이 실행되는 순간부터 끝날 때까지

항상 메모리에 탑재되므로 최소한으로 써야함

가능하면 클래스, 함수, if, for등 필요한 부분에서만 정의해서 쓰는 것이 좋음.

 

[var의 문제점, var hoisting과 var의 scope]

let이 추가되기 전에는 var을 썼음

자바스크립트 var는 변수를 선언도 하기 전에 값을 할당할 수도 있음

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

console.log(name) //undefined -> 선언되어있지만 값은 없는 상태
name='js'
var name
console.log(name) //js

 

console.log(name)
name ='js'
let name
console.log(name)
//선언하기 전에 출력했으므로 에러가 발생함

따라서 var은 변수를 선언하기도 전에 값을 할당할 수 있음 이것을 var hoisting이라고 함

hoisting은 어디에서 선언했느냐와 상관없이 항상 제일 위로 선언을 끌어올려주는 것을 말함

*호이스팅 : 끌어올려주다

console.log(age) var age= 4 => undefined가 나옴 (변수가 선언은 됐으나 값이 할당되지는 않았다)

console.log(age) let age =4 => error가 나옴

 

var은 block scope이 없음. var은 function scope으로 function이외의 블럭을 철저히 무시함.

age라는 변수를 블럭 안에 var로 선언하고 콘솔을 이용해서 블럭 밖에서 출력하면 정상적으로 나옴.

{var age =20}
console.log(age)//20

{let age = 20}
console.log(age)
//에러 발생

아무리 깊은 곳에 변수를 선언한다고 해도

var을 이용해서 선언한 것이라면

어디서나 아무곳에서나 보일 수 있는 게 됨

 

[constant]

const는 한 번 할당하면 값이 절대 바뀌지 않음

변수(let)를 이용하면 변수가 메모리에 할당된 박스를 가리키고 있음

이 포인터를 이용해서 값을 바꿔갈 수 있었음

 

constance는 가리키고 있는 포인터가 잠겨있음

그래서 값을 선언함과 동시에 할당한 뒤로는 다시 값을 변경할 수 없음. 

변수명	포인터	메모리
let name	------------------->	js (변경가능)
const age	--------(잠김)------>	20 (변경불가)

 

[mutable vs immutable]

값이 변경될 수 있는 것을 mutable data type이라고 함

값이 변경될 수 없는 것을 immutable data type이라고 함

constance 는 immutable data type임.

 

앞으로 변경할 이유가 없다면 웬만해서는 const를 이용해서 프로그램을 작성하는 게 좋음

 

정리 : 자바스크립트에서는 변수를 선언할 떄 mutable type의 let과 immutable type의 const가 있음

 

[variable types]

어떤 프로그래밍 언어든 primitive type과 object type 두가지로 나누어져 있음

primitive 타입은 더 이상 작은 단위로 나누어질 수 없는, 한 가지의 아이템(single item)을 말함.

ex. number, string, boolean, null, undefined, symbol이 있음 

 

object 타입은 싱글아이템을 묶어서 한 단위, 한 박스로 관리할 수 있게 해주는 것을 말함 

 

cf. first -class function :  프로그래밍언어에서 함수도 데이터타입처럼 변수에 할당이 가능하고,

그래서 함수의 파라미터로도 전달이 되고, 함수에서 return type으로도 함수를 사용할 수 있음

 

[number]

자바스크립트는 정수나 실수 모두 number타입으로 할당됨

number에서도 특별한 값이 있음

positive/0 -> infinity

negative/o -> -infinity

숫자가 아닌 string을 숫자로 나누면 NaN이 나옴

 

자바스크립트를 이용해서 DOM요소의 포지션을 갖고오거나

다양한 계산을 하게 될 때 나누고자 하는 값이 0인지, 숫자는 아닌지 검사하지 않으면

infinity나 NaN이 나올 수 있음

그래서 연산할 때 그값이 number인지 확인해야함 : typeof 

 

[string]

+기호를 이용하면 일반 문자열과 다른 타입의 변수를 문자열로 연결시킬 수 있음

"", '', ``

template literals(``) -> 백틱기호 안에서 ${}을 사용하면 변수의 값을 문자열로 바꿔서 나옴

let name= 'js'
console.log('name : '+name)
console.log(`name : ${name}`)

해당 문자열에서 idex가 0인 문자를 알고 싶을 때

문자열.charAt(0)

문자열[0]

cf. 문자열[0].charCodeAt() -> 문자열의 첫번째 글자의 코드번호

 

[boolean]

true/false

false를 가지는 것들 : 0, null, undefined, NaN ''(비어져있는 스트링)

 

[null, undefined]

null이라고 할당하면 '너는 텅텅 비어있는 엠티값이야 아무것도 아니야'라고 지정하는 것임

아무것도 지정하지 않고 선언은 하면 값은 undefined임

let name1 =null;
let name2;
console.log(name1) // null
console.log(name2) //undefined

 

[symbol]

map이나 다른 자료구조에서 고유한 식별자가 필요하거나

동시다발적으로 일어날 수 있는 코드에 우선순위를 부여하기 위해 고유한 식별자가 필요한 경우

사용함

심볼은 동일한 스트링을 이용해서 만들더라도 두 가지 심볼은 다른 것임

스트링이 같으면서 동일한 심볼을 만들고 싶으면 Symbol.for('')이렇게 해야함

symbol은 바로 출력하면 에러가 뜨므로 symbol.description을 이용해서 스트링으로 변환해서 출력해야함

 

[object, function]

object {}

const ellie = {name : 'ellie', age : 20 }

추후에 추가

 

[dynamic typing]

자바스크립트는 dynamically type language임

c나 java는 statically type language임

statically type language는 변수를 선언할 때 어떤 타입인지까지 같이 결정하는 반면

자바스크립트는 선언할 때 어떤 타입인지 선언하지 않고

프로그램이 동작할 때 할당된 값에 따라서 타입이 변경될 수 있음

 

[타입스크립트]

타입스크립트는 자바스크립트 위에 타입이 올려진 언어임

자바스크립트는 브라우저가 바로 이해할 수 있지만

타입스크립트는 브라우저가 바로 이해할 수 없음

따라서 최종적으로는 바벨이라는 트렌스컴파일러를 이용하여  자바스크립트로 바꾸어야 함

 

 

----핵심 정리----

variable ; mutable(let),

constant ; immutable(const)

variable -> 메모리의 값을 읽고 쓰는 게 가능함

값을 할당한 다음 변경이 가능함

constant -> 메모리의 값을 읽기만 가능함 

선언&할당한 다음에는 읽기만 가능하고 다시 다른 값을 쓰는 것이 불가능함

 

 

자바스크립트에서 변수의 값이 바뀔 이유가 없으면 const로 선언하는 것이 좋은 습관임 

 

메모리의 값이 저장되는 두가지의 방법이 있음

1. 프리미티브 타입인지

2. 오브젝티브 타입인지에 따라서 다른 방식으로 저장됨 

1-> value 값 자체가 메모리에 저장됨

2-> object는 메모리에 한 번에 갈 수 없고 레퍼런스(ref)를 거쳐서 감

변수 명	포인터	메모리
let name	----------->	js
const age	---(잠김)--->	20
const info	---(잠김)--->	ref --------->	name--->	java

const info = {name : 'java'}

const info라고 선언하고 object를 할당{}하게 되면

info가 가리키고 있는 곳에는 레퍼런스(ref)가 있음

info가 가리키는 포인터만 잠김

즉 info가 다른 오브젝트로 변경이 불가능하지만 name은 계속 변경이 가능함