[JavaScript] 변수 선언 규칙 및 코드 스타일 가이드

Moon·2024년 10월 21일

JavaScript | 기초

목록 보기

7/48

변수를 만들 때 이름을 아무렇게나 짓지 않고, 몇 가지 규칙을 따라야 한다. 변수명은 프로그램의 가독성과 유지보수에 영향을 주기 때문에, 의미 있는 이름을 사용하는 것이 중요하다. 여기서는 변수를 만들 때 지켜야 할 기본 규칙과, 코드의 가독성을 높이기 위한 스타일 가이드를 정리한다.

꼭 지켜야 하는 규칙 (지키지 않으면 오류 발생)

JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)', '달러 기호($)'로 시작해야 한다
두 번째 글자부터는 숫자(0-9)를 사용할 수 있지만, 첫 글자는 반드시 문자, 밑줄, 또는 달러 기호로 시작해야 한다.
대문자와 소문자는 구별된다
자바스크립트에서 myname과 myName은 서로 다른 변수로 인식된다. 따라서 변수명을 작성할 때 대소문자 구분에 유의해야 한다.
예약어는 변수명으로 사용할 수 없다
자바스크립트에는 예약어라는 특정 용도로 미리 정해진 단어들이 있다. 예를 들어 if, for, let 같은 예약어는 변수명으로 사용할 수 없다.

지키면 좋은 규칙 (더 나은 코드 스타일을 위해)

기본 규칙만 지켜도 코드가 잘 동작하지만, 가독성을 높이기 위해 추가로 신경 써야 할 부분들이 있다. 협업이나 유지보수를 고려해 코드의 일관성을 유지하기 위한 변수명 규칙을 정리한다.

1. 의미 없는 이름은 피하기

let a, b, c, d; // 의미 없는 변수명

이렇게 a, b, c, d처럼 의미 없는 변수명을 사용하면, 나중에 어떤 값을 저장했는지 파악하기 어렵다. 또한, 프로그램의 가독성이 떨어지고, 나중에 코드를 수정하거나 협업할 때 문제가 될 수 있다. 의미 있는 이름을 사용하여, 변수의 용도를 명확하게 나타내는 것이 좋다.

2. 너무 추상적인 이름도 피하기

let name; // 너무 추상적인 이름

name과 같은 변수명은 프로그램이 복잡해질수록 너무 추상적일 수 있다. 다양한 '이름'이 사용될 수 있기 때문에, 조금 더 구체적인 변수명을 사용해 어떤 용도의 이름인지 명확히 나타내는 것이 좋다.

3. 'camelCase' 사용하기

변수명에는 띄어쓰기를 사용할 수 없으므로, camelCase 방식을 사용해 가독성을 높일 수 있다. camelCase는 첫 글자는 소문자로 시작하고, 단어가 이어질 때 첫 글자를 대문자로 표기하는 방식이다.

let bad_variable_name; // 비추천 방식
let goodVariableName; // camelCase 사용

중간에 대문자가 들어가는 방식이 낙타(camel)의 혹처럼 생겼다고 해서 camelCase라고 부른다. 이 방식은 가독성을 높이고, 변수명이 길어지더라도 의미를 쉽게 파악할 수 있다.

코드 스타일 가이드 참고하기

자바스크립트 코드 스타일을 통일하기 위해, 여러 유명한 그룹들이 스타일 가이드를 제공하고 있다. 아래의 스타일 가이드를 참고하면, 좋은 코드 스타일을 유지하는 데 큰 도움이 된다.

스타일 가이드는 코드의 가독성과 유지보수성을 높이기 위한 중요한 가이드라인이다. 협업할 때 일관성 있는 코드를 작성하기 위해 이러한 스타일 가이드 혹은 코딩 컨벤션를 참고하는 것이 좋다.

코드 에디터 설정: VSCode에서 들여쓰기 2칸 설정하기

코드를 작성할 때 들여쓰기도 중요한 요소 중 하나다. 자바스크립트 스타일 가이드 대부분은 띄어쓰기 2칸을 권장한다. VSCode에서 2칸 들여쓰기를 설정하는 방법을 간단히 정리한다.

VSCode에서 들여쓰기 설정하는 방법:

VSCode 실행 후, 설정 창(Settings) 열기

단축키: Ctrl + , (맥에서는 Cmd + ,)
Tab Size와 Indentation 설정:
- 검색창에 editor tab 입력
- Editor: Detect Indentation 체크 해제
- Editor: Tab Size를 2로 설정
- Editor: Insert Spaces가 체크되어 있는지 확인
기존 코드 포맷팅하기:
- 전체 선택: Ctrl + A (맥에서는 Cmd + A)
- Format Document: Shift + Alt + F (맥에서는 Shift + Option + F)