[JavaScript] 변수 섀도잉

이번 글에서는 자바 스크립트의 변수 섀도잉에 대해 깊게 파헤쳐보겠습니다 :)

 

🎨 예시 코드로 시작하기

let userName = "max";

function greetUser(name) {
    // 함수 내부에서의 userName이 매개변수 name으로 섀도잉
    let userName = name;
    alert(userName);
}

// 전역 범위에서의 userName을 "Manu"로 변경
userName = "Manu";

// 함수 호출, 알림창에는 "Max"가 표시
greetUser("Max");

// 전역 범위의 userName을 출력, 콘솔에는 "Manu"가 출력
console.log(userName);

알림창에 "Max" 표시 후, 콘솔창에 "Manu" 출력

함수 내부에서 선언된 변수(userName)는 외부 변수(userName)와 이름이 같더라도

서로 독립적으로 존재하며 값을 가집니다.

 

이를 통해 코드의 가독성을 높이고 예상치 못한 버그를 방지할 수 있습니다.

 

🚦 주의사항

그러나 과도한 섀도잉은 이해하기 어려운 코드를 만들어낼 수 있으니,

섀도잉이 발생하는 스코프를 명확히 이해하고 그 범위를 신중이 다뤄야 합니다.

 

✨ 결론

변수 섀도잉은 코드의 유지보수성과 가독성을 높일 수 있지만, 주의가 필요합니다.

적절하게 사용하면 코드의 모듈성을 높일 수 있지만, 지나치게 사용하면 예상치 못한 결과를 초래할 수 있습니다.

발생하는 상황을 이해하고, 코드를 더 예측 가능하고 유지보수 가능하게 작성하는 데 주의를 기울여서

코드를 작성해봐야겠습니다 🚀