[TIL] 24_0120 Javascript 오류 - SyntaxError(구문 오류, 문법 오류)

SyntaxError (구문 오류, 문법 오류)

SyntaxError 객체는 문법적으로 잘못된 코드를 컴퓨터가 해석하려고 시도할 때 발생하는 오류를 나타내줘.

JavaScript 엔진이 코드를 구문(문법) 분석을 할 때 언어의 구문에 맞지 않는 토큰이나 토큰 순서를 만나면 이 에러를 발생시켜서 수정하란 경고를 줘.

 

SyntaxError : 경로 ~~ 코드면 파일.js:23(해당 오류 코드줄 ) 이런 식으로

 

 

이번에 zep에서 같이 공부하는 동료분의 고민을 리뷰하면서 해결했어.

해당 오류 예시 코드

export const ErrorEx = () => {
    const arr = [{
    	name : "장아찌",
    	kind : "반찬",
    },
    {
    	name : "스테이크"
    	kind : "반찬"
    }
    ]
    
    return (
           <div>
              {arr.map((food) => {
               return (<div class="anything"
                         {food.kind} - {food.name}
                });
              }	
           </div>
	)
}

 

 

해결

img, input, br, hr같은 단일 태그가 아니라 여는 태그와 닫는 태그방식인 div라 우선 닫는 꺽쇄로 "anything"뒤를 감싸고

div의 닫는 태그를 food.kind와, food.name줄의 아래의 return의 ()괄호 안에 넣어줘서 문법을 맞춰줌으로써 문법오류(Syntax Error)를 해결해줬어. 

 return (
           <div>
              {arr.map((food) => {
               return (<div class="anything">
                         {food.kind} - {food.name}
                       </div>
                });
              }	
           </div>
	)

이와 같이 정해진 문법을 지키지 않으면 Syntax Error(문법오류)를 보여주며 경고를 받아.

 

 

느낀 점

- 웬만한 문법 오류는 써야할 문이 완성이 안 되거나 필요한 요소, 문자가 없을 때 일어나는 것 같아. 앞으로 Syntax Error를 만나면 제일 먼저 저런 부분부터 살펴보면 되지 않을까.

 

 

 

*참고

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError