반응형
JavaScript 코딩 컨벤션, 네이밍 컨벤션, 그리고 규칙을 따르면 코드의 가독성, 유지보수성, 일관성이 크게 향상됩니다. 아래에 JavaScript를 작성할 때 지켜야 할 주요 컨벤션과 규칙을 정리했습니다.
JavaScript 코딩 컨벤션
1. 들여쓰기와 공백
- 들여쓰기: 일반적으로 2칸 또는 4칸의 공백을 사용합니다. 일관된 들여쓰기를 유지합니다.
- 공백: 연산자 주변, 코드 블록 사이, 함수 인수 목록 등에 적절한 공백을 사용하여 가독성을 높입니다.
// 2칸 들여쓰기 예시
function add(a, b) {
return a + b;
}
// 공백 사용 예시
let sum = add(2, 3);
if (sum > 5) {
console.log('Sum is greater than 5');
}
2. 중괄호와 줄바꿈
- 중괄호: 조건문, 반복문, 함수 정의 등 모든 코드 블록에서 중괄호를 사용합니다.
- 줄바꿈: 코드 블록의 시작 중괄호는 같은 줄에 작성하고, 종료 중괄호는 새로운 줄에 작성합니다.
if (true) {
console.log('Condition is true');
} else {
console.log('Condition is false');
}
3. 세미콜론
- 세미콜론: 모든 문(statement) 끝에 세미콜론을 사용합니다.
let name = 'John';
let age = 30;
4. 변수 선언
var
대신let
과const
사용: 변수 선언 시 블록 스코프를 가지는let
과const
를 사용합니다. 변경되지 않는 값에는const
를 사용합니다.
const pi = 3.14;
let count = 0;
JavaScript 네이밍 컨벤션
1. 변수와 함수 네이밍
- 카멜 케이스(Camel Case): 변수와 함수 이름은 소문자로 시작하고, 각 단어의 첫 글자를 대문자로 합니다. (예:
let myVariableName
,function myFunctionName()
)
let myVariableName = 'value';
function myFunctionName() {
// ...
}
2. 상수 네이밍
- 대문자 스네이크 케이스(Uppercase Snake Case): 상수는 모든 문자를 대문자로 하고, 단어 사이에 언더스코어(_)를 사용합니다. (예:
const MAX_LIMIT
)
const MAX_LIMIT = 100;
3. 클래스 네이밍
- 파스칼 케이스(Pascal Case): 클래스 이름은 각 단어의 첫 글자를 대문자로 합니다. (예:
class MyClassName
)
class MyClassName {
constructor() {
// ...
}
}
4. 파일 네이밍
- 케밥 케이스(Kebab Case): 파일 이름은 모두 소문자로 하고, 단어 사이에 하이픈(-)을 사용합니다. (예:
my-file-name.js
)
my-file-name.js
JavaScript 코드 스타일 규칙
1. 함수
- 함수 선언: 함수 이름은 동사로 시작하고, 함수의 역할을 명확히 나타내야 합니다.
- 화살표 함수: 콜백 함수나 간단한 함수 표현에는 화살표 함수를 사용합니다.
// 함수 선언
function calculateSum(a, b) {
return a + b;
}
// 화살표 함수
const multiply = (a, b) => a * b;
2. 객체와 배열
- 객체와 배열의 선언: 객체와 배열을 선언할 때, 가독성을 위해 각 프로퍼티나 요소를 개별 줄에 작성합니다.
// 객체 선언
let person = {
name: 'John',
age: 30,
city: 'New York'
};
// 배열 선언
let fruits = [
'Apple',
'Banana',
'Cherry'
];
3. 주석
- 주석 사용: 코드의 목적과 동작을 설명하는 주석을 적절히 사용합니다. 주석은 코드 상단이나 각 섹션별로 작성합니다.
// 이 함수는 두 수를 더합니다.
function add(a, b) {
return a + b;
}
4. 공통 규칙
- DRY (Don't Repeat Yourself): 중복된 코드를 피하고, 재사용 가능한 함수를 작성합니다.
- KISS (Keep It Simple, Stupid): 코드를 간단하고 명확하게 유지합니다.
- YAGNI (You Aren't Gonna Need It): 현재 필요하지 않은 기능은 작성하지 않습니다.
예시 코드
// 상수 선언
const MAX_LIMIT = 100;
// 함수 선언
function calculateSum(a, b) {
return a + b;
}
// 화살표 함수
const multiply = (a, b) => a * b;
// 객체와 배열 선언
let person = {
name: 'John',
age: 30,
city: 'New York'
};
let fruits = [
'Apple',
'Banana',
'Cherry'
];
// 조건문과 반복문
if (person.age > 18) {
console.log(`${person.name} is an adult.`);
} else {
console.log(`${person.name} is not an adult.`);
}
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// 함수 호출
let sum = calculateSum(5, 10);
let product = multiply(5, 10);
console.log(`Sum: ${sum}, Product: ${product}`);
반응형
'Frontend > Javascript' 카테고리의 다른 글
[Javascript] Javascript 웹 개발 필수 개념 (0) | 2024.06.08 |
---|---|
[Javascript] Javascript 예제(심화) - 수정 (0) | 2024.06.08 |
[Javascript] Javascript 예제(심화) (0) | 2024.06.08 |
[Javascript] Javascript 심화 (0) | 2024.06.08 |
[Javascript] Javascript 실습 (0) | 2024.06.08 |