우리의 코드는 최대한 깨끗하고 읽기 쉬워야 합니다.
복잡한 작업을 수행하고 정확하고 사람이 읽을 수 있는 방식으로 코딩하는 것이 실제로 프로그래밍의 예술입니다. 좋은 코드 스타일은 이에 큰 도움이 됩니다.
다음은 몇 가지 제안된 규칙이 포함된 치트 시트입니다(자세한 내용은 아래 참조).
이제 규칙과 그 이유에 대해 자세히 논의해 보겠습니다.
"반드시"라는 규칙은 없습니다.
여기에는 아무것도 설정되어 있지 않습니다. 이것은 종교적 교리가 아닌 스타일 선호입니다.
대부분의 JavaScript 프로젝트에서 중괄호는 새 줄이 아닌 해당 키워드와 같은 줄에 여는 중괄호를 사용하여 "이집트" 스타일로 작성됩니다. 여는 괄호 앞에도 다음과 같이 공백이 있어야 합니다.
if (조건) {
// 이렇게 하세요
// ...그리고 그거
// ...그리고 그거
} if (condition) doSomething() 과 같은 한 줄 구조는 중요한 엣지 케이스입니다. 중괄호를 전혀 사용해야합니까?
다음은 가독성을 직접 판단할 수 있는 주석이 달린 변형입니다.
? 초보자들은 가끔 그런 짓을 합니다. 나쁜! 중괄호는 필요하지 않습니다.
if (n < 0) {alert(`Power ${n}은(는) 지원되지 않습니다`);}? 중괄호 없이 별도의 줄로 분할합니다. 절대 그렇게 하지 마십시오. 새 줄을 추가할 때 오류가 발생하기 쉽습니다.
만약 (n < 0)
Alert(`Power ${n}은(는) 지원되지 않습니다`);? 중괄호 없는 한 줄 - 짧다면 허용됩니다.
if (n < 0) Alert(`Power ${n}은(는) 지원되지 않습니다`);? 가장 좋은 변형:
만약 (n < 0) {
Alert(`Power ${n}은(는) 지원되지 않습니다`);
} 매우 간단한 코드의 경우 한 줄이 허용됩니다(예: if (cond) return null . 그러나 코드 블록(마지막 변형)은 일반적으로 더 읽기 쉽습니다.
긴 수평선의 코드를 읽는 것을 좋아하는 사람은 없습니다. 분할하는 것이 가장 좋습니다.
예를 들어:
// 백틱 따옴표 ` 문자열을 여러 줄로 나눌 수 있습니다. str = `로 놔두세요 ECMA International의 TC39는 JavaScript 개발자 그룹입니다. 구현자, 학계 등이 커뮤니티와 협력하여 JavaScript의 정의를 유지하고 발전시키기 위해. `;
그리고 if 문의 경우:
만약에 (
아이디 === 123 &&
MoonPhase === '완만함' &&
zodiacSign === '천칭자리'
) {
letTheSorceryBegin();
}최대 라인 길이는 팀 수준에서 합의되어야 합니다. 일반적으로 80자 또는 120자입니다.
들여쓰기에는 두 가지 유형이 있습니다.
가로 들여쓰기: 공백 2~4개.
가로 들여쓰기는 2~4개의 공백이나 가로 탭 기호( Tab 키)를 사용하여 만듭니다. 어느 쪽을 선택할지는 오래된 성전이다. 요즘에는 공백이 더 흔해졌습니다.
탭에 비해 공백이 갖는 한 가지 장점은 공백을 사용하면 탭 기호보다 들여쓰기를 더 유연하게 구성할 수 있다는 것입니다.
예를 들어 다음과 같이 매개변수를 여는 괄호에 맞춰 정렬할 수 있습니다.
표시(매개변수,
alignment, // 왼쪽에 공백 5개 채우기
하나,
후에,
또 다른
) {
// ...
}수직 들여쓰기: 코드를 논리 블록으로 분할하기 위한 빈 줄입니다.
단일 기능이라도 종종 논리 블록으로 나눌 수 있습니다. 아래 예에서는 변수 초기화, 메인 루프 및 결과 반환이 수직으로 분할됩니다.
함수 pow(x, n) {
결과 = 1로 둡니다.
// <--
for (let i = 0; i < n; i++) {
결과 *= x;
}
// <--
결과 반환;
}코드를 더 읽기 쉽게 만드는 데 도움이 되는 추가 줄바꿈을 삽입하세요. 세로 들여쓰기 없이 코드가 9줄 이상 있어서는 안 됩니다.
건너뛸 수 있더라도 각 명령문 뒤에는 세미콜론이 있어야 합니다.
세미콜론이 실제로 선택 사항이고 거의 사용되지 않는 언어가 있습니다. 하지만 JavaScript에서는 줄 바꿈이 세미콜론으로 해석되지 않아 코드가 오류에 취약해지는 경우가 있습니다. 이에 대한 자세한 내용은 코드 구조 장을 참조하세요.
숙련된 JavaScript 프로그래머라면 StandardJS와 같이 세미콜론이 없는 코드 스타일을 선택할 수 있습니다. 그렇지 않으면 가능한 함정을 피하기 위해 세미콜론을 사용하는 것이 가장 좋습니다. 대부분의 개발자는 세미콜론을 사용합니다.
코드를 너무 많은 수준으로 중첩하지 마세요.
예를 들어, 루프에서 추가 중첩을 방지하기 위해 continue 지시문을 사용하는 것이 때로는 좋은 생각입니다.
예를 들어, 다음과 같이 중첩된 if 조건을 추가하는 대신:
for (let i = 0; i < 10; i++) {
if (조건) {
... // <- 중첩 수준이 하나 더 추가되었습니다.
}
}우리는 다음과 같이 쓸 수 있습니다:
for (let i = 0; i < 10; i++) {
if (!cond) 계속;
... // <- 추가 중첩 수준 없음
} if/else 및 return 사용하여 비슷한 작업을 수행할 수 있습니다.
예를 들어 아래 두 구성은 동일합니다.
옵션 1:
함수 pow(x, n) {
만약 (n < 0) {
Alert("음수 'n'은 지원되지 않습니다.");
} 또 다른 {
결과 = 1로 둡니다.
for (let i = 0; i < n; i++) {
결과 *= x;
}
결과 반환;
}
}옵션 2:
함수 pow(x, n) {
만약 (n < 0) {
Alert("음수 'n'은 지원되지 않습니다.");
반품;
}
결과 = 1로 둡니다.
for (let i = 0; i < n; i++) {
결과 *= x;
}
결과 반환;
} 두 번째 것은 n < 0 이라는 "특수 사례"가 초기에 처리되기 때문에 더 읽기 쉽습니다. 검사가 완료되면 추가 중첩 없이 "기본" 코드 흐름으로 이동할 수 있습니다.
여러 "도우미" 함수와 이를 사용하는 코드를 작성하는 경우 함수를 구성하는 세 가지 방법이 있습니다.
이를 사용하는 코드 위에 함수를 선언합니다.
// 함수 선언
함수 createElement() {
...
}
함수 setHandler(elem) {
...
}
함수 walkAround() {
...
}
// 이를 사용하는 코드
let elem = createElement();
setHandler(요소);
둘러보기();먼저 코드를 작성한 다음 기능을 수행하세요.
// 함수를 사용하는 코드
let elem = createElement();
setHandler(요소);
둘러보기();
// --- 도우미 함수 ---
함수 createElement() {
...
}
함수 setHandler(elem) {
...
}
함수 walkAround() {
...
}혼합: 함수가 처음 사용된 위치에서 선언됩니다.
대부분의 경우 두 번째 변형이 선호됩니다.
그 이유는 코드를 읽을 때 먼저 코드가 무엇을 하는지 알고 싶기 때문입니다. 코드가 먼저 오면 처음부터 명확해집니다. 그러면 함수를 전혀 읽을 필요가 없을 수도 있습니다. 특히 이름이 실제로 수행하는 작업을 설명하는 경우라면 더욱 그렇습니다.
스타일 가이드에는 사용할 인용 부호, 들여쓰기할 공백 수, 최대 줄 길이 등 코드 "작성 방법"에 대한 일반적인 규칙이 포함되어 있습니다. 많은 사소한 것들이 있습니다.
팀의 모든 구성원이 동일한 스타일 가이드를 사용하면 어떤 팀 구성원이 작성했는지에 관계없이 코드가 균일해 보입니다.
물론 팀은 언제든지 자신만의 스타일 가이드를 작성할 수 있지만 일반적으로 그럴 필요는 없습니다. 선택할 수 있는 기존 가이드가 많이 있습니다.
몇 가지 인기 있는 선택:
Google JavaScript 스타일 가이드
에어비앤비 자바스크립트 스타일 가이드
관용적.JS
스탠다드JS
(그리고 더 많은 것)
초보 개발자라면 이 장의 시작 부분에 있는 치트 시트부터 시작하세요. 그런 다음 다른 스타일 가이드를 탐색하여 더 많은 아이디어를 선택하고 가장 마음에 드는 스타일을 결정할 수 있습니다.
Linter는 코드 스타일을 자동으로 확인하고 개선된 제안을 제공할 수 있는 도구입니다.
이들의 가장 큰 장점은 스타일 검사를 통해 변수나 함수 이름의 오타와 같은 일부 버그도 찾을 수 있다는 것입니다. 이 기능 때문에 특정 "코드 스타일"을 고수하고 싶지 않더라도 linter를 사용하는 것이 좋습니다.
다음은 잘 알려진 린팅 도구입니다.
JSLint – 최초의 린터 중 하나입니다.
JSHint – JSLint보다 더 많은 설정입니다.
ESLint – 아마도 최신 버전일 것입니다.
그들 모두는 그 일을 할 수 있습니다. 저자는 ESLint를 사용합니다.
대부분의 린터는 널리 사용되는 여러 편집기와 통합되어 있습니다. 편집기에서 플러그인을 활성화하고 스타일을 구성하기만 하면 됩니다.
예를 들어 ESLint의 경우 다음을 수행해야 합니다.
Node.js를 설치합니다.
npm install -g eslint 명령을 사용하여 ESLint를 설치합니다(npm은 JavaScript 패키지 설치 프로그램입니다).
JavaScript 프로젝트의 루트(모든 파일이 포함된 폴더)에 .eslintrc 라는 구성 파일을 만듭니다.
ESLint와 통합되는 편집기용 플러그인을 설치/활성화합니다. 대부분의 편집자는 하나를 가지고 있습니다.
다음은 .eslintrc 파일의 예입니다.
{
"extends": "eslint:권장",
"환경": {
"브라우저": 사실,
"노드": 사실,
"es6": 사실
},
"규칙": {
"콘솔 없음": 0,
"들여쓰기": 2
}
} 여기서 "extends" 지시문은 구성이 "eslint:recommended" 설정 집합을 기반으로 함을 나타냅니다. 그 후에 우리는 우리 자신을 지정합니다.
웹에서 스타일 규칙 세트를 다운로드하여 대신 확장할 수도 있습니다. 설치에 대한 자세한 내용은 https://eslint.org/docs/user-guide/getting-started를 참조하세요.
또한 특정 IDE에는 Linting이 내장되어 있는데 이는 편리하지만 ESLint만큼 사용자 정의할 수는 없습니다.
이 장(및 참조된 스타일 가이드)에 설명된 모든 구문 규칙은 코드의 가독성을 높이는 것을 목표로 합니다. 그들 모두는 논쟁의 여지가 있습니다.
"더 나은" 코드를 작성하는 것에 대해 생각할 때 우리가 스스로에게 물어봐야 할 질문은 "무엇이 코드를 더 읽기 쉽고 이해하기 쉽게 만드는가?"입니다. 그리고 “오류를 피하는 데 무엇이 도움이 될 수 있나요?” 코드 스타일을 선택하고 토론할 때 명심해야 할 주요 사항은 다음과 같습니다.
인기 있는 스타일 가이드를 읽으면 코드 스타일 동향 및 모범 사례에 대한 최신 아이디어를 최신 상태로 유지할 수 있습니다.
중요도: 4
아래 코드 스타일에 어떤 문제가 있나요?
함수 pow(x,n)
{
결과=1로 둡니다.
for(let i=0;i<n;i++) {결과*=x;}
결과 반환;
}
let x=prompt("x?",''), n=prompt("n?",'')
만약 (n<=0)
{
Alert(`Power ${n}은(는) 지원되지 않습니다. 0보다 큰 정수를 입력하세요.`);
}
또 다른
{
경고(파우(x,n))
}문제를 해결하세요.
다음 사항에 주목할 수 있습니다.
function pow(x,n) // <- 인수 사이에 공백이 없습니다.
{ // <- 별도의 줄에 있는 그림 괄호
결과=1로 둡니다. // <- = 앞뒤에 공백이 없습니다.
for(let i=0;i<n;i++) {result*=x;} // <- 공백 없음
// { ... }의 내용은 새 줄에 있어야 합니다.
결과 반환;
}
let x=prompt("x?",''), n=prompt("n?",'') // <-- 기술적으로 가능합니다.
// 하지만 2줄로 만드는 것이 더 좋습니다. 공백이나 누락도 없습니다.
if (n<=0) // <- 내부에 공백이 없으며 (n <= 0) 위에 추가 줄이 있어야 합니다.
{ // <- 별도의 줄에 있는 그림 괄호
// 아래 - 가독성 향상을 위해 긴 줄을 여러 줄로 나눌 수 있습니다.
Alert(`Power ${n}은(는) 지원되지 않습니다. 0보다 큰 정수를 입력하세요.`);
}
else // <- "} else {"와 같이 한 줄에 쓸 수 있습니다.
{
Alert(pow(x,n)) // 공백이 없고 누락됨 ;
}고정 변형:
함수 pow(x, n) {
결과 = 1로 둡니다.
for (let i = 0; i < n; i++) {
결과 *= x;
}
결과 반환;
}
let x = 프롬프트("x?", "");
let n = 프롬프트("n?", "");
만약 (n <= 0) {
Alert(`전력 ${n}은(는) 지원되지 않습니다.
0보다 큰 정수를 입력하세요`);
} 또 다른 {
경고( pow(x, n) );
}