[Javascript] Uncaught SyntaxError: missing ) after argument list 에러 해결방법

Uncaught SyntaxError: missing ) after argument list 에러 해결방법

 

바닐라 JS를 사용하는데 익숙하지 않아서 많이 애먹는 중이다 ㅎㅎ...

프레임워크쓰다가 순정을 쓰려니 기본이 부족하다는 걸 많이 느낀다🥲

 

문제 코드

document.getElementById('categories').innerHTML += 
`<div style="margin: 0 6px;">
    <input type="radio" id="` + e + `" name="category" onclick="sortData(` + e + `)">
    <label for="` + e + `">` + e + `</label>
</div>`

해당 코드는 radio 버튼을 데이터에서 map형식으로 넣어주기 위한 코드이다.

여기서 문제가 되는 부분은

onclick="sortData(` + e + `)"

이 onclick 함수부분이었다.

 

에러가 난 이유는 parameter로 받는 부분이 string 타입이라 따옴표 처리를 해줘야하는데 따옴표 처리가 안되어서 발생한 에러였다.

 

그래서 아래 코드와 같이 따옴표를 추가해주었더니 해결이 되었다.

onclick="sortData('` + e + `')"

 

추가로 더 이상 사용할 구별자 따옴표가 없으면 역슬래시 ( \ ) 를 붙인 후 ( Ex. \' ) 사용하면 해당 문자를 따옴표로 인식해 해결이 가능하다! 

onclick="sortData(\'` + e + `\')"