목차
변수란
-
쉽게 말하면 변하는 값이다.
-
좀 더 자세하게 변수는 어떤 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름을 의미한다.
-
변수에 값을 저장하는 것을 할당(대입, 저장)이라고 하고, 변수에 저장된 값을 읽어들이는것을 참조라 한다.
-
기본적으로 변수는 하나의 값을 저장하기 위한 메커니즘이다. 만약 여러개의 값을 저장하려면 여러 개의 변수를 사용해야 한다. 그러나 배열 or 객체 같은 자료구조를 사용하여 연관성이 있는, 공통적인 부분을 그룹화해서 묶어서 사용할 수도 있다.
변수 사용 이유
-
메모리에 저장된 값을 재사용 하기 위해서는 메모리에 직접적으로 접근하는 방법 뿐이다. 그러나 직접적으로 접근을 한다면 여러가지 치명적인 오류를 발생시킬 가능성이 아주 높다. 그렇기 때문에 자바스크립트는 개발자가 직접적으로 메모리에 접근을 막아놨다.
-
만약 변수를 사용하게 된다면 개발자가 직접 메모리 주소를 통해 값을 저장(할당)하고 참조할 필요가 없고 안전하게 값에 접근할 수 있기 때문에 변수를 사용한다.
변수 종류 및 사용법
- 자바스크립트에서 변수는 var, let, const 3가지로 사용할 수 있다.
- 사용 방법은 3가지 다 동일하다
var 변수명 = 변수값,let 변수명 = 변수값,const 변수명 = 변수값
var
-
어디에 선언이 되어있든 간에 변수들은 어떠한 코드가 실행되기 전에 처리가 된다. 쉽게말해 변수를 선언하기 전에 사용해도 에러가 발생하지 않고 undefined가 출력이 된다.
-
재할당이 가능하다.
var kim = 20; // 20 kim = 30; // 30 -
중복선언이 가능하다 => 아주 아주 위험하다는 의미이다. 아래의 코드에서 A개발자가 Kim씨는 20살이라고 저장해두었다. 그러나 B개발자가 선언한지 모르고 새로운 kim씨의 나이를 30으로 저장한다면? A개발자는 20살이라고 알고 사용할것이다.
var kim = 20; // 20 var kim = 30; // 30 -
ES6이후 var의 문제를 극복하기 위해 let, const가 추가되었다.
var의 사용을 지양 혹은 권장하지 않는 이유
-
중복선언이 가능하기 때문에 위험하다. -
const, let과 달리 범위가 다르다.const,let은 블록 레벨 스코프인 반면에 var의 경우 함수 레벨 스코프이다.-
함수레벨 스코프: 함수 내부에 선언된 변수만 지역변수로 한정하며 나머지는 전역변수로 간주한다. -
블록 레벨 스코프: 코드 블럭({...})에 함수 내부 뿐만아니라 선언된 변수도 지역변수로 취급한다.
-
// 함수
function name() {
var Lee = 30;
console.log(Lee); // 30
}
name();
// 함수레벨 스코프이므로 함수내부에서 var로 선언한 변수는 외부에서 사용할 수 없다.
console.log(Lee); // ReferenceError: Lee is not defined
}// 함수가 아닌경우 (if, for)
if (true) {
var kim = 20;
console.log(kim); // 20
}
console.log(kim); // 20
var sum = 0;
for (var i = 0; i < 10; i++) {
sum += i;
}
console.log(sum); // 45
// 함수레벨 스코프 이므로 함수가 아닌 for문의 경우 var로 선언한 변수 i가 전역변수로 값이 변한것을 알 수 있다.
console.log(i); // 10let
-
중복선언은 되지 않지만, 재할당은 가능하다.
-
값이 변해도 되는 경우 let을 사용한다.
let kim = 20 // 20
let kim = 21 // SyntaxError: Identifier 'kim' has already been declared 중복 선언 불가능
kim = 21 // 21 재할당 가능const
-
중복선언이 되지 않고, 재할당도 불가능하다.
-
값이 변하지 않는 상수를 선언할때 사용 한다.
-
개인적으로 값이 변하지 않을 경우 대부분 const를 사용한다.
const kim = 20 // 20
const kim = 21 // SyntaxError: Identifier 'kim' has already been declared 중복 선언 불가능
kim = 21 // TypeError: Assignment to constant variable. 재할당 불가능변수명 규칙
-
변수 이름을 통해 변수에 저장된 값의 의미를 명확히 할 수 있다. 따라서 변수명을 지을 때 저장된 값의 의미를 잘 파악할 수 있는 이름을 짓는다면 가독성을 높이는 효과가 있다. 훌륭한 이름을 짓기는 어렵고, 많은 시간을 사용할수도 있지만, 훌륭한 이름을 짓는다면 이로인해 아끼는 시간이 더 많다고 한다.
-
개인적으로 변수명, 함수명등 의미있는 이름을 잘 짓는것이 아주 중요하다고 생각한다. 시간이 없다고, 귀찮다고 대충 이름을 짓지 않도록 하고, 많은 시간을 사용하여 이름을 잘 짓는것을 습관화 해야겠다.
-
자바스크립트 변수명은 언더스코어(_)는 사용할 수 있지만, 하이픈(-)은 사용할 수 없다.
const hello_world (o) const hello-world (x) -
자바스크립트 변수명의 첫 번째 문자에는 숫자가 올 수 없다.
const hello-world7 (o) const 7hello_world (x) -
자바스크립트 변수명으로 자바스크립트에 존재하는 예약어는 사용할 수 없다.
예약어란 자바스크립트에서 이미 설정한 변수명으로new, switch, try 등이 있다.const newCompany (o) const new (x)
네이밍 컨벤션
-
하나 이상의 단어를 만들때 가독성 좋게 구분하기 위해 규정한 명명규칙으로서 4가지 유형의 네이밍 컨벤션이 주로 사용된다.
-
일관성을 유지한다면 어떤 네이밍 컨벤션을 사용해도 좋지만 일반적으로 변수나 함수의 이름에는 카멜케이스를 사용한다.
-
생성자 함수, 클래스의 이름에는 파스칼 케이스를 주로 사용한다.
카멜케이스
- 각각의 단어 맨 앞글자를 대문자로 사용한다.
- 단 단어의 첫 글자는 소문자
const helloWorld;
스네이크 케이스
- 각각의 단어 사이에 언더바(_)를 사용한다.
const hello_world;
파스칼 케이스
- 각각의 단어 맨 앞글자를 대문자로 사용한다.
- 단 단어의 첫 글자 또한 대문자로 사용한다
const HelloWorld;
헝가리언 케이스
- 이름 앞에 type을 접두어로 넣어주는 표기법이다.
- 각각의 단어 맨 앞글자를 대문자로 사용한다.
const strHelloWorld;
