[모던 자바스크립트] 2.2 코드 구조

https://ko.javascript.info/structure

코드 구조

 

✏️ 문

문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미

• 코드엔 원하는 만큼 문을 작성할 수 있고 서로 다른 문은 세미콜론으로 구분

alert('Hello'); alert('World');

 

• 코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적

alert('Hello');
alert('World');

 

 

✏️ 세미콜론

• 줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있음

  • alert('Hello')
    alert('World')

• 자바스크립트는 줄 바꿈이 있으면 이를 '암시적' 세미콜론으로 해석
• 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라고 함
• 대부분의 경우, 줄 바꿈은 세미콜론을 의미하지만 '대부분의 경우'가 '항상'을 의미하진 않음

 

• 줄 바꿈이 세미 콜론을 의미하지 않는 경우

  • alert(3 + 
    1
    + 2);

  • 세미콜론 자동 삽입이 일어나지 않았기 때문에 6 출력
  • 어떤 줄이 "+"로 끝나면, 그 줄은 불완전한 표현식이므로 세미콜론이 필요하지 않음

 

• 반면, 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 '못하는' 상황도 존재
• 이런 상황에서 발생하는 에러는 찾거나 고치기 어려움

  • [1, 2].forEach(alert)

  • []와 forEach에 대해 배우지 않았기 때문에 코드를 실행하면 1과 2가 출력된다는 사실만 기억

 

• 앞에 세미콜론이 붙지 않은 alert 추가

  • alert("에러 발생")
    
    [1, 2].forEach(alert)

• 위의 코드를 실행하면 alert만 제대로 출력되고 에러가 발생

 

• alert 끝에 세미콜론을 추가하면 잘 실행됨

  • alert("제대로 동작");
    
    [1, 2].forEach(alert)

• 에러가 발생한 이유는 자바스크립트가 대괄호 [...] 앞에는 세미콜론이 있다고 가정하지 않기 때문
• 따라서 세미콜론 자동삽입이 일어나지 않고 첫 번째 예제는 단일문으로 처리
• 자바스크립트 엔진이 보게 될 코드

  • alert("에러 발생")[1, 2].forEach(alert)

• 단일 문이 아닌 두 개의 서로 다른 문이었고, 문이 잘못 합쳐지면 에러가 발생

 

✅ 결론

줄 바꿈으로 문을 나눴더라도, 문 사이엔 세미콜론을 넣는 것이 좋음

자바스크립트 커뮤니티에서도 이를 규칙으로 정해 권장하고 있음

• 세미콜론은 생략할 수 있음
• 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르자

 

✏️ 주석

시간의 흐름에 따라 자바스크립트 프로그램은 더욱더 복잡해졌기 대문에 무슨 일이 왜 벌어지고 있는지 설명해주는 주석(comment)의 필요성이 요구됨

• 주석은 스크립트 어느 곳에나 작성할 수 있음
• 자바스크립트 엔진은 주석을 무시하기 때문에 주석의 위치는 실행에 영향을 주지 않음

 

• 한 줄짜리 주석은 두 개의 슬래시 //로 시작
  • 슬래시 뒤에 주석 작성
  • 한 줄을 주석이 다 차지하는 형태도 있고 문 다음에 주석이 이어지는 형태도 있음

  • // 이 주석은 한 줄을 다 차지
    alert('Hello');
    
    alert('World'); // 이 주석은 문 다음 이어짐

 

• 여러 줄의 주석은 슬래시와 별표 /*로 시작해 별표와 슬래시 */로 끝남

  • /* 두 줄짜리 주석 예제
    이건 여러 줄의 주석
    */
    alert('Hello');
    alert('World');

  • 주석의 내용은 무시됨. 주석 /* ... */ 안에 코드가 들어가도 이 코드는 실행되지 않음

  • /* 코드 주석 처리
    alert('Hello');
    */
    alert('World');

 

 

🚨 단축키 사용하기

• 대부분의 에디터는 주석 처리 단축기 지원
• 블록을 지정하고 단축키를 누르면 원하는 코드를 주석 처리할 수 있음
• Ctrl + /를 사용하면 해당 줄의 코드를 한 줄짜리 주석으로 처리할 수 있음
• 여러 줄의 주석은 Ctrl + Shift + /를 통해 처리할 수 있음
• Mac에서는 Ctrl 대신 Cmd를, Shift 대신 Option을 사용

 

🚨 중첩 주석 지원하지 않음

• /* ... */ 안에 또 다른 /* ... */이 있을 수 없음
• 주석을 중첩해 쓰면 에러 발생

  • /*
    	/* 중첩 주석 ?!? */
    */
    alert('World');

 

🚨 주석 달기를 두려워하지 말자

• 주석을 달면 코드의 전체적인 길이가 증가하지만 이는 전혀 문제가 되지 않음
• 프로덕션 서버에 배포하기 전에 코드를 압축해주는 도구가 많이 있고, 이 도구들은 주석을 삭제해줌
• 실행 중인 스크립트엔 주석이 들어가지 않으므로, 주석은 최종으로 배포되는 코드에 부정적인 영향을 끼치지 않음