let과 const

📢 22/07/26 복습

---

📚 Reference

---

PoiemaWeb, https://poiemaweb.com/es6-block-scope
javascript.info, https://ko.javascript.info/variables

참고 사이트에 내용을 개인적으로 복습하기 편하도록 재구성한 글입니다.
자세한 설명은 참고 사이트를 살펴보시기 바랍니다.

---

오래된 var

---

ES6에서 let과 const가 등장하기 전까지 변수를 선언할 수 있는 유일한 방법은 var를 사용하는 것이였습니다. var로 선언된 변수는 아래와 같은 특징을 가지고 있습니다.

📌 함수의 코드 블럭만을 스코프로 인정합니다. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이기 때문에 전역 변수를 남발할 가능성이 높아집니다.
📌 for문의 변수 선언문에서 선언한 변수를 for문의 코드 블럭 외부에서 참조할 수 있습니다.
📌 var의 생략을 허용하여, 암묵적 전역 변수를 양산할 가능성이 큽니다.
📌 변수 중복 선언을 허용하여, 의도하지 않은 변수값의 변경이 일어날 가능성이 큽니다.
📌 변수를 선언하기 이전에 참조할 수 있습니다.

대부분의 문제는 전역 변수로 인해 발생하게 됩니다. 전역 변수는 사용이 편리하다는 장점이 있지만 문제를 일으킬 가능성이 높기 때문에 사용을 억제하는 것이 좋습니다. let과 const는 이러한 var의 단점을 보완하기 위해 등장했습니다.

---

var의 단점을 보완하기 위한 let과 const

---

📌 블럭 레벨 스코프를 가집니다.

함수 레벨 스코프
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없습니다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수입니다.

블럭 레벨 스코프
모든 코드 블럭(함수, if문, for문, ...) 내에서 선언된 변수는 코드 블럭 내에서만 유효하며 코드 블럭 외부에서는 참조할 수 없습니다. 즉, 코드 블럭 내부에서 선언한 변수는 지역 변수입니다.

📌 var와 다르게 동일한 이름을 갖는 변수 선언 시 문법 에러가 발생합니다.
📌 var 전역 변수는 window 객체에서 접근이 가능하지만 let과 const 전역 변수는 보이지 않는 개념적인 블럭 내에 존재하기 때문에 window 객체로 접근이 불가능합니다.
📌 변수를 선언하기 이전에 참조할 수 없습니다.

---

let과 const 차이점

---

📌 let은 재할당이 자유로우나 const는 재할당을 금지합니다.
📌 const는 반드시 선언과 동시에 할당이 이루어져야 합니다.

---

var vs let vs const

---

📌 ES6를 사용한다면 var는 사용하지 않습니다.
📌 변경이 발생하지 않는 원시 값과 객체에는 const 키워드를 사용합니다. const 키워드는 재할당을 금지하므로 var, let 보다 안전합니다.
📌 재할당이 필요한 경우에 한정해 let 키워드를 사용합니다.
📌 변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많습니다. 따라서 변수를 선언할 때에는 일단 const 키워드를 사용하고 재할당이 필요하다면 그때 const를 let 키워드로 변경해서 사용하는 방법을 권장합니다.

---

변수 명명 규칙

---

자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있습니다.

📌 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있습니다.
📌 첫 글자는 숫자가 될 수 없습니다.

다음은 유효한 변수명의 예시입니다.

let userName;
let test123;

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)가 흔히 사용됩니다. 카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성합니다.

달러 기호 $ 와 밑줄 _ 를 변수명에 사용할 수 있다는 점이 조금 특이하네요. 이 특수 기호는 일반 글자처럼 특별한 의미를 지니진 않습니다.

아래는 유효한 변수명에 관한 예시입니다.

let $ = 1; // "$"라는 이름의 변수를 선언합니다.
let _ = 2; // "_"라는 이름의 변수를 선언합니다.

alert($ + _); // 3

아래는 잘못된 변수명의 예시입니다.

let 1a; // 변수명은 숫자로 시작해선 안 됩니다.

let my-name; // 하이픈 "-"은 변수명에 올 수 없습니다.

---

바람직한 변수명

---

변수명은 간결하고, 명확해야 합니다. 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 하죠. 변수의 이름을 짓는 것은 프로그래밍에서 가장 중요하고 복잡한 기술 중 하나입니다.

실제 프로젝트에선 맨 처음부터 완전히 독립적인 코드를 작성하기보다 기존 코드의 틀을 변경하고 확장하는데 대부분의 시간을 보냅니다. 작성했던 코드를 얼마 후에 다시 봤을 때, 정보에 알맞은 이름이 적혀있으면 정보를 더 쉽게 찾을 수 있습니다.

그러므로 변수를 선언하기 전에 내가 지은 변수의 이름이 괜찮은지 숙고해 주시기 바랍니다.

아래는 변수 명명 시 참고하기 좋은 규칙입니다.

📌 userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요.
📌 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요.
📌 최대한 서술적이고 간결하게 명명해 주세요. data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용합시다.
📌 자신만의 규칙이나 소속된 팀의 규칙을 따르세요. 만약 사이트 방문객을 user라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser나 newUser라는 이름으로 지어야 합니다.

---

🔥 재사용 아니면 새로 만들기?

개발자 중에는 새로운 변수를 선언하기보다 기존 변수를 재사용 하는 걸 선호하는 게으른 분들이 있습니다.

재사용된 변수는 과거에 붙여진 스티커를 떼지 않은 채 물건만 바뀐 상자와 같습니다. 상자 안에는 무엇이 들어 있을까요? 내용물에 대한 정보를 알고 있는 사람은 누구인가요? 이를 알기 위해선 상자에 가까이 다가가 확인해야만 합니다.

💥 변수를 재사용하면 변수 선언에 쏟는 노력을 좀 덜 순 있겠지만, 디버깅에 열 배 더 많은 시간을 쏟아야 합니다. 변수를 추가하는 것은 악습이 아닙니다. 좋은 습관입니다.

모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해줍니다. 변수를 추가한다고 해서 성능 이슈가 생기지 않죠. 값이 다른 경우, 변수를 다르게 선언해 주면 코드 최적화에 도움이 될 수도 있습니다.