변수
변수는 값을 저장하고, 그 저장된 값을 참조하기 위해 사용하며 변수명을 통해 값의 의미를 명확하게 이해하는데 사용됩니다.
또한 변수는 위치(주소)를 기억하는 저장소로써 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자입니다.
var, let, const
변수를 선언할 때 3가지 방법이 있습니다.
var?
ES6문법이 등장하기 전에는 var 키워드로 변수를 선언했습니다.
하지만 ES6 문법이 등장 후 부터는 var 키워드를 사용하지 않습니다.
그 이유를 한번 알아보겠습니다.
scope of var
- var키워드로 선언하면 전역 스코프, 함수 레벨 스코프로 선언이 됩니다.
scope 즉, 범위는 기본적으로 변수를 사용할 수 있는 위치, 변수에 접근할 수 있는 범위라고 할 수 있습니다.
- 전역 스코프 : 말 그대로 전역에 선언되어 있어서 어느 곳에서든 해당 변수에 접근할 수 있습니다.
- 지역 스코프 : 해당 지역(함수 내부, 블록 내부)에서만 접근할 수 있어 지역을 벗어난 곳에서는 접근할 수 없습니다.
- 함수 레벨 스코프 : 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없습니다. 함수 내부에서 선언한 변수는 지역변수, 함수 외부에서 선언한 변수는 전역 변수입니다.
- 블록 레벨 스코프 : 함수, if문, for문, while문 등 {} 중괄호 내에서 선언된 변수는 코드 블록 내에서만 유효하며, 코드 블록 외부에서는 참조할 수 없습니다. 코드 내부 블록에서 선언한 변수는 지역 변수입니다.
- 정적 스코프 (lexical) : 어디서 호출했는지 상관없이 선언 시점에 상위 스코프를 결정합니다.
- 동적 스코프 (dynamic) : 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하게 됩니다.
- var 키워드 생략이 가능합니다. (생략하게 되면 전역 변수로 선언됩니다.)
var j = 2;
function test1() {
// 함수 안에서 var 키워드를 사용하지 않고 변수에 값을 할당하면 전역 변수가 됩니다.
i = 1;
console.log(j);
}
test1() // 2
console.log(i); // 1- var 변수는 재선언이 가능하고, 재할당이 가능합니다.
var greeter = "hey hi";
var greeter = "say Hello instead";
greeter = "say Hello";- var 호이스팅으로 변수를 선언하기 이전에 참조할 수 있습니다.
호이스팅이란? 간단하게 변수와 함수 선언가 선언될 때 스코프 최상단으로 가는 것을 말합니다. 하지만 실제로 코드가 이동되지는 않고, 코드가 최상위로 끌어올려진 것처럼 보이게 동작하는 자바스크립트 매커니즘입니다.
console.log (greeter); // say hello
var greeter = "say hello"분명 선언은 console 아래에 했는데 console.log에는 찍히는 것을 볼 수 있습니다.
이런 호이스팅은 자바스크립는 아래처럼 해석하게 됩니다.
var greeter;
console.log (greeter); // greeter is undefined
greeter = "say hello"var greeter가 먼저 선언이 되면서 undefined로 초기화가 동시에 됩니다.
따라서 console.log에는 greeter가 undefined라는 값을 가지고 있으므로 오류가 나지 않고, 자바스크립트는 greeter의 값을 찾아 존재하면 보여주게됩니다.
var 문제점 정리
var의 특징을 살펴봤습니다. 그렇다면 이렇게 사용하면 무슨 문제가 발생하는지 정리해봤습니다.
- 함수 레벨 스코프를 따른다는 점.
여기서 문제는 함수에서는 괜찮지만 for문의 변수 선언문에서 선언한 변수를 for문 외부에서 참조할 수 있게 됩니다.
for(var i = 0; i < 3; i++){
console.log(i); // 0, 1, 2
};
console.log('global' + i); // global 3-
var 키워드 생략을 해도 선언이 된다는 점.
변수는 선언 키워드 없이는 선언될 수 없어야 합니다.
하지만 자바스크립트는 선언문 없이 변수를 선언하면 전역 변수로 선언이 되어 암묵적으로 전역 변수를 생산할 수 있습니다. -
변수명 중복이 가능하다는 점
변수명은 하나만 존재해야합니다. 변수명이 중복될 경우 의도하지 않은 결과를 발생할 수 있습니다.
// 나는 hi라고 선언해 놨는데
var test = "hi";
// 코드가 길어졌을 때
...
// 다른 누군가가 bye로 선언해 논다면...?
var test = "bye";
// 어디서 잘못 되었는지 찾기가 어려울것입니다.- 호이스팅이 된다는 점
위에서 확인했듯이 변수 선언문 보다 console.log문이 호이스팅으로 인해 먼저 실행이 됩니다.
프로그래밍 언어는 탑다운 방식으로 위에서부터 아래로 진행이 되어 결과물을 예측할 수 있습니다. 하지만 호이스팅이 되면 결과가 어떻게 될지 예측이 어렵습니다.
이러한 문제점을 해결하기 위해 ES6 문법에서 let, const가 도입되었습니다.
let
- let은 블록 레벨 스코프를 따릅니다.
let test = "hi"; // 전역 변수
{
let test = "bye"; // 지역 변수
let test1 = "hello"; // 지역 변수
}
console.log(test); // hi
console.log(test1); // ReferenceError: test1 is not defined- 변수가 중복으로 선언되지 않습니다.
let test = "hi";
let test = "bye"; // Uncaught SyntaxError: Identifier 'test' has already been declared- 호이스팅이 발생하지 않습니다.
console.log(ts); // undefined
var ts;
console.log(test); // Error: Uncaught ReferenceError: test is not defined
let test;let은 선언 -> TDZ -> 초기화 -> 할당으로 이루어지게 되어 호이스팅이 발생하지 않습니다.
var는 선언, 초기화 -> 할당으로 이루어지므로 호이스팅이 발생합니다.
const
const로 선언된 변수는 일정한 상수(변하지 않는 값)의 성질을 가지고 있습니다.
또한 const는 let과 대부분 동일하므로 let과 다른 점만 보도록 하겠습니다.
- 재할당이 불가능합니다.
=> let은 재할당이 자유롭지만 const는 재할당이 안됩니다.
let test = "hi";
test = "bye";
const ts = "hi";
ts = "bye"; // TypeError: Assignment to constant variable.
// const는 반드시 선언과 초기화가 동시에 일어나야 합니다.
const test1; // SyntaxError: Missing initializer in const declaration- const는 주로 상수로 가독성과 유지보수의 편의를 위해 사용이 됩니다.
// 10의 의미를 알기 어렵기 때문에 가독성이 좋지 않습니다.
if (rows > 10) {}
// 값의 의미를 명확히 기술하여 가독성이 향상되었습니다.
const MAXROWS = 10;
if (rows > MAXROWS) {}- const는 객체 타입으로 선언할 경우 객체에 대한 참조를 변경하지 못합니다.
=> 객체 재할당은 불가능하지만 할당된 객체의 추가, 삭제, 값 변경은 가능합니다.
const user = { name: 'Lee' };
// const 변수는 재할당이 금지됩니다.
user = {}; // TypeError: Assignment to constant variable.
// 객체의 내용은 변경할 수 있습니다.
user.name = 'Kim';
console.log(user); // { name: 'Kim' }따라서 객체 타입 변수를 선언 시 const를 사용하는 것이 좋습니다.
정리
변수 선언 시 기본적으로 const를 사용하되, 재할당이 필요한 경우 let을 사용합니다.
ES6문법을 사용한다면 var 사용을 지양합니다.
값
const num = 10;위에서는 선언 키워드는 const를 사용하고, num이라는 변수 명으로 선언과 동시에 숫자 리터럴 10이라는 값으로 초기화를 시켜줬습니다.
리터럴 : 소스 코드 안에서 값을 구성하는 최소 단위
리터럴 표기법
// 숫자 리터럴
10.50
1001
// 문자열 리터럴
'Hello'
"World"
// 불리언 리터럴
true
false
// null 리터럴
null
// undefined 리터럴
undefined
// 객체 리터럴
{ name: 'Lee', gender: 'male' }
// 배열 리터럴
[ 1, 2, 3 ]
// 정규표현식 리터럴
/ab+c/
// 함수 리터럴
function() {}기본 타입 (Primitive data type)
- 숫자형 (number)
- 문자열형 (string)
- 논리형 (boolean)
- undefined / null
- 심볼형 (symbol)
참조 타입 (Reference data type)
- 배열 (array)
- 함수 (function)
- 객체 (object)
연산자
연산자(Operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산을 수행해 하나의 값을 만듭니다. 이때 연산의 대상을 피연산자(Operand)라고 합니다.
// 산술 연산자
const num = 2 * 5; // 10
// 문자열 연결 연산자
const str = "Name is" + "Taemin"; // Name is Taemin
// 할당 연산자
const color = "green";
// 비교 연산자
const compare = 3 > 5; // false
// 논리 연산자
const boolean = (5 > 3) && (2 < 4); // true;
// 타입 연산자
const type = typeof "Hi"; // string
// 인스턴스 생성 연산자
const day = new Date();