[JS error] Uncaught SyntaxError : Identifier '변수명' has already been declared (에러 해결하면서 살펴보는 const, var, let의 차이)

원인: feed_id를 다른데서 const 불변형 변수로 선언했기 때문!!

 

변수명을 바꿔주면 해결된다!!

 

https://itprogramming119.tistory.com/entry/Javascript-Parsing-error-Identifier-%EB%B3%80%EC%88%98%EB%AA%85-has-already-been-declared-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

Parsing error: Identifier '변수명' has already been declared. 해결 방법

 

---

 

이렇게 된거... const와 var 그리고 let의 차이를 한 번 훑고 가자!!

 

1. var : 중복 선언 가능

• 동일한 이름으로 여러 번 중복해서 선언이 가능하다.
• 마지막에 할당된 값이 변수에 저장이 된다.
• 장점: 필요할 때마다 변수를 유연하게 사용할 수 있다.
• 단점: 기존에 선언해둔 변수의 존재를 잊고 값을 재할당하는 등의 실수가 발생할 가능성이 크다.
• 코드량이 많아졌을 때, 같은 이름의 변수명이 여러 번 선언되었다면 어디서 문제가 발생했는지 파악하기 힘들고 값이 바뀔 우려도 있다..!!

var name = 'bar';
console.log(name); // bar

var name = 'foo';
console.log(name); // foo

- SCOPE (유효한 참조 범위)

• 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에는 참조할 수 없다.
• 함수 내부에서 선언한 변수는 지역 변수, 나머지는 전역 변수 간주한다.
• 자바스크립트애서는 if문, for문, while문, try/catch 문 등의 코드 블럭{ ... } 내부에서 var로 선언된 변수를 전역 변수로 간주한다. 그래서 블럭 외부에서도 어디에서나 참조할 수 있다.

- Hoisting (호이스팅) : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

• var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다.
• JavaScript는 초기화를 제외한 선언만 호이스팅한다.
• 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면, 사용하는 시점의 변수는 기본 초기화 상태(var 선언 시 undefined, 그 외에는 초기화하지 않음)
• 변수 생성 과정은 선언 단계(Declaration phase) => 초기화 단계(Initialization phase) => 할당 단계(Assignment phase) 이렇게 총 세 단계를 거쳐 생성되는데, var로 선언된 변수는 선언 단계에서 undefined를 할당하는 과정(초기화 과정)이 한 번에 진행되어서 변수 선언 전 호이스팅이 가능하다.

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화


// 선언 없이 초기화만 존재하는 경우, ReferenceError 예외가 발생
console.log(num); // ReferenceError
num = 6; // 초기화

 

2. let : 중복 선언 불가능, 재할당 가능

• 중복 선언은 안 되지만, 변수 선언 및 초기화 이후 반복해서 다른 값을 재할당할 수 있다. 
• let은 변수를 선언할 시 할당을 반드시 하지 않아도 된다.

let name;
console.log(name)'; // undefined

let name = 'bar';
console.log(name); // bar

let name = 'foo'
console.log(name); 
// Uncaught SyntaxError: Identifier 'name' has already been declared
// 중복 선언 안 됨

name = 'baz';
consol.log(name); // baz
// 재할당은 가능

- SCOPE (유효한 참조 범위)

• 함수, if문, for문, while문, try-except문 등 코드 블록 내부에서 선언된 변수는 코드 블록 ({...}) 내에서만 유효하며 외부에서는 참조할 수 없음. 
• 코드 블록 내부에서 선언한 변수는 지역 변수로 취급된다.

- Hoisting (호이스팅) : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

• let으로 선언한 변수도 호이스팅 대상이지만, var과 달리 호이스팅 시 undefined로 변수를 초기화하지 않는다.
• 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 참조 오류(에러)가 발생합니다.
• 변수 생성 과정은 선언 단계(Declaration phase) => 초기화 단계(Initialization phase) => 할당 단계(Assignment phase) 이렇게 총 세 단계를 거쳐 생성되는데, let은 선언 단계에서 초기화 과정(메모리 공간 확보)이 이루어지지 않기 때문에 선언 이전에 변수를 참조할 수 없다.

console.log(num) // Error: Uncaught ReferenceError: num is not defined
let num = 6

 

3. const : 중복 선언 불가능, 재할당 불가능

• 한번 선언을 하면 값을 바꿀 수 없다.
• 변수에 값을 한 번 할당하게 되면 바꿀 수 없기 때문에 변수를 선언할 시 할당이 반드시 이루어져야 한다.
• 하지만, 배열과 오브젝트의 값을 변경하는 것은 가능하다.

const name;
console.log(name); //SyntaxError: Missing initializer in const declaration

const name = 'bar';
console.log(name); // bar

const name = 'foo';
console.log(name); 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'baz';
console.log(name);
// Uncaught TypeError: Assignment to constant variable

// 중복 선언도 안되고 재할당도 안 된다. 하지만, 배열과 오브젝트 값을 바꾸는 건 가능하다.
function func() {
	const list = ["A", "B", "C"]
    
    list.push("D");
    console.log(list);
    //  ["A", "B", "C", "D"]
}

- SCOPE (유효한 참조 범위)

• 함수, if문, for문, while문, try-except문 등 코드 블록 내부에서 선언된 변수는 코드 블록 ({...}) 내에서만 유효하며 외부에서는 참조할 수 없음. 
• 코드 블록 내부에서 선언한 변수는 지역 변수로 취급된다.

- Hoisting (호이스팅) : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

• const로 선언한 변수도 호이스팅 대상이지만, var과 달리 호이스팅 시 undefined로 변수를 초기화하지 않는다.
• 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 참조 오류(에러)가 발생합니다.

 

결론 1: const를 기본으로 사용하여 불필요한 변수의 재사용을 방지하되, 재할당이 필요한 경우 let을 사용하는 것이 좋다..!!! var는 사용하지 않기!!!

 

결론 2: 

1.  const  -  변수의 중복 선언, 재할당 모두 불가능하며, 변수를 선언하기 전에 참조할 수 없다. 변수 선언 시 할당을 반드시 해야 한다.

2.  var  -  변수의 중복 선언, 재할당 모두 가능하며, 호이스팅이 되어 변수를 선언하기 전에 참조할 수 있다.

3.  let  -  변수의 중복 선언은 불가능하나 재할당은 가능하다. 변수를 선언하기 전에 참조할 수 없으며 변수 선언 시 할당을 반드시 할 필요는 없다.

 

 

결론 3: 

var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프이다.
let, const는 모든 블록 내부에서 선언된 변수까지 지역변수로 인정하는 블록 레벨 스코프이다.

 

 

 

참고자료:

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

javascript var, let, const 차이점

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

📚 var / let / const 차이점 정리 (변수 호이스팅)