1976s

SyntaxError : 구문 오류

JavaScript SyntaxError는 코드의 문법이 잘못된 경우 발생합니다.
SyntaxError - JavaScript | MDN 참조; 몇 가지 예를 들어 설명하겠습니다.

 

 

✔️ SyntaxError: Unexpected reserved word

Uncaught SyntaxError: Unexpected reserved word (V8-based)
Uncaught SyntaxError: unexpected token: reserved word 'x' (Firefox)
Uncaught SyntaxError: Unexpected use of reserved word 'x' (safari)

let enum = 0; // enum 은 예약어

키워드 및 예약어가 식별자로 쓰인 경우 발생하는 에러입니다.

 

 

✔️ SyntaxError: Unexpected end of input

Uncaught SyntaxError: Unexpected end of input (V8-based)
Uncaught SyntaxError: missing } after function body (Firefox)
Uncaught SyntaxError: Unexpected end of script (safari)

const charge = function () {
  if (sunny) {
    afun();
};

const charge = function () {
  if (sunny) {
    afun();
  } // <- 여기
};

괄호를 제대로 닫지 않아서 나는 에러인데 앞뒤로 {} () 이런 괄호를 잘 확인하시기 바랍니다.

 

 

✔️ SyntaxError: Invalid shorthand property initializer

Uncaught SyntaxError: Invalid shorthand property initializer (V8-based)
Uncaught SyntaxError: missing : after property id (Firefox)
Uncaught SyntaxError: Unexpected token '='. Expected a ':' following the property name 'x'. (Safari)
Uncaught SyntaxError: Unexpected token '+'. Expected an identifier as property name. (Safari)

var obj = { propertyKey = 'value' };

var obj = { propertyKey : 'value' };

객체 초기자 구문으로 객체를 만들 때 콜론(:)은 객체의 속성을 키와 값으로 분리합니다.

즉, ':'를 써야 하는데 '='을 사용해서 오류입니다.

 

 

✔️ SyntaxError : missing ) after argument list

Uncaught SyntaxError: missing ) after argument list (V8-based & Firefox)
Uncaught SyntaxError: Unexpected identifier 'x'. Expected ')' to end an argument list. (safari)

console.log("PI: " Math.PI); // '+' 기호 누락

console.log("PI: " + Math.PI);

맞춤법, 연산자 누락 또는 이스케이프 처리를 하지 않는 문자열과 같은 것으로 발생될 수 있습니다. 이 경우, 닫침 괄호가 누락된 것으로 인식을 합니다.

 

 

 

✔️ SyntaxError: Missing initializer in const declaration

Uncaught SyntaxError: Missing initializer in const declaration (V8-based)
Uncaught SyntaxError: missing = in const declaration (Firefox)
Uncaught SyntaxError: Unexpected token ';'. const declared variable 'x' must have an initializer. (safari)

const myNum;

var 또는 let과 달리, const 선언에서는 반드시 값을 정의해야 합니다.

const myNum = 123;

상수는 재할당되거나 재선언될 수 없습니다. 따라서 상수는 반드시 선언과 동시에 값을 대입(초기화)해줘야 합니다.

 

 

✔️ SyntaxError: Function statements require a function name

Uncaught SyntaxError: Function statements require a function name (V8-based)
Uncaught SyntaxError: function statement requires a name (Firefox)
Uncaught SyntaxError: Function statements must have a name. (Safari)

function () {
    return "Hello world!";
}

함수 구문(또는 함수 선언)은 이름이 필요하므로 위의 예제는 동작하지 않습니다.

function greet() {
    return "Hello world!";
}

var greet = function() {
  return 'Hello world';
};

또는, 선언하자마자 바로 실행되는 함수는, IIFE

(function () {
 // --
})();

 

 

✔️ SyntaxError: Invalid or unexpected token

Uncaught SyntaxError: Invalid or unexpected token (V8-based)
Uncaught SyntaxError: illegal character 유니코드명 (Firefox)
Uncaught SyntaxError: Invalid character: 'x'(safari)

“This looks like a string”; //"(U+0022)이 아닌 “(U+201C)”(U+201D)으로 입력함
42 – 13; // -(U+002D)가 아닌 –(U+2013)으로 입력함
var foo = 'bar'; // ;(U+003A)이 아닌 ;(U+02D0)으로 입력함

// 앞이나 뒤에 오는 문자를 잊어버리기 쉽습니다.
var colors = ['#000', #333', '#666']; // #333' 이 아닌 '#333'을 입력해야 한다

일반적으로 JavaScript 코드에서 예기치 않은 문자나 기호를 사용하는 경우 발생합니다. 즉, 구문이 맞지 않거나 특수기호를 사용하여 보이는 것은 같은 모양이지만 다른 글자입니다.

몇 가지를 추려 소개합니다. 나무위키 - 닮은꼴 문자에서 나머지를 찾아볼 수 있습니다.

기호	이름	HTML코드	유니코드	기호	이름	HTML코드	유니코드
;	세미콜론	&#59;	U+003B	;	그리스어 물음표	;	U+037E
:	콜론	:	U+003A	ː	모디파이어 글자 삼각형 콜론	ː	U+02D0
"	따옴표	"	U+0022	“”	왼쪽 큰 따옴표 오른쪽 이중 따옴표	“ ”	U+201C U+201D
!	느낌표	!	U+0021	ᆝ	한글 정성 아이 아라 이아	ᆝ	U+119D
i	라틴 소문자 i	i	U+0069	¡	거꾸로 한 느낌표	¡	U+00A1
-	마이너스	-	U+002D	–	엔 대쉬	–	U+2013

 

"This is actually a string";
42 - 13;
var foo = 'bar';
var colors = ['#000', '#333', '#666'];

 

 

✔️ SyntaxError: Unexpected identifier 'x'

Uncaught SyntaxError: Unexpected identifier 'x' (V8-based)
Uncaught SyntaxError: Unexpected token: identifier (Firefox)
Uncaught SyntaxError: Unexpected identifier 'x'. Expected ';' after variable declaration. (safari)

let a = 'i'm teacher';

let a = "i'm teacher";
or
let a = 'i\'m teacher';

'식별자가 예상하지 못한 위치에서 등장했다'는 오류로 오타나 빠진 문자을 주로 보면 됩니다.

 

 

✔️ SyntaxError: Identifier 'x' has already been declared

Uncaught SyntaxError: Identifier "x" has already been declared (V8-based)
Uncaught SyntaxError: redeclaration of formal parameter "x" (Firefox)
Uncaught SyntaxError: redeclaration of 명령어 변수명 (Firefox)
Uncaught SyntaxError: Cannot declare a let variable twice: 'x'. (Safari)

Firefox 오류 화면

let a = 1;
let a = 2;

let a = 1;
a = 2; // let는 재 할당 가능
or
let a = 1;
let b = 2; // 다른 변수명 사용

'let' 또는 'const' 키워드를 사용하여 동일 스코프(범위) 내에서 변수가 여러 번 선언될 때 발생합니다.

 

 

✔️ SyntaxError: return not in function

Uncaught SyntaxError: Illegal return statement (V8-based)
Uncaught SyntaxError: return not in function (Firefox)
Uncaught SyntaxError: Return statements are only valid inside functions. (Safari)

var cheer = function(score) {
  if (score === 147)
    return 'Maximum!';
  };
  if (score > 100) {
    return 'Century!';
  }
}

var cheer = function(score) {
  if (score === 147) {
    return 'Maximum!';
  }
  if (score > 100) {
    return 'Century!';
  }
};

return 또는 yield 문장이 function 밖에서 호출되었습니다.

 

node에서 실행하면 SyntaxError: Unexpected token '}' 로 표시됩니다.

 

---

Browser 테스트

112.0	112.0	112.0	13.1	97.0	3.19

 

마치며

자바스크립트를 공부하면서 만나게 되는 또는 될 것 같은 구문오류를 미리 정리해 보았습니다. 몇몇은 MDN문서와 달리 표현된 에러를 직접 safari랑 기타 브라우저를 설치 후 보면서 한 것입니다. 추후 추가로 알게 된 것들도 추가할 생각입니다. 수정이 있으시면 댓글 부탁드립니다.