전역 변수와 지역 변수가 같아도 오류 x

자바스크립트에서 전역 변수와 지역 변수가 같은 이름을 가질 경우, 충돌이 발생하지는 않지만 변수의 **스코프(scope)**에 따라 다른 동작을 합니다. 자바스크립트는 **스코프**에 따라 변수를 해석하기 때문에, 같은 이름의 변수가 전역 변수와 지역 변수로 동시에 존재할 수 있습니다.

다음은 이를 설명하는 예제입니다:

### 예제: 전역 변수와 지역 변수가 같은 이름을 가질 때

```javascript
// 전역 변수
let myVar = "Global Variable";

function myFunction() {
    // 지역 변수
    let myVar = "Local Variable";
    
    console.log(myVar); // Local Variable 출력
}

myFunction();

console.log(myVar); // Global Variable 출력
```

위의 예제에서, `myVar`라는 변수가 전역 스코프와 `myFunction` 함수의 지역 스코프에 각각 존재합니다. 함수 내부에서 `myVar`를 출력할 때는 지역 변수가 사용되며, 함수 외부에서는 전역 변수가 사용됩니다.

### 호이스팅과 변수 가리기

자바스크립트에서 변수는 **호이스팅(hoisting)** 되는데, 이는 변수 선언이 해당 스코프의 최상단으로 끌어올려지는 것을 의미합니다. 하지만 초기화는 선언 위치에서 이루어집니다. 또한, **변수 가리기(variable shadowing)**는 동일한 이름의 지역 변수가 전역 변수를 가리는 현상을 의미합니다.

다음은 호이스팅과 변수 가리기를 설명하는 예제입니다:

```javascript
let myVar = "Global Variable";

function myFunction() {
    console.log(myVar); // undefined 출력 (호이스팅으로 인해 선언만 된 상태)
    
    var myVar = "Local Variable";
    
    console.log(myVar); // Local Variable 출력
}

myFunction();

console.log(myVar); // Global Variable 출력

```

위의 예제에서 `myFunction` 내부에서 `console.log(myVar);`를 호출할 때 `myVar`는 `undefined`입니다. 이는 `var myVar;` 선언이 호이스팅되어 함수의 최상단으로 끌어올려졌지만, 초기화는 그 이후에 이루어졌기 때문입니다.

### let과 const의 블록 스코프

let`과 `const` 키워드는 **블록 스코프(block scope)**를 가지며, 이는 `{}` 블록 내에서만 유효합니다. 따라서 블록 내에서 선언된 변수는 블록 외부에서는 접근할 수 없습니다.

```javascript
let myVar = "Global Variable";

function myFunction() {
    if (true) {
        let myVar = "Block Scoped Variable";
        console.log(myVar); // Block Scoped Variable 출력
    }
    
    console.log(myVar); // Global Variable 출력 (블록 스코프 밖에서는 전역 변수 참조)
}

myFunction();

console.log(myVar); // Global Variable 출력
```

### 요약
- **전역 변수와 지역 변수**가 같은 이름을 가져도 충돌하지 않습니다. 함수 내부에서는 지역 변수가 우선적으로 사용됩니다.
- **호이스팅**은 변수 선언을 해당 스코프의 최상단으로 끌어올리지만, 초기화는 선언 위치에서 이루어집니다.
- **let**과 **const**는 블록 스코프를 가지므로, 블록 내에서만 유효합니다.

이러한 스코프 규칙을 이해하면 전역 변수와 지역 변수가 같은 이름을 가질 때의 동작을 예측할 수 있습니다.