웹 개발/데일리 토픽

렉시컬 스코프 (Lexical Scope)

ecofinder 2024. 1. 17. 10:12
반응형

렉시컬 스코프 (Lexical Scope)

안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "렉시컬 스코프 (Lexical Scope)"에 대해 알아보려고 해요! 🚀

렉시컬 스코프는 변수가 함수가 작성된 위치에 따라 결정되는 스코프의 종류입니다. JavaScript는 렉시컬 스코프를 따르므로 함수들은 그들이 작성된 코드의 위치에 따라 변수에 접근할 수 있습니다. 렉시컬 스코프를 이해하면 변수의 유효 범위와 값을 더 잘 이해할 수 있어요. 😊

렉시컬 스코프의 작동 원리

렉시컬 스코프의 작동 원리를 간단히 설명해볼게요:

  1. 스코프 체인: JavaScript에서 함수는 자신이 정의된 스코프와 외부 스코프에 접근할 수 있습니다. 수직적인 스코프 체인을 따라 스코프의 계층 구조를 형성합니다.
  2. 정의된 위치: 함수가 작성된 위치에 따라 스코프가 결정됩니다. 함수는 자신을 감싸고 있는 스코프에 접근할 수 있지만, 함수가 호출된 위치는 스코프에 영향을 주지 않습니다.

렉시컬 스코프의 예시

다음은 렉시컬 스코프를 보여주는 예시입니다:

// 렉시컬 스코프 예시
let name = 'Alice';

function greet() {
  console.log(`안녕하세요, ${name}님!`);
}

function sayHello() {
  let name = 'Bob';
  greet();
}

sayHello(); // "안녕하세요, Alice님!" 출력

위 예시에서 `sayHello` 함수가 호출될 때 `greet` 함수도 호출됩니다. `greet` 함수에서 `name` 변수에 접근할 때, 렉시컬 스코프를 따라 `name` 변수 값을 찾게 됩니다. 따라서 `greet` 함수는 자신을 감싸고 있는 스코프인 전역 스코프의 `name` 변수에 접근하여 값을 가져옵니다. 이렇게 렉시컬 스코프는 함수가 코드를 작성한 곳에 따라 변수에 접근하는 원리입니다. 👩‍💻

렉시컬 스코프의 장점

렉시컬 스코프는 다음과 같은 장점을 가지고 있어요:

  • 명확한 변수 추적: 렉시컬 스코프는 코드를 더 명확하게 만들어 변수의 값을 추적하고 이해하는 데 도움을 줍니다.
  • 자유로운 변수 활용: 함수 내부에서 외부 스코프의 변수에 접근할 수 있다는 장점을 활용하여 변수를 재사용하거나 공유할 수 있습니다.

결론

렉시컬 스코프는 JavaScript에서 매우 중요한 개념입니다. 함수가 코드의 작성 위치에 따라 변수에 접근하므로 변수의 유효 범위를 더 잘 이해하게 됩니다. 렉시컬 스코프는 코드를 더 명확하고 유지보수하기 쉽게 만들어주며, 자유롭게 변수를 활용할 수 있도록 도와줍니다. 렉시컬 스코프를 이해하여 더욱 효율적인 코드를 작성해봐요! 💪😄

 

 

Apple 2023 맥북 프로 14 M3

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

반응형

'웹 개발 > 데일리 토픽' 카테고리의 다른 글

TDZ (Temporal Dead Zone)  (0) 2024.01.17
호이스팅 (Hoisting)  (0) 2024.01.17
클로저 (Closure)  (0) 2024.01.16
크로스 브라우징 (Cross Browsing)  (1) 2024.01.16
SSG (Static-Site-Generation)  (0) 2024.01.16