JS] 자바스크립트 variables 변수란? 변수 만드는 법

 

 

변수(Variables)란?

 

Variables(변수)는

데이터를 담는 새 컨테이너를 말한다.

변수 = 컨테이너

 

 

 

새 변수 만들기

var: variable 데이터를 담을 새 컨테이너

myName: 새 컨테이너 이름

Angela: Value 

 

변수 안에 value가 들어가 있음

 

 

 

 

Value 바꾸기 

var는 컨테이너 처음 만들때만 쓴다

이 전에 있던 Angela는 꺼내서 버리고

새로운 이름이 통 안으로 들어간다.

 

 

 

alert로 value가 나오게 하기 

 

1 변수에 Hannona를 담고

2 alert로 변수이름을 부르면 그 안에 들어있는 Hanoona를 보여준다.

 

alert pop up

 

 

Prompt에 입력된 내용 저장하기 

변수를 이용해서 prompt에 입력한 내용을 저장할 수 있다.

 

prompt만 사용하면 입력창이 뜨는데 

내용을 입력해도 저장되는 곳은 없다. 

 

 

입력한 내용을 저장하려면 변수를 만들어 담아주면 된다.

변수에 prompt 내용 담기

이름 입력

콘솔에서 확인 

 

 

 

 

변수에 저장하고 사용하기

1-1  변수에 바로 저장 후 alert로 보여주기

 

 

1-2  앞 내용을 지워도 그대로 나옴

컴퓨터에 이전 벨류가 저장되어 있어서 

앞 내용을 지워도 그대로 나온다.

 

 

 

 

변수 a, b에 있는 벨류 바꾸기 

변수에 바뀐 숫자를 입력하지 않고 

a = 8 

b = 3

이 되는 방법을 생각해보자. 

 

- 정답 - 

새로운 컨테이너 c를 만들어서 서로 옮겨 담는 방법을 쓴다.

 

잘 바뀌었나 보기 

 

 

---

 

global scope vs block scope

 

global scope은 어느 곳에서나 접근이 가능하다. 

block scope은 { }으로 감싸서 블럭을 만들고

블럭 밖에서는 호출이 되지 않는다. 

 

global한 변수들은 만들어지는 순간 부터 항상 메모리에 탑재 되기 때문에 

최소한으로 쓰는 것이 좋다. 

 

---

 

변수 종류 

 

변수를 선언할 때 다음 3가지의 옵션이 있다. 

 

1. var

block scope 무시, 어디서나 호출 

 

2. const 

포인터가 잠겨 있어 immutable datatype 이다.

 

하지만 const 안에든 object는 변경이 가능하다.

const person = {name: Jane, age: 20} 로 정의하면 

person.name = Brown

person.age = 40;

이렇게 변경이 가능하다. 

장점 

1. security : 해커들이 이상한 코드를 삽입해서 값을 계속해서 변경할 수 없도록 함

2. thread safety: 한가지 프로세스가 할당되고, 그 프로세스 안에는 다양한 thread가 동시에 돌아가며 application을 효율적으로 빠르게 돌아가도록 한다. 이 thread들이 동시에 변수에 접속해서 값을 변경할 수 있는데 좀 위험한 방식이다. 그래서 const를 사용해 값을 변경할 수 없도록 한다. 

3. reduce human mistakes  혹시 모르고 값을 변경할 수 있는 경우를 미리 방지할 수 있다. 

 

 

3. let

block scope 밖에서 호출 안됨

 

mutable datatype: 값을 변경할 수 있는 데이터 타입

immutable datatype: 값을 변경할 수 없는 데이터 타입

 

mutable 타입의 let,

immutable 타입의 const만 사용하길 권장된다.

 

---

var를 쓰지 않는 이유 

const, let 둘 만 쓰고 var를 쓰지 않기를 권장한다. 

이유는 var는 var hoisting 이 일어나서 문제가 발생하기 때문이다. 

 

hoisting 이란?

어디에 선언 했냐에 상관없이 해당 코드는 맨 위로 올라가서

다른 코드보다 우선적으로 실행되는 것. 

 

그래서 

 

1. var는 코드 순서가 바뀌어도 실행이 된다. 

아래 같이 var age; 선언을 맨 마지막에 했는데도

결과가 출력되었다. 

let로 똑같이 했을 때는 에러가 나왔다. 

 

2. block scope이 없다. 

블럭 안에 들어가 있어도 실행이 된다. 

나중에 규모가 큰 프로젝트를 하다보면 

선언하지 않은 값들이 튀어 나온다. 

 

---

 

 -- 출처 --

1. udemy Angela Yu Fullstack 강의 

2. 유튜브 드림코딩 데이터타입 

https://youtu.be/OCCpGh4ujb8