[JS]변수(Variables)

mokyoungg·2020년 4월 27일

1. 변수의 사용

컴퓨터가 데이터를 기억할 때, 변수를 사용한다.

MDN 변수 정의(Variables)
https://developer.mozilla.org/ko/docs/Glossary/Variable
변수는 값을 저장하기 위해 명명된 위치이다.
이것을 사용하면 미리 정해진 이름을 통해 예측할 수 없는 값에 접근할 수 있다.

변수의 이름은 값의 위치 이름이다.
변수의 이름을 선언하고 값을 준 뒤. 그 변수를 부르면
이름을 통해 위치를 찾고 값을 준다.

2. 변수의 생성

var (띄어쓰기) 변수이름 (띄어쓰기) = (띄어쓰기) 값;

var name = "로다주";
var job = "아이언맨";

name, job은 변수다.
로다주는 name이라는 변수에 할당된 값이다.
아이언맨은 job이라는 변수에 할당된 값이다.
다양한 값(value)을 각각의 변수에 저장할 수 있다.

name이라는 변수에 '로다주' 값이 저장되었다.

3. 변수 이름 정하기

변수 이름은 원하는대로 정할 수 있지만 주의할 점이 있다.

한 파일에서 같은 변수 이름을 중복해서 사용할 수 없다.
대소문자 구문(myName과 MyName은 다른 변수)
(변수이름, 함수이름, 연산자 모두 대소문자를 구분한다.)
변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($) 중 하나이다.
두 번째 문자부터 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있다.
변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 써야한다.

4. let, const

자바스크립트의 버전이 올라가면서 let 과 const 라는 키워드가 생겼다.

사용법은 var 와 같다. 하지만...

let 키워드를 사용하면 변수 값을 수정할 수 있다.
const 키워드를 사용한 변수는 수정할 수 없다.

변수 값이 한 번이라도 수정될 예정이면 let 사용
변수 값을 수정할 일이 없으면 const를 사용.

MDN 해석

let

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

let 문은 블록 범위 로컬 변수를 선언하고 선택적으로 값을 초기화한다.

변수를 전역적으로 정의하거나 블록 범위에 관계없이 전체 함수에 로컬로 정의하는 var 키워드와 달리
블록 문장의 범위로 제한된 변수 또는 블록 문장이 사용되는 표현식을 선언할 수 있도록 한다.(?)
var와 let의 다른 차이점은 파서가 평가할 때만 후자(let)가 값으로 초기화된다는 것이다.

파서? 초기화?

const

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

상수란? 변하지 않고 항상 같은 값을 가지는 수

const(=constants, 상수)는 블록 범위를 가지며, let 키워드를 사용하여 정의한 변수와 유사하다.
const의 값은 재할당을 통해 바꿀 수 없고, 다시 정리할 수도 없다.

이 선언은 범위가 선언된 블록에 대해 전역적이거나 로컬일 수 있는 상수를 생성한다.
전역 const는 var 변수와 달리, 윈도우 객체의 속성이 되지 않는다.(?) (중략)
const 선언은 값에 대한 읽기 전용 참조(reference)를 생성한다. 이는 const가 가지고 있는 값이
불변하다는 것을 의미하는 것이 아니며 단지 변수 식별자를 재할당할 수 없다.
예를 들어, 내용이 객체인 경우, 객체의 내용(예를 들어, property)이 변경될 수 있음을 의미한다.

초기화? https://terms.naver.com/entry.nhn?docId=859381&cid=50376&categoryId=50376
컴퓨터 프로그램의 최초 또는 미리 정해진 계수, 스위치, 주소, 기억 장치의 내용 등을 '0' 또는 기타의 값으로 설정하는 것.

파서? https://terms.naver.com/entry.nhn?docId=832189&cid=42344&categoryId=42344
프로그램을 문법 규칙에 따라 구문 해석하고, 그것이 문법에 합치하는지 여부를 조사하는 알고리즘

무슨 말인지는 잘 모르겠지만, let의 경우, 반복문처럼( for (let i = 0 ....)) 변수의 값이 유동적일 때 쓰고
기본적으로는 const를 써야할 것 같다. 변수 선언. scope, block, 부모요소자식요소 조심조심

5. 변수 값 수정

변수를 생성할 때 값을 저장하고, 그 이후에 값을 수정할 수 있다.
값을 수정할 때는 변수 앞에 let 키워드를 빼야 수정이 가능하다.
let 키워드를 빼야만 수정이 가능하다. let 키워드는 변수를 새로 생성할 때만 사용하기 때문이다.

cf. 변수의 생성 vs 변수의 수정

let a = 1
let a = 2
console.log(a) // 2

let 키워드의 역할은 '변수'를 생성하는 것이다.
위의 코드를 확인하면 2가 나와서 변수 a의 값이 2로 바뀐 것 처럼 보이지만,
실제로는 수정이 된 것이 아니라 새로 생성이 된 것.(변수를 두 번 생성한 것)
왜인지는 모르겠지만 위의 코드를 개발자 도구에서 작성하면(let a = ..) 오류가 뜨지 않는데,
다른 프로그램에서 써보면 undefined: Duplicate declaration "a" 이런 오류가 뜬다.(이게 정상)

cf. 변수의 선언 vs 변수 값 할당