이번에 js 코딩하면서 새로 발견한 오류와 그에 대한 해결책에 대해서 써보려 한다.
내가 만난 문제는 let을 중복 선언하게 되면서
let으로 선언한 변수가 재 선언될 수 없다는 에러 표시를 만났었다.
Identifier '변수' has already been declared check@@: 아니 당연히 중복으로 선언하면 안 되지;;
당연히 알고 있다. 하지만 상황은 이랬다.
html 안에 탭을 선택하면 서버에서 html을 불러와 내부에 넣게 되는데,
이때 삽입되는 html이 가지고 있는 js 파일 내 변수명과 외부에 이미 선언된 html 간의 let이 충돌하는 문제였다.
문제를 재연하기 위해 간단하게 만들어 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
index.html
</body>
<script>
let value = {
init : function() {
console.log("html init!");
}
}
value.init();
</script>
<script type="text/javascript" src="./index.js"></script>
</html>간단하게 html(index.html)을 만들었다.
- 본인이 실행하는 구문이 존재 value라는 변수 존재
- index.js 파일을 불러와 사용
그럼 index.js를 살펴보자.
let value = {
init : function() {
console.log("index js init");
},
}
value.init();
js 파일은 value라는 이름의 변수를 가지고 있고, 해당 변수를 통해 함수를 실행시키고 있다.
이때 무슨 일이 일어나는지 개발자 도구를 살펴보면
index.html의 스크립트를 실행시킨 뒤, index.js파일을 실행시키려 보니!
동일한 변수를 선언했기에
Identifier '변수' has already been declared check
라는 오류를 뱉는다.
이럴 땐 어떻게 해야 할까? (js는 학교 다닐 때 안 해봐서 매번 이렇게 기초적인 걸로…)
전부 var로 바꾸면 해결될까?
구글링 검색해서 발견한 포스트
Identifier has already been declared Error in JavaScript | bobbyhadz
Identifier has already been declared Error in JavaScript | bobbyhadz
A step-by-step guide on how to solve the "SyntaxError: Identifier has already been declared" error.
bobbyhadz.com
위 포스트 내용 중 발견한
Using an immediately invoked function expression!!
const num = 50;
(function () {
const num = 100;
console.log(num); // 👉️ 100
})();
console.log(num); // 👉️ 50
보자마자 어? 이거? 하게 됐는데, 왜냐면 cdn으로 가져오는 js 파일들은 대부분 저런 식으로 감싸져 있었기 때문이다. 코드를 살펴볼 때마다 왜 저렇게 감싸놨을까? (별로 궁금하진 않지만) 하고 넘어갔었는데 이런 문제를 방지하기 위함임을 이번 에러를 통해 알게 되었기 때문이다.
그럼 코드를 바꿔보자.
index.js의 코드를
(function() {
let value = {
init : function() {
console.log("index js init");
},
}
value.init();
})();
index.html을 새로고침 해보자.
정상적으로 작동하는 걸 확인할 수 있다.
'text > JavaScript' 카테고리의 다른 글
| javascript 변수 관련 간략정리 (변수, 스코프, 호이스팅, 클로져, 함수, 즉시 실행 함수) (0) | 2023.06.14 |
|---|---|
| [18, 9].sort() = [18, 9] javascript sort weird... (0) | 2023.05.04 |
| 날짜 계산 [날짜 간 차이, 주(week) 계산, 날짜 더하기 빼기] (0) | 2023.03.24 |
| .has is not a function (0) | 2023.02.27 |
| CORS 에 대한 간략한 설명과 img 태그를 채우기 위한 삽질 (0) | 2022.06.27 |
댓글