티스토리 뷰
ES6이전에는 var가 변수를 선언하는 문법이었습니다. ES6 이후부터는 let, const도 변수 선언 시 사용할 수 있습니다. 어떻게 사용하면 될까요? 이것은 소스의 가독성과 변수의 사용 범위에 대한 문제입니다.
프로그램에서 변수 선언 후 데이터 저장하고 변경되고 다른 기능에 의해서 참조되는 등 여러 모습으로 사용되다가 어느 시점에서는 사용하지 않습니다. 즉 변수는 생명주기(Life Cycle)와 변수가 적용되는 범위(Scope)가 있습니다. 또한 한번 작성된 프로그램은 요구사항이 추가되고, 변경이 되어 기능이 추가되거나, 축소되거나, 삭제되는 등 많은 변경을 하게 되는데 이때 변수 선언 방법에 따라서 수정이 쉬워지거나 어려워 집니다. 프로그램은 처음 개발한 개발자가 수정을 하지 않고 다른 개발자가 수정을 하는 경우가 일반적 입니다. 이때 프로그램 소스을 빨리 분석 하고 요구 사항에 따라서 다른 프로그램에 영향도 없이 쉽게 수정을 할 수 있도록 해야 하는데 변수 선언 방법에 따라서 많은 차이가 납니다. 즉 가독성이 좋으면 빠른 시간에 소스를 분석 하고 수정 할 수 있습니다.
1. 가독성을 위해 const 사용
| var 선언 방법 | const 선언 방법 | let 선언 방법 |
| function lastPrice( saleccount ) { var price = 1000; var total = 1000 * saleccount; var cnt = 0 // ... 많은 줄수 cnt = cnt + 20 // ... 많은 줄수 if ( cnt > 10 ) { return total * 0.1 } return total; } console.log("판매 금액은 : " + lastPrice(6)); |
function lastPrice( saleccount ) { const price = 1000; const total = 1000 * saleccount; let cnt = 0 // ... 많은 줄수 cnt = cnt + 20 // ... 많은 줄수 if ( cnt > 10 ) { return total * 0.1 } return total; } console.log("판매 금액은 : " + lastPrice(6)); |
function lastPrice( saleccount ) { let price = 1000; let total = 1000 * saleccount; let cnt = 0 // ... 많은 줄수 cnt = cnt + 20 // ... 많은 줄수 if ( cnt > 10 ) { return total * 0.1 } return total; } console.log("판매 금액은 : " + lastPrice(6)); |
| var 선언은 프로그램 중간에 값을 변경을 할 수 있으므로 마지막 total 변수의 정보는 신뢰 할 수 없습니다. ( 전체 소스를 보고 파악해야 함 ) | const 선언은 처음 데이터가 저장 된 후 재할당 될 수 없으므로 const로 선언한 변수는 신뢰 할 수 있습니다. |
var 선언은 프로그램 중간에 값을 변경을 할 수 있으므로 마지막 total 변수의 정보는 신뢰 할 수 없습니다. ( 전체 소스를 보고 파악해야 함 ) |
프로그램 소스가 짧다면 쉽게 변수의 성격을 파악할 수 있지만 프로그램 길이가 길다면 변수의 성격을 파악하기 위해서는 전체 소스를 검토해야 하는데 const로 선언을 하면 초기화된 후 값을 변경할 수 없으므로 프로그램 소스를 파악하기 위해서는 시간이 많이 걸리지 않고 쉽게 변경을 할 수 있습니다.
프로그램에서 변수에 값이 초기화되고 변경되는 비율이 얼마나 될까요? 많은 변수는 한번 초기화 후 변경을 많이 하지 않으므로 변수 선언 시 const 사용을 자바스크립트에서는 권장을 합니다.
- const는 초기화 이후 재 할당하면 오류가 납니다.
그러나 참 조형인 경우는 요소의 값을 변경할 수 있습니다.
const arr = [1,2,3];
arr [0] = 10;
// arr = [20,30,40]; VM604:3 Uncaught TypeError: Assignment to constant variable.
2. 변수의 범위(Scope)
Javascript는 var로 선언 시 Lexical scope를 따릅니다. 다른 말로 function scope를 가지고 있고 let, const는 block scope를 가지고 있습니다.
Lexical scope : 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다.
Block scope : {... } 안에서 유효한 값을 가지는 것
- global 영역에 변수 a, 변수 b를 선언하여서 모든 곳에서 참조가 가능합니다.
- 함수 fun() 영역의 if 블록 안에 선언된 변수 c, d중 var로 선언된 변수 d는 funtion scope로 함수 안에서는 모두 사용 가능하지만 let으로 선언 된 변수 c는 block scope이므로 if 블럭 안에서만 유효합니다.
- fun()을 호출하고 밑에 있는 log함수에서 변수 c, d를 사용하면 모두 에러가 표시됩니다. 그것은 fun() 함수 내부에 선언된 변수이기 때문입니다.
- fun() 함수에 선언된 변수 e는 fun() 함수 어디에서 사용 가능합니다.
변수를
- var 선언하면 Lexical scope을 따라서 전역 범위에 적용이 될 수 있고 함수 내부에 선언하면 함수 내부에서만 적용이 되고 어디서 변경이 되는지 확인이 힘듭니다. 이것은 잠재적 오류를 생산할 수 있으므로 전역 변수로 사용을 자제하여야 합니다.
- let 선언은 블록 범위에서만 유효 하므로 블럭 내부에서 사용이 가능 하므로 블럭 내부에 데이터를 격리해서 저장과 변경을 자유롭게 할 때 사용으로 변수명에 대한 충돌을 줄일 수 있습니다.
- const는 초기화 이후 변경되지 않으므로 최초 저장 후 변경할 필요가 없을 때 사용하여 변수명에 대한 충돌을 줄일 수 있습니다.
변수명아 충돌 이란 : 규모가 있는 프로젝트에서 동일 변수명으로 여러 개발자가 사용하는 것으로 아래와 같은 단점이 있습니다.
var a = 10; console.log(a); // 10 // 소스 길거나 다른 파일 var a = 20; // 소스 길거나 다른 파일 console.log(a); // 20 let a = 10; let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared변수 a를 최초로 선언하여 사용하는데 다른 곳에서 변수 a를 사용하면 프로그램에서 마지막 사용한 값을 사용하므로 변수 a를 최초 선언 한 개발자의 의도에서 벗어난 예측 불가능한 값에 대한 잠재적 오류가 발생할 수 았습니다.
let으로 선언하면 동일 영역에서는 한번 이상 선을 할 수 없으므로 예측이 가능합니다.