본문 바로가기
인천일보아카데미/- 학습일지

[학습일지]JAVA교육일지 16일차

by w1z 2022. 5. 29.

10.4) 함수의 특징

10.4.1 스코프 : 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙

  • 자바스크립트는 기본으로 스코프에따라 참조하려는 식별자를 찾음
  • 함수 스코프 / 블록 스코프 , 전역 스코프 / 지역스코프 의 참조 범위가 달라짐

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

  • 함수 내부 - 지역 스코프 영역 / 함수 외부 - 전역 스코프 영역

예제 1)

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

- 함수 내부와 외부에서 아무런 문제없이 정상적으로 변수a를 참조했음

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

예제 2)

function sum( ){ let a = 10 ; // 지역 스코프 console.log(`함수 내부: ${a}`) ; } sum( ); console.log(`함수 외부: ${a}`) ; 실행결과) 함수 내부: 10 ReferenceError: a is not defined

- 함수 내부에 선언한 변수a는 지역스코프

- 함수 내부가 아닌 외부에서 변수a를 참조하려고 하면 오류 발생

* 블록 스코프 : { }로 구성된 블록문 기준으로 스코프의 유효 범위를 나누는 방식

  • let, const 키워드로 선언한 변수에 한해서만 적용됨

예제 1)

- 블록 스코프 외부에 let 키워드로 변수a 선언, 블록 스코프 내부에 let 키워드로 b 선언

- 블록 스코프 내부, 외부에서 각각 참조

let a = 10 ; { let b = 20 ; console.log(`코드 블록 내부 a: ${a}`) ; console.log(`코드 블록 내부 b: ${b}`) ; } console.log(`코드 블록 외부 a: ${a}`) ; console.log(`코드 블록 외부 b: ${b}`) ; 실행결과) 코드 블록 내부 a: 10 코드 블록 내부 b: 20 코드 블록 외부 a: 10 ReferenceError: b is not defined

- 변수a는 전역 스코프여서 블록문 내부, 외부 전부 참조 가능

- 변수b는 블록문 내부에 선언한 지역스코프, 내부에서는 참조 가능, 외부에서는 참조 오류 발생

- 블록 스코프는 오직 let, const 키워드에서만 발생

- var 키워드는 함수 스코프 방식으로만 스코프를 나눔

* 참조 우선순위

  • let, const 키워드는 같은 식별자의 중복 선언 불가능
  • 정확하게는 같은 스코프 영역에서 중복선언이 불가능
  • 전역 스코프와 지역 스코프에 같은 식별자를 가지는 참조 대상이 있다면, 먼저 같은 지역 스코프의 식별자 참고
  • 은 지역 스코프에서 참조할 식별자를 찾지 못할 때만 전역 스코프에서 찾음

10.4.2 함수 호이스팅

  • 호이스팅 : 코드를 선언과 할당으로 분리해 선업누를 자신의 스코프 최상위로 끌어올리는 것
console.log(num); var num = 10; ↓ 호이스팅 var num; // 선언부를 스코프 최상위로 끌어올림 console.log(num); // undefined 출력 num = 10;

- 선언부를 최상위로 끌어올리기 때문에 결과로 undefined 출력

- var 키워드로 선언한 변수에만 적용 , let과 const 키워드로 선언한 변수는 적용X

  • 함수도 호이스팅 됨
printHello(); function printHello(){ console.log("Hello"); } ↓ 호이스팅 function printHello(){ // 함수 선언문을 최상위로 끌어올림 console.log("Hello"); } printHello(); 실행결과) Hello

- 함수 선언문으로 정의된 함수는 호이스팅에서 선언부로 봄

- 함수 표현식으로 정의된 함수는 조금 다르게 작동

- 함수 표현식에서 선언부는 변수를 선언한 부분

printHello(); var printHello = function printHello(){ console.log("Hello"); } ↓ 호이스팅 var printHello; printHello(); printHello = function printHello(){ console.log("Hello"); } 실행결과) 오류메시지가 나옴 TypeError : printHello is not a function

- 화살표 함수 방식으로 정의해도 함수 표현식처럼 변수에 할당하는 것이므로 함수 표현식과 같은 원리로 호이스팅됨

- 함수 표현식이나 화살표 함수를 let, const 키워드로 선언하면 호이스팅 자체가 되지 않음

10.5) 즉시 실행 함수

즉시 실행 함수(IIFE) : 함수를 정의하면서 동시에 실행까지 하는 함수

(function ( ) { })( );
  • 함수를 선언하면 일반적으로 전역 스코프에 정의됨
  • 프로그램 종료되기까지 전역 스코프에 선언한 함수는 메모리에서 사라지지않음

- 함수 표현식으로 정의된 init( ) 함수

- const 키워드에 할당해서 프로그램 종료되기 전에는 init 식별자를 재사용 할 수 없음

- 어차피 한 번만 사용할 함수인데 const 키워드 때문에 init 식별자를 더 이상 사용할 수 없게됨 = 전역스코프가 오염됐다

- 즉시 실행 함수로 함수를 정의하면 전역 스코프가 오염되는 것을 방지할 수 있음

const init = function(){ console.log("initialized!"); } ↓ 즉시 실행 함수 (function init(){ console.log("initialized!"); })();

- 즉시 실행 함수는 한 번 실행되고 나면 메모리에 데이터가 남아있지 않음

- 그래서 init 식별자는 한 번도 사용되지 않은 것처럼 인식됨

- 즉시 실행 함수를 호출한 다음에 재호출하면 참조 오류가 발생

- 매개변수가 있는 함수도 즉시 실행 함수로 정의하여 실행 가능