[HTML+CSS+자바스크립트] 10장 자바스크립트 함수 다루기 (~417p)

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 열네 번째 날로, 자바스크립트 공부 다섯 번째 날입니다!

어려운 용어들이 나오는데 같이 공부 시작해 볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용(406~417p)

4. 함수의 특징 이해하기

5. 즉시 실행 함수 사용하기

 

4. 함수의 특징 이해하기

---

4.1 스코프

함수 내부의 변수를 함수 외부에서 참조할 수 없는 이유가 무엇일까요?

이를 이해하려면 스코프에 대해서 알아봐야 합니다!

 

스코프는 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙이에요.

자바스크립트의 스코프는 함수 스코프 방식, 블록 스코프 방식에 따라서

전역 스코프, 지역 스코프 참조 범위가 달라집니다.

 

먼저 함수 스코프와 블록 스코프에 대해서 알아볼까요?

 

✅ 함수 스코프란

함수에서 정의한 블록문만 스코프의 유효범위로 인정하는 방식입니다.

결국 함수 내부는 지역 스코프, 함수 외부는 전역 스코프 영역이 되겠죠. 예제를 한 번 보겠습니다.

let a = 10; // 전역 스코프
function sum() {
  console.log(`함수 내부: ${a}`);
}
sum();
console.log(`함수 외부: ${a}`);

 

이 코드 결과는 다음과 같습니다.

이는 함수 외부는 전역 스코프이고, 전역 스코프는 스코프와 상관없이 모두 참조할 수 있기 때문에

정상적으로 변수 a를 참조해출력하는 것을 볼 수 있어요!

 

그러나, 반대로 함수 a를 함수 내에 선언해 볼까요?

function sum() {
  let a = 10; // 지역 스코프
  console.log(`함수 내부: ${a}`);
}
sum();
console.log(`함수 외부: ${a}`);

 

이 코드 결과는 다음과 같습니다.

이는 함수 내부에 a 변수를 선언했기 때문에 변수 a는 지역 스코프입니다.

따라서 함수 내부가 아닌 외부에 변수 a를 참조하려고 하니 에러가 발생하는 것을 볼 수 있죠!

 

이렇게 함수 스코프에 대해서 알아봤고, 다음으로 블록 스코프에 대해서 알아봅시다.

 

✅ 블록 스코프란

{ }로 구성된 블록문 기준으로 스코프의 유효 범위를 나누는 방식입니다. 원래 자바스크립트는 함수 스코프를 따르는 언어였지만, ES6에서 let , const 키워드가 추가되면서 블록스코프도 지원하게 됐어요! 그래서 이 방식은 let과 const 키워드로 선언한 변수에 한해서만 적용이 됩니다.

 

같이 한 번 예제를 살펴봅시다.

let a = 10;
{
  let b = 20;
  console.log(`코드 블록 내부 a: ${a}`);
  console.log(`코드 블록 내부 b: ${b}`);
}
console.log(`코드 블록 외부 a: ${a}`);
console.log(`코드 블록 외부 b: ${b}`);

 

이 코드는 다음과 같은 결과가 나오게 됩니다.

변수 a는 전역 스코프여서 블록문 내부나 외부에서 정상적으로 전부 참조할 수 있지만,

변수 b는 지역 스코프여서 블록문 내부에서만 정상적으로 참조할 수 있는 것을 볼 수 있어요.

 

❗그러나, var의 경우를 볼까요?

var a = 10;
{
  var b = 20;
  console.log(`코드 블록 내부 a: ${a}`);
  console.log(`코드 블록 내부 b: ${b}`);
}
console.log(`코드 블록 외부 a: ${a}`);
console.log(`코드 블록 외부 b: ${b}`);

아까 let, const에서만 블록스코프를 지원한다고 했었죠?

그래서 같은 코드를 var 키워드로만 바꿔 실행하면 참조 오류가 발생하지 않아요. var 키워드는 함수 스코프 방식으로만 스코프를 나누기 때문에 변수 a, b 모두 전역 스코프에서 선언한 것과 마찬가지가 돼요.

 

+ 참조 우선순위

let, const 키워드는 같은 식별자의 중복 선언이 불가능해요.

하지만, 정확하겐 같은 스코프 영역에서 중복 선언이 불가능하다고 할 수 있어요!

 

다음과 같이 다른 스코프 영역에서 같은 변수를 선언해 볼까요?

let a = 10;
const b = 20;
function sum() {
  let a = 50;
  const b = 70;
  console.log(`함수 내부 a: ${a}`);
  console.log(`함수 내부 b: ${b}`);
}
sum();

 

그런데도, 오류가 나지 않는 것을 볼 수 있어요!

전역 스코프와 지역 스코프에 같은 식별자를 가지는 참조 대상이 있다면, 먼저 같은 지역 스코프의 식별자를 참조하게 됩니다. 그리고 같은 지역 스코프에서 참조할 식별자를 찾지 못하면 전역 스코프를 다음으로 찾게 되죠! 

 

 

4.2 함수 호이스팅

여러분, 혹시 호이스팅이라는 말 들어보셨나요?

앞부분에서 잠깐 언급했던 적이 있어요! 다시 한번 개념을 정리해 보자면,

 

호이스팅이란 코드를 선언과 할당으로 분리해 선언부를 자신의 스코프 최상위로 끌어올리는 것을 말합니다!

 

다음 코드를 보면 어떤 결과가 나올 것 같나요?

console.log(num);
var num = 10;

결과를 보면 오류가 나올 것 같지만,

호이스팅에 의해서 선언부가 최상위로 끌어올려져 undefined가 출력되게 돼요!

var num;
console.log(num);
num = 10;

 

❗ 그러나 이런 호이스팅은 var 키워드로 선언한 변수에만 적용되고

let, const 키워드로 선언한 변수에는 적용되지 않아요! 그러나 함수는 호이스팅 됩니다.

 

앞서 함수에 대해 배웠을 때 함수 선언문과 함수 표현문이 있었죠?

두 가지의 경우에 따라 호이스팅이 다르게 적용되는데 한 번 같이 살펴봅시다.

 

✅ 함수 선언식일 때의 호이스팅 

함수 선언식일 때, 한 번 살펴봅시다.

printHello();
function printHello() {
  console.log("Hello");
}

printHello() 함수가 정의되기 전에 호출하고 있어서 오류가 날 것 같지만

호이스팅은 선언부를 스코프 최상위로 올리기 때문에 오류가 나지 않아요!

 

✅ 함수 표현식일 때의 호이스팅

그러나, 함수 표현식일 때는 함수 선언식일 때와는 다르게 작동 돼요.

printHello();
var printHello = function printHello() {
  console.log("Hello");
};

여기서는 에러가 뜨게 됩니다. 왜일까요?

 

함수 표현식에서 선언부는 변수를 선언한 부분입니다.

그래서 실제로 printHello는 함수가 아니다는 에러가 뜨게 되는 것이죠.

 

화살표 함수 방식으로 정의해도 함수 표현식처럼 변수에 할당하는 것이므로 함수 표현식과 같은 원리로 호이스팅 됩니다. 단 함수 표현식이나 화살표 함수를 let이나 const로 선언했다면 호이스팅이 되지 않겠죠?

 

 

5. 즉시 실행 함수 사용하기

---

함수를 사용하는 방법 중에 즉시 실행 함수라는 방법이 있어요.

즉시 실행하는 함수는 함수를 정의하면서 동시에 실행까지 하는 함수를 말해요!

 

일반적으로 함수를 선언하면 전역 스코프에 정의가 되는데 프로그램이 종료되기까지 전역 스코프에 선언한 함수는 메모리에서 사라지지 않아요!

 

먼저 형식은 다음과 같이 생겼습니다.

(function(){})();

 

다음으로 코드를 같이 살펴봅시다.

이 코드를 보면 함수 표현식으로 정의된 init() 함수가 있습니다.

const 키워드에 할당했기 때문에 재할당이 불가능해요!

const init = function () {
  console.log("init");
};

 

이 함수는 어차피 한 번만 사용할 함수인데, const 키워드 때문에 init 식별자를 더 이상 사용할 수 없게 되죠?

이러한 현상을 전역 스코프가 오염됐다고 표현해요.

 

이런 경우에 다음과 이 즉시 실행 함수로 함수를 정의하면 전역 스코프가 오염되는 것을 방지할 수 있어요~

(function init() {
  console.log("init");
})();

 

즉시 실행 함수는 한 번 실행되고 나면 메모리에 데이터가 남아 있지 않아 init 식별자는 한 번도 사용되지 않은 것처럼 인식돼요. 

 

매개 변수가 있는 함수도 다음과 같이 즉시 실행 함수로 정의해 실행할 수 있답니다!

(function sum(a, b) {
  console.log(a + b);
})(a, b);

 

오늘 자바스크립트 함수에 대해서 다뤄봤는데 어떠셨나요?

다음 시간부터는 객체에 대해서 다뤄볼 예정이에요!

이번 시간에 배웠던 함수에 대해서 마무리, 셀프체크 415~417p를 통해 복습하시길 바랍니다!

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글을 남겨 주세요.
확인하고 답변해 드리겠습니다. 
그럼 내일 다시 만나요!

✅ 정리

1. 스코프

2. 호이스팅

3. 즉시 실행 함수