Variable, rw (read / write)
: 변수
: 변경될 수 있는 값
: let을 많이 씀
let name = 'ellie';
- 해석: let이라는 키워드 이용해서 name이라는 변수를 선언(declaration)하고 ellie라는 변수의 값을 할당한다.
name = 'hello';
- 해석: 다시 name 이라는 변수에 hello 라는 값을 할당하면 console에는 ellie와 hello가 나란히 출력된다.
변수가 쓰이는 원리 어플리케이션을 쓰게 되면, 어플리케이션마다 쓸 수 있는 메모리가 할당되어진다. 이 메모리는 텅텅 비어있는 박스들인데 let이라는 키워드를 이용해서 name이라는 변수를 정의하게되면 한가지의 박스를 정의할 수 있는 포인터가 생김. name이라는 변수가 가리키고 있는 메모리 박스 어딘가에 ellie라는 값을 저장할 수 있음. 추후에 name이 가리키고 있는 값에 다른 값(hello)를 저장할 수 있는 것. |
Block scope
: 괄호 (블럭)를 이용해 코드를 작성하면 블럭 밖에서는 안에 내용을 볼 수 없다.
따라서 블럭 밖에서 console.log(name); 을 적어 접근하게되면 아무 값도 나오지 않는다.
global scope
- 반대로 블럭을 쓰지않고 파일 안에 정의해서 쓰는 변수를 global scope이라고 하는데 어느 곳에서나 접근 가능하다.
블럭 밖에서도, 안에서도 보이기 때문에 콘솔에서 둘다 출력됨.
===> global 변수들은 어플리케이션의 시작부터 끝날때까지 항상 메모리에 탑재돼 있어서 최소한으로 써야함. (class, if, for, 함수 등 필요한 부분에서만 쓰는 것이 좋다)
<JS에서 변수 선언 키워드>
딱하나!
let
그 전에는 var 을 썼다.
* var을 쓰면 안되는 이유?
1. var hoisting : move delaration from bottom to top 2.has no block scope |
1. var hoisting
- 대부분의 자바스크립트에서는 변수 선언 후 값을 할당하는 게 정상적.
var age;
age = 4;
하지만 선언도 하기 전에 값을 할당할 수 있고
age = 4;
var age;
값을 할당하기 전에도 출력할 수 있다.
console.log(age);
age = 4;
var age;
===> undefined로 나온다.( 변수는 정의돼있지만 값이 아직 안들어가있다.) 그래서
console.log(age);
age = 4;
console.log(age); (값을 할당)
var age;
===> 값을 할당한 후 출력하면 4로 나온다.
만약 var이 아닌 let을 사용한다면 에러가 뜬다. (정상적)
선언하기도 전에 값을 할당했기 때문이다.
하지만 var은 선언하기 전에 값을 할당할 수 있다. 그리고 이것을 var hoisting 이라고 한다.
* var hoising : 어디에 선언했는지 상관없이 항상 제일 위로 선언을 끌어올려주는 것을 의미한다. |
- global scope을 이용해서 선언했기때문에 파일 제일 위에 선언이 올라가게된다.
+ console.log(age);
- age를 출력하게되면 undefined로 나온다.
2. has no block scope
: var은 블럭을 철저히 무시한다.
age라는 변수를 블럭 안에서 선언했음에도 불구하고 콘솔을 이용해 age를 밖에서 출력하게되면 정상적으로 나온다.
아무리 블럭을 이용해 변수 선언해도 어디에서나 보일 수 있음.
초창기에는 이런 유연성을 이용해서 대충 동작하는 어플리케이션을 만들었지만 어느정도 규모있는 프로젝트를 하다보면 선언하지도 않은 값들이 할당되어옴. 이런 위험부담때문에 let을 써야한다.
===> 호환성 생각해봤을 때 es6는 메이저브라우저에서 다 지원되기때문에 안심하고 써도됨.
constant, r(read only)읽기만 가능하고 다른 값을 쓰는게 불가능
: favor immutable data type always for a few reasons:
-security 보안상 (해커들이 데이터를 바꿀 수 있음)
-thread safety (어플리케이션을 효율적,빠르게 돌릴 수 있음)
-reduce human mistakes(값을 바꾼다는 것은 위험한 것이기때문에 안변하는게 좋다 변경해야할 이유가 없으면 const를 사용하 는게 좋다)
: 할당하면 값이 바뀌지않음. (잠금)
: 값을 선언함과 동시에 절대로 값이 변경될 수 없음.
데이터 타입엔 mutable / immutable 2가지가 있다.
mutable data types | immutable data types |
변경이 가능한 데이터타입 | 값이 절대로 바뀌지 않는 것. |
= object (스스로 변경 가능) - JS에서 모든 object는 변경이 가능하다 ex) - JS에서 array(배열)은 mutable data type. |
- primitive types ex) ellie라는 string을 정리하게 되면 ellie를 메모리에 통째로 올렸다가 다른 string으로 변경이 가능하지, ellie에서 i를 빼고 다른 것으로 바꾼다던지 데이터 자체 변경x. -frozen objects : 변경X |
JavaScript 변수 선언 | |
Mutable (바뀌는것) | Immutable (바뀌지 않는것) |
let | const |
Variable types (2가지)
primitive (Variable로 값이 저장됨) | object (object로 값이 저장됨) |
- single item(더 이상 나눠질 수 없는 한 가지 아이템) - 값 자체가 메모리에 저장됨 |
box container(싱글아이템들을 한박스로 관리해주는 것) - 너무 커서 메모리에 한번에 올라갈 수 없음. object를 가리키는 ref가 메모리에 저장된다. |
-number -string -boolean -null -undefined -symbol |
-function -first-class function (뜻: 프로그래밍 언어에서는 function 도 다른 데이터타입처럼 변수에 할당 가능하고 함수의 parameter(인자)로도 전달되고 return타입으로도 function을 return할 수 있는 것이 가능하다) |
C언어 (좀 더 세세한 메모리 관리 가능)
-short / int / long (숫자 할당할 때), float / double (소수점 할당할 때) 등 다양함. 얼마나 큰 사이즈를 담느냐에 따라 데이터타입을 다 다르게 써야한다.
Java에서도 숫자에 관련된 데이터타입이 많다.
.
.
.
primitive
1. number
하지만 JS에서는 number만 사용하면 끝!!
JS에서는 number선언 안해도 됨(타입이 다이나믹하게 결정되기 때문)
let a = 12;
let b = 1.2;
어떤 숫자든 할당하면 끝.
아직 배우진 않았지만 TS(Time Script)에서도 number을 쓴다. let a: number = 12; let b: number = 1.2; ===> 이런게 있구나 알아만두기. |
JS에서는
integer :정수
decimal number: 소수점
===>number type으로 할당된다.
Special numeric values : infinity, -infinity, NaN
: number에서도 특별한 값이 적용돼있다.
1. infinity
: 숫자를 0으로 나누면 무한대(infinity)가 된다.
2. negative infinity
: 마이너스 값(negative value)을 0으로 나누면 negative infinity값이 나온다.
3. NaN (not a number)
: 숫자가 아닌 경우. 숫자가 아닌 string을 숫자로 나누면 NaN값이 나오게된다.
다양한 계산 해야될때 나누어야 하는 값이 0인지 아닌지 숫자인지 아닌지 모르고 연산을 하면 숫자가 아닌 Infinity, -Infinity, NaN가 나와 사용자에게 에러날 수 있음. 연산할때 그 값이 valid한 값인지 확인해야한다.
* bigInt
- JS의 number는 -2의 53승부터 2의 53승까지 가능(표기: -2**53 ~ 2*53)
- 최근에는 bigInt 라는게 추가되었다. 숫자의 마지막에 n만 붙이면 bigInt로 간주됨
ex) const bigInt = 12345678912345678945615234789465n;
===> chrome, firefox에서만 인식됨.(다른브라우저 지원X) 많이 쓰지는 않을 것으로 예상되지만 알아만두기
2. string (문자열)
1. 한 가지 글자든 여러개 글자든, string 타입으로 할당된다.
ex)
const char = 'c';
const brendan = 'brendan';
2 . 일반 string과 +기호를 이용해 string을 고칠 수 있다.
ex)
const greeting = 'hello' + brendan;
- string이 연결되어 나옴.
3. template literals 또는 template string (많이쓰임)
문법:
'hi ${brendan}!';
└원하는 string(hi)을 적고 달러의 값을 적고 그 안에 괄호에 변수(brendan)을 쓰면 그 변수의 값이 자동적으로 붙여져서 나옴
ex)
const helloBob = 'hi ${brendan}!';
(아래) +기호를 썼을 때 번거롭다 ( 코트('')에 넣어서 플러스하고 또 코트에 넣어서 플러스... 반복..)
(위) ``(back tick;빽틱, 백틱)을 이용하면 간편하게 만들 수 있다.
3. Boolean
: false: -, null, undefined, NaN, ' '
: true: any other value (1이나 string 값)
ex)
const canRead = true;
const test = 3 < 1; // false
4. Null
: empty값 지정해주는 것
ex)
let nothing = null;
5. undefined
: 선언은 됐지만 아무것도 값이 지정돼있지 않는다.
ex)
let x; OR let x = undefined;
: 둘 다 똑같은 의미
6. symbol
: 자료구조에서 고유 식별자 필요하거나, 동시다발적인 코드에서 우선순위 주고싶을 때 고유한 식별자로 필요할때 쓰임.
: 간혹 식별자를 string이용해 쓰는경우있음. 다른 모듈 다른 파일에서 동일한 string을 썼을때 동일한 식별자로 간주됨.
: 반대로 symbol의경우, 동일한 id를 이용해 symbol을 만들었지만 이 2가지의 심볼은 다른 경우다.
: 동일한지 아닌지 검사해보면 동일한게 아니라는 결과가 나온다. (아래 사진 참고)
- 똑같이 만들고싶다면 이렇게.
+심볼은 바로 출력하면 에러발생. 항상 .description 이용해 string으로 변환해야한다.
object
: 일상속 물건, 물체를 대체할 수 있는 박스 형태
: 그냥 변수 name, age는 아무것도 설명되지 않지만 ellie라는 objec를 만들고, 20살이라는 오브젝트를 만들 수 있다.
ex)
const ellie = { name: 'ellie', age: 20};
- ellie는 const로 지정돼있어 다른 오브젝트로 변경X. 대신 name, age는 변경가능
const ellie = { name: 'ellie', age: 20};
ellie.age = 21;
- ellie의 나이는 21살로 변경 가능
Dynamic typing
: c언어, Java - 변수 선언할 때 타입을 선언함
:JavaScript - 선언할 때 타입 선언X, 동작할 때 할당된 값에 따라 타입이 변경될 수 있음.
좋은 아이디어있을때 빠르게 프로토타입에 도움됨.
but 규모있는 프로젝트만들때 발등에 불똥떨어질수 있다.
'JavaScript' 카테고리의 다른 글
[JS] Arrow Function은 무엇인가? 함수의 선언과 표현 (0) | 2023.03.13 |
---|---|
[JS] operator(연산자), if, switch, for loops 코드 (0) | 2023.03.13 |
[JS] 콘솔에 출력, script async 와 defer의 차이점 (0) | 2023.03.12 |
[JS] JavaScript의 역사, 현재 그리고 미래 (0) | 2023.03.11 |
[JS] UI vs API & 마무리 (0) | 2023.03.06 |