들어가며
변수(variable)를 정의하는 표현으로 "데이터를 담는 그릇", "특정 데이터가 저장된 메모리 공간의 주소" 등이 있다.
이러한 정의들을 보고 일단 변수란, 넓은 의미로 데이터를 관리하기 위한 기술이구나라는 느낌이 들었다.
우리가 사용하는 애플리케이션들 또한 본질적으로는 "데이터를 다루는 장치"라는 표현이 있듯이 프로그래밍에서 데이터를 어떻게 관리하는지가 정말 중요한 부분인 것 같다.
그렇다면 변수를 활용해서 데이터를 관리하면 어떤점이 좋을까
예를들어 1000이라는 숫자 값(데이터)을 price라는 변수에 담고,
"John"이라는 문자열(데이터)을 name이라는 변수에 담듯이 적절한 변수명을 적어서 관리한다면, 우리는 이것들을 쉽게 구분하고 활용할 수 있다.
또 다른 예로 x, y (변수) 안에 어떤 값을 넣는지에 따라 2x+3y(고정된 코드) 와 같은 계산식의 결과를 바꿀 수 있다.
이처럼 변수에 할당돼있는 값만 조정하는 방식으로 무수히 많은 중복된 데이터를 처리할 수 있다.
한마디로 재사용성, 유지보수성, 가독성에 매우 좋다.
자바스크립트에는 데이터 타입에 따라 담는 그릇(변수)의 종류가 달라지지 않는다.
편힌 점이 될 수도 있지만, 오류를 미리 파악하는 것에 어려움이 있다.
이런 점을 보완하기 위해 타입스크립트를 활용할 수 있다.
1. var
세가지 변수 선언자를 설명하기에 앞서 변수를 활용하려면 변수 선언(variable declaration)을 해야한다.
변수 선언이란 변수를 생성하는 것이다.
더 깊게 나아가면 데이터를 저장하기 위한 메모리 공간을 확보하고 그 공간의 주소를 연결해서 저장할 수 있게 준비하는 것이다.
변수를 선언하려면 (선언자 변수명 = 할당할 데이터)의 방식으로 해야한다.
먼저 var의 예시로 변수 선언과 재할당, 재선언을 확인하고
var의 문제점으로 인해 ES6부터 도입된 let, const 선언자를 차례대로 설명하려한다.
var x = 5;
var y = 3;
console.log(x); // 5 출력 ---- ⓵
x = 7;
y = 8;
z = x + y; ---- ⓶
console.log(z); // 15 출력
var x = 10;
var y = 10;
z = x + y; ---- ⓷
console.log(z); // 20 출력⓵ var(선언자), x / y(변수명), 5 / 3(할당할 데이터)를 가지고 "변수 선언"을 한 것이다.
⓶ x와 y에 각각 7, 8이라는 데이터를 "재할당" 한 후 더한 값을 z 라는 변수에 담았다.
⓷ x, y를 각각 "재선언" 하였다.
코드의 양이 적을때는 재선언, 재할당하는 과정들을 쉽게 따라갈 수 있다.
그러나 다양한 사람들과 협업을 하고며 코드가 섞이고 코드의 양이 엄청나게 길어진다면 의도치않게 같은 변수명으로 중복선언을 하는 등 오류를 만들 수 잇다.
이런 문제들로 인해 ES6에 let, const이 추가되었다.
2. let
let x = 5;
let y = 7;
let z = x + y;
console.log(z); // 12 출력
x = 10;
y = 10; ---- 재선언 가능
z = x + y; // 20 출력
let x = 20; // Cannot redeclare block-scoped variable (재선언이 불가능하다고 미리 알림이 뜬다.)
// Uncaught SyntaxError: Identifier 'x' has already been declared
재선언이 안되는 안되는 이유로 "Scope" 원리가 있다.
이 개념에 대해서는 추후에 따로 작상하려한다.
3. const
constant(상수)라는 의미로 변하지 않는 상수값을 할당할때 쓰는 선언자이다.
let과 const의 차이는 추후에 재할당 유무에 대한 차이만 있다.
const dateFormat = "YYYY-MM-DD"; // ex) 데이터포맷 용도로 사용
const PI = 3.14; // 불변의 상수값에 대해서는 모두 대문자로 쓰기도 한다. const 선언자로 원시 값(primitive type data)을 할당했다면 값을 변경할 수 없다. 그러나 데이터에 객체(Object type)를 넣었다면 객체 안의 밸류값을 변경 할 수 있다.
const person = {name : "John"};
person.name = "Lim"
console.log(person); // {name : "Lim"}
마치며
변수 선언에는 가급적 const를 사용해야 의도치않은 재할당, 재선언을 막을 수 있다.
그 외에 변수가 선언되고 값이 할당되는 시점과 순서랑
자바스크립트가 코드를 해석하는 특징 중 하나인 호이스팅(Hoisting) 개념은 따로 상세히 작성하려한다.
또한 const를 썼음에도 객체의 밸류값을 바꿀 수 있는 이유도 자바스크립트의 메모리 활용방식에 대해 확실히 이해한 후에 작성해야겠다.
끝으로 단순 암기만해서 코드를 사용하기보단,
자바스크립트, 브라우저 더 나아가 나중엔 서버와의 통신 원리 등 세세한 작동 메카니즘들을 확실히 이해하고 코딩해야겠다는 생각이 든다.
