javascript에서 변수명 표기법
변수명이 해당 변수를 쉽게 설명할 수 있게 하려면 보통 여러 단어로 이뤄질 가능성이 높다.
이때 사용하는 두가지 방법으로 카멜케이스(camelCase) 와 스네이크 케이스(snake_case) 가 있다.
변수명은 몇가지 제약사항을 제외하고 자유롭게 작명할 수 있다.
하지만 일정한 규칙없이 변수명을 만들어가다보면 수 많은 변수를 사용하는 코드 내에서 혼란스럽고, 유지보수에 어려움을 겪을 수 있다.
이러한 점을 극복하기 위해 대표적으로 카멜 케이스와 스네이크 케이스를 사용한다.
카멜 케이스 (camelCase)
var camelCase;
let userLevel = 1;
const userTeamPower = 1;
* 단어와 단어 사이를 대문자로 구분하여 사용한다. (단어와 단어 사이에 대문자(혹)이 있다고 해서 camelCase)
스네이크 케이스 (snake_case)
var snake_case;
let user_level = 1;
const user_team_power = 1;
* 단어와 단어 사이를 '_'로 구분하여 사용한다. (단어와 단어 사이에 뱀이 있다고 해서 snake_case)
이 두가지(카멜, 스네이크 케이스)는 자바스크립트 뿐만 아니라 모든 프로그래밍 언어에 유용한 규칙이다.
이외에 규칙들
대문자와 소문자는 서로 구별된다.
let apple;
let APPLE;
위 두 변수는 서로 다르다.
let 123abc; // 출력값: SyntaxError: Invalid or unexpected token
변수명은 숫자로 시작하면 안된다.
let my-name; // 출력값: SyntaxError: Unexpected token '-'
하이픈 '-'은 변수명에 올 수 없다.
예약어 목록에 있는 단어는 변수명으로 사용할 수 없다.
이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문이다.
let let = 5; // 출력값: SyntaxError: let is disallowed as a lexically bound name
'let'을 변수명으로 사용할 수 없으므로 에러가 발생한다.
let return = 5; // SyntexError: Unexpected token 'return'
'return'을 변수명으로 사용할 수 없으므로 에러가 발생한다.
* 예약어 목록 링크
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords
Lexical grammar - JavaScript | MDN
This page describes JavaScript's lexical grammar. JavaScript source text is just a sequence of characters — in order for the interpreter to understand it, the string has to be parsed to a more structured representation. The initial step of parsing is cal
developer.mozilla.org
* 중요:
1. 변수명은 간결하고 명확하게 지어 변수가 담고 있는 값이 무엇인지 실제로 돌려보지 않고 알 수 있어야 한다.
2. 변수명만 봐도 프로그램에 대해 모르고 코드를 처음보는 사람이 이게 무슨 변수인지 알 수 있게 지어야 한다.
3. 사람이 읽을 수 있는 단어를 사용하는 것이 좋다.
4. x, y, a 등 명확하게 파악할 수 없고 짧은 이름은 피해야 한다.
5. 최대한 서술적이고 간결하게 명해야함_data, value 등은 간결하지만 무슨 data인지 value인지 알 수 없어 명확하지 않다.
6. 혼자 프로젝트를 하는게 아니라면 소속된 팀의 규칙에 따라 변수 명을 지어야 한다.
결론: 변수명은 카멜케이스 혹은 스네이크 케이스로 소속된 팀에 맞춰 간결하고 명확하게 누구나 알아볼 수 있게 명시해야 한다.
'언어 > Javascript, Typescript' 카테고리의 다른 글
[js] Object(json)에서 key, value값 추출 (0) | 2023.02.09 |
---|---|
[js] 빈 값을 가진 json key 제거 (0) | 2023.02.08 |
[js] const, let (0) | 2023.02.04 |
[js] var, let (0) | 2023.02.04 |
[js] Nullish coalescing operator(??) (0) | 2023.02.03 |
댓글