[JavaScript] function 에서의 세미콜론(;)

 

※배워가고 있는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드려요😆

 

1) 개요

진짜 별거 아닌데, 가끔씩 자바스크립트 문법에서 세미콜론을 붙이냐 안 붙이냐 를 고민한 적이 좀 있다.

그래서 이참에 헷갈리는 거 정리해보려고 한다!

원칙은 아니고, 권고사항이니 참고만 해라!

 

2) 문법

1. 함수 선언문(function statement)와 함수 표현식(function expression)

함수 선언문 - 함수 끝에 세미콜론을 붙이지 않음

함수 표현식 - 세미콜론을 붙이는 것을 권장

//함수 선언식
function add(x,y){
	return x+y;
}

//함수 표현식
const add = (x,y) => {
	return x+y;
};

똑같은 식을 함수 선언식과 함수 표현식으로 나타낸 것이다.

하나의 관습같은 건데 , 자바스크립트는 C와 같이 세미콜론 사용을 강제하진 않지만 (자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문) 신경쓰지 않으면 문제가 생길 수 있다고 한다. 가령 다음과 같은 예제를 살펴보자.

const add = () => {
	return 42;
} //세미콜론을 사용하지 않음

(function(){
	console.log("function called");
})();
//error - number is not a function

이 예제 코드의 의도는 단순히 42를 리턴하는 func() 함수를 정의하고, 그런 다음 즉시 실행 함수 형식으로 "function called"를 출력하려고 한 것이다. 하지만 이 코드는 세미콜론을 사용하지 않았으므로 실제로 func() 함수를 호출하면 의도와는 다르게 'number is not a function'이라는 에러가 발생한다.

 

그 이유는 자바스크립트 파서가 func()의 함수 정의에서 세미콜론을 사용하지 않아, return 42; 문장을 지나 func() 의 함수 정의 끝에 있는 중괄호(})만으로 func() 함수가 끝났다고 판단하지 않기 때문이다.

그리고 자바스크립트 파서는 이후에 괄호에 둘러싸여 정의된 즉시 실행 함수를 보고 이를 마치 func() 함수 호출 연산으로 생각해서

func()함수를 호출해버린다. 그렇기 때문에 func() 함수가 호출되면 42가 반환되고 즉시 실행 함수를 실행하려고 남겨둔 마지막 ()괄호가 있으므로 42(); 형태로 또 다시 함수를 호출하려고 시도한다. 그러나 42는 숫자이지 함수가 아니므로 'number is not a function' 에러가 발생하게 되는 것이다.

 

이런 문제가 발생할 수 있어 많은 자바스크립트 가이드에서는 함수 표현식 방식에서의 세미콜론 사용을 강력하게 권고하고 있다.

 

2. 메서드

클래스나 객체 안에 들어가있는 함수를 '메서드'라고 한다.

메서드는 끝에 세미콜론을 붙여주지 않는다!

아래의 예제 클래스를 확인해보자

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// 사용법:
let user = new User("SeGorae");
user.sayHi();

User 클래스에 속해있는 메서드 sayHi 끝에는 세미콜론이 붙지 않는다!!

 

3) 참고자료

 - 인사이드 자바스크립트 - 송형주, 고현준 지음

 - 구글 자바스크립트 스타일 가이드

https://google.github.io/styleguide/jsguide.html#features-functions