프로그래밍 「 자바스크립트 편」JS 세미콜론;

JavaScript는 다재다능한 프로그래밍 언어이며 때로는 상당히 유연하고 관대합니다. 다른 상황에서는 가장 실망스럽고 용서할 수 없는 언어 중 하나가 될 수 있습니다. 그 이유 중 하나는 가장 독특한 측면 중 하나인 세미콜론(;) 명령문을 종료합니다. JavaScript에서는 대부분의 경우 세미콜론을 선택적으로 사용할 수 있지만 세미콜론의 용도와 사용 시기를 이해하면 코드의 가독성을 높이고 예기치 않은 버그를 방지할 수 있습니다. 또한 특정 문제를 코딩하기 위한 다양한 스타일을 제공할 수도 있습니다. 다른 문제와 마찬가지로 어디에서나 적절한 도구를 사용하여 해결하는 것이 가장 좋으며 이 블로그 게시물에서는 JavaScript에서 세미콜론의 기능과 사용 사례를 그 중요성을 설명하는 예제와 함께 살펴보겠습니다.

명시적 명령문 종료:
JavaScript에서 세미콜론은 명시적 명령문 종결자 역할을 합니다. 필요하지 않은 이유는 JavaScript가 누락된 세미콜론을 추가하기 위해 자동 세미콜론 삽입(ASI)을 제공하기 때문입니다. 이것은 "자동" 도구이며 모든 자동화 버전과 마찬가지로 100% 신뢰할 수 없습니다. 자동 삽입은 백그라운드에서 발생하며 JavaScript 실행 스레드가 각 줄을 읽을 때 적용됩니다. 이 명령문이 종료되었는지 자동으로 확인합니다.

const string = 'ASI will handle placing a semicolon here, for me!'

그 문장이 완성 된 것처럼 보이고 우리의 경우에는 JS가 실제로 이것을 봅니다.

const string = 'ASI will handle placing a semicolon here, for me!';

ASI에만 의존하면 예기치 않은 결과가 발생할 수 있습니다. 세미콜론을 포함하여 각 문의 끝을 표시하면 코드가 모호하지 않고 의도한 대로 동작하도록 할 수 있습니다. 예를 살펴 보겠습니다.

// Using semicolons for statement termination
let str = "Hello World!";
let num = 10;
let repeat = false;
console.log(repeat ? str.repeat(num) : str);

이 예제에서 세미콜론은 각 문을 명시적으로 종료하여 한 문이 끝나고 다른 문이 시작되는 위치를 명확히 합니다.

세미콜론 사용에 관한 두 학파는 완전히 상충됩니다. 선호하는 스타일은 코딩 스타일을 크게 반영할 것입니다. 한편으로는 ASI에 전적으로 의존하고 싶을 수도 있습니다. JS의 모든 버전에는 ASI가 코드 실행을 지원하는 시기와 방법을 설명하는 문서가 포함되어 있으므로 명령문이 올바르게 실행되지 않은 이유에 대해 절대 헤매지 않을 것입니다. 즉, 당신은 그것을 알아 내야 할 것이고, 당신은 당신의 코드를 읽고, 문서를 읽고, 당신의 시간이 어디로 갔는지 궁금해 할 것입니다.

반면에 모든 세미콜론이 속한 위치에 정확하게 하드 코딩할 수 있습니다. 이 접근 방식은 둘 중 더 낫다고 생각합니다. 세미콜론은 디자인을 만들거나 깨뜨릴 수 있는 코드의 필수 부분입니다. JS에 이 명령문이 완전하다는 것을 알려주지만 더 중요한 것은 코드 독자에게 이 문이 완료되었음을 알려줍니다. 예, 모범 사례는 아니지만 한 줄에 여러 문장을 작성하게 할 수 있지만 가독성 측면에서 더 나은 결과를 얻을 수 있습니다.

"프로그램은 사람들이 읽을 수 있도록 작성되어야 하며, 기계가 실행할 수 있도록 부수적으로 작성되어야 합니다."

― 해롤드 아벨슨, 『컴퓨터 프로그램의 구조와 해석』

한 줄에 여러 문:
JavaScript를 사용하면 세미콜론으로 구분하여 한 줄에 여러 문을 작성할 수 있습니다. 일반적으로 명확성을 위해 한 줄에 하나의 문을 작성하는 것이 좋지만 한 줄에 문을 결합하는 것이 유용할 수 있는 시나리오가 있습니다. 예를 들면 다음과 같습니다.

// Multiple statements on a single line
let a = 1; let b = 2; console.log(a + b);

// Clarity can be achieved depending on the use-case
let newArr = array.map((e) => {f = a > b ? e**2 : e**3; return e + f})

이 방법은 가독성을 떨어뜨릴 수 있지만 간결성이 필요한 특정 상황에서 유용할 수 있습니다. 위의 내용은 각 원본 요소가 및 의 값을 기반으로 정사각형 또는 큐브에 추가되는 배열로 평가됩니다. 이것은 삼항 또는 반환 없이 작성될 수 있지만 이 경우 가독성이 향상됩니다.newArrab

즉시 호출된 함수 표현식(IIFE):
세미콜론은 즉시 호출된 함수 표현식(IIFE)을 사용할 때 특히 중요합니다. IIFE는 정의된 직후에 실행되는 함수입니다. 잠재적인 문제를 방지하려면 아래와 같이 IIFE 앞에 세미콜론을 와야 합니다.

const obj = {
  name: "John"
}
// IIFE with semicolon preceding it
;(function() {
 console.log(“IIFE executed!”);
})();

IIFE 앞에 세미콜론을 포함하면 올바르게 종료되지 않았을 수 있는 선행 코드로 인해 발생하는 예기치 않은 동작을 방지할 수 있습니다. 아래 예제에서는 위와 같은 기능을 실행할 때 오류가 발생합니다.

const obj = {
  name: "John"
} // <-- No semicolon here

(function() { // <-- No semicolon preceding the IIFE
  console.log("IIFE executed!");
})();
// --> TypeError: {(intermediate value)} is not a function

다른 구문과 함께 세미콜론 사용:
세미콜론은 for 루프, while 루프 및 if 문과 같이 적절한 문 종료에 의존하는 JavaScript 구문을 사용할 때 필수적입니다. 다음 데모를 고려하십시오.

// Using semicolons with loops and conditionals
for (let i = 0; i < 5; i++) {
 if (i % 2 === 0) {
 console.log(i);
 };
};

이 경우 세미콜론은 루프의 구성 요소를 구분하는 데 사용됩니다. 그것들이 없으면 루프가 실행되는 조건을 초기화, 반복 또는 선언할 수 없습니다. 또한 세미콜론을 사용하여 조건부에 조건이 없으며 닫는 대괄호 뒤에 루프가 완료되었음을 선언합니다. 세미콜론을 사용하지 말아야 할 때를 아는 것만큼이나 세미콜론을 사용해야 할 때를 아는 것도 중요합니다. 위의 경우 조건을 포함하면 조건을 닫을 수 없습니다.ifelseifelse

결론:
JavaScript는 많은 경우에 선택적 세미콜론을 허용하지만 ASI의 도움으로 명시적으로 세미콜론을 사용하여 문을 종료하는 것은 코드를 작성할 때 모범 사례를 유지하는 것이 좋습니다. 가독성을 높이고, 버그를 방지하여 문제 해결 시간을 절약하고, 코드가 의도한 대로 작동하도록 합니다. 그 결과 더 깔끔하고 안정적인 JavaScript 코드를 작성할 수 있습니다.

한 줄에 여러 명령문을 결합할 때, IIFE 및 적절한 명령문 종료가 필요한 다른 구문과 결합할 때 각 명령문의 끝에 세미콜론을 사용해야 합니다. 이러한 원칙을 이해하고 적용하면 JavaScript 숙련도에 기여하고 코드의 전반적인 품질을 향상시킬 수 있습니다.