[자바스크립트 시리즈] javascript 함수 스코프 이해하기

자바스크립트

본론에 앞서

안녕하세요! 이글에서 자바스크립트 시리즈 - javascript 스코프의 개념과 예제 알아보겠습니다.

 

자바스크립트(javascript)는 동적 인터프리터 프로그래밍 언어이기 때문에 다른 전통적인 객체지향 프로그래밍 언어와 구문이 다릅니다.

이러한 개념들은 자바스크립트의 근간을 이루고 있으며 여러분들이 자바스크립트로 알고리즘 or 코드를 설계하는 과정을 이해하는 데 많은 도움이 됩니다.

 

필자도 개발을 하는데 있어 자바스크립트 언어를 주로 사용하며 다양한 서비스를 만들고 있습니다.

 

이번 글에서 자바스크립트 스코프 개념에 대해서 알아보고 예제를 통해서 스코프의 개념을 알아보겠습니다.

 

자바스크립트 스코프의 개념?

스코프(scope)는 범위를 의미하며 자바스크립트 변수에 대한 접근 권한을 정의하는 것입니다.

즉, 스코프는 변수가 접근 가능합 범위를 나타내며 변수의 유효 범위는 변수 선언 위치에 따라 결정됩니다.

 

자바스크립트에서는 2가지 전역 스코프와 지역 스코프로 범위로 나눠집니다.

 

쉽게 정리해서

스코프는 변수, 함수, 객체 등이 접근할 수 있는 유효 범위를 의미합니다.

자바스크립트에서는 변수의 선언 위치에 따라 해당 변수가 어디서 유효한지가 결정됩니다.

 

 

스코프

 

스코프의 중요성!

스코프(scope)를 이해하면 변수 충돌을 방지하고 코드의 가독성과 유지 보수성을 높일 수 있습니다.

또한, 스코프를 올바르게 사용하면 버그를 줄이고 효율적인 코드를 작성할 수 있습니다.

 

1. 전역 스코프(전역 범위)란?

전역 변수의 정의

전역 변수는 함수나 블록 안에 선언되지 않고 코드의 최상위 레벨에서 선언된 변수를 말합니다.

전역 변수로 선언된 변수들은 전역에서 접근할 수 있습니다.

 

전역 변수의 예제

전역 변수의 안좋은 사용 방법

test = "sss";

console.log(test)

위와 같은 선언 방식은 자바스크립트에서 가장 안 좋은 사용법입니다.

위와 같은 선언 방식은 피하며 var, 을 사용해서 변수를 선언하는 습관을 들여야 합니다.

 

전역 변수의 좋은 사용 방법

var test = "sss";

console.log(test)

 

전역 변수

let globalVar = "This is a global variable";
function showGlobalVar() {
 console.log(globalVar); // "This is a global variable"
}
showGlobalVar();

 

위에 예제처럼 var 전역 변수 선언으로 전역에 변수를 접근할 수 있습니다.

 

2. 지역 스코프(Local Scope)란?

지역 변수의 정의

지역 변수는 특정함수나 블록 안에서 선언된 변수의 유효 범위를 나타닙니다.

지역 변수로 선언된 함수나 블록 내부에서만 접근할 있으며 외부에서는 접근할 수 없습니다.

 

지역 변수는 2가지로 나눠집니다.

1. 함수 스코프(Function Scope)
2. 함수 내에서 선언된 변수는 해당 함수 내에서만 유효합니다.
3. 블록 스코프(Block Scope)
4. let과 const 키워드를 사용하여 선언된 변수는 해당 블록 내에서만 유효합니다.

 

3. 함수 스코프(Function Scope)란?

함수 스코프의 정의

함수 스코프는 함수 내부에 선언된 변수는 함수 안에서만 접근이 가능합니다.

var 키워드를 사용하여 변수를 선언할 때 주로 사용됩니다.

 

함수 안에서만 변수 접근 예제

function myFunction() {
 var localVar = "This is a local variable";
 console.log(localVar); // "This is a local variable"
}

myFunction();
console.log(localVar); // Uncaught ReferenceError: localVar is not defined

 

위에 예제처럼 localVar 변수는 함수 안에서만 접근할 수 있습니다.

 

4. 블록 스코프(Block Scope)란?

블록 스코프의 정의

블록 스코프는 {}로 감싸진 코드 블록 안에서만 유효한 스코프입니다.

let과 const 키워드를 사용하여 변수를 선언할 때 사용됩니다.

 

함수 안에서만 변수 접근 예제

if (true) {
 let blockVar = "This is a block-scoped variable";
 console.log(blockVar); // "This is a block-scoped variable"
}

console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined

 

위에 예제처럼 blockVar는 if  {} 블록 안에서만 유효합니다.

 

5. 중첩 스코프(Nested Scope)란?

중첩 스코프의 정의

로직을 만들다 보면 함수나 블록 안에 또 다른 함수나 블록이 중첩되어 있을 경우 내부 스코프는 외부 스코프에 접근할 수 있습니다.

하지만 외부 스코프는 내부 스포크에 접근할 수 없습니다.

 

중첩 스코프 예제

function outerFunction() {
 var outerVar = "This is an outer variable";

 function innerFunction() {
 var innerVar = "This is an inner variable";
 console.log(outerVar); // "This is an outer variable"
 console.log(innerVar); // "This is an inner variable"
}

 innerFunction();
 console.log(innerVar); // Uncaught ReferenceError: innerVar is  not defined
}

outerFunction();

 

위에 예제처럼 innerFunction 함수는 외부 outerVar 변수에 접근할 수 있지만 outerFunction 함수는 innerFunction 안에 선언된 innerVar 변수에 접근할 수 없습니다.

 

6. 호이스팅(Hoisting)란?

호이스팅의 정의

호이스팅은 자바스크립트가 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올리는 동작을 의미합니다.

호이스팅에 중요한 점은 변수 선언은 호이스팅 되지만, 변수 할당은 호이스팅 되지 않습니다.

 

호이스팅 예제

function hoistingExample() {
 console.log(hoistedVar); // undefined
 var hoistedVar = "This variable is hoisted";
 console.log(hoistedVar); // "This variable is hoisted"
}

hoistingExample();

 

위에 예제처럼 hoistedVar 선언은 함수 스코프의 최상단으로 호이스팅 되지만 할당은 최상단으로 호이스팅 되지 않기 때문에 첫 번째 로직 console.log(hoistedVar)에서는 undefined가 출력됩니다.

 

7. 클로저(Closures)란?

클로저의 정의

클로저는 함수와 그 함수가 선언될 때 렉시컬 환경을 함께 저장하는 구조입니다.

이러한 구조 때문에 함수가 외부 함수의 변수에 접근할 수 있습니다.

 

클로저 예제

function outerFunction() {
  var outerVar = "Outer variable";

  return function innerFunction() {
  console.log(outerVar); // "Outer variable"
 }
}

var closureFunc = outerFunction();
closureFunc();

 

위에 예제처럼 innerFunction 은 outerVar 변수를 기억하는 클로저를 형성합니다.

outerFunction 함수가 종료되더라도 innerFunction 함수는 outerVar 변수를 기억해서 접근할 수 있습니다.

 

자바스크립트 스코프의 개념 정리?

자바스크립트 프로그래밍 언어는 대부분의 다른 프로그래밍 언어들이 사용하지 않는 다른 방식의 변수 선언 방식이 존재합니다.

윗글에 예제처럼 전역 범위로 변수를 선언하는 방식은 코드 안정성과 유지보수를 위해서 피해야 합니다.

 

자바스크립트 프로그래밍 언어에서 스코프(scope) 접근 범위는 중요한 개념입니다.

 

이 글에서 전역 스코프, 지역 스코프, 함수 스코프, 호이스팅, 클로저의 개념과 예제에 대해서 알아봤습니다.

 

 

---

 

 

필자의 잘못된 부분이나 피드백은 언제든지 댓글로 남겨주세요!

감사합니다^^

 

 

 

https://itibiza.tistory.com/entry/%EB%8F%88-%EC%95%84%EB%81%BC%EB%8A%94-%EB%85%B8%ED%8A%B8%EB%B6%81-%EC%84%B1%EB%8A%A5-%ED%96%A5%EC%83%81-%EA%BF%80%ED%8C%81

돈 아끼는 노트북 성능 향상 꿀팁