티스토리 뷰

Javascript

#6 함수와 블록스코프

심재철 2019. 7. 29. 10:41

https://www.notion.so/simsimjae/6-f3089808ef3f40e1bb0ba2bd20cae432

자바스크립트에는 전역스코프, 지역스코프 두가지가 존재한다.

전역 스코프에 변수를 정의하게 되면 window객체의 프로퍼티가된다.

모든 함수 및 객체에서 전역스코프에 접근할 수 있으므로 전역변수의 사용은 자제하는것이 좋다.

만약, 전역변수에 정의되어 있는 변수를 함수에서 재정의하게 되면 오류가 발생하게 된다.

let a = 'something'; //...2만줄의 코드 이후..// let a = 'something'; //에러 발생

  • let이나 const 키워드로 변수를 선언하게 되면 변수 재정의시 에러가 발생하고
  • var키워드로 변수를 재정의하면 그냥 값을 오버라이드 하게 된다.

전역 변수 사용을 자제하고 지역변수 사용을 권장한다.

지역 스코프


지역 변수에는 두가지 종류가 있다.

  1. 함수 스코프 지역 변수
  2. 블록 스코프 지역 변수

함수 스코프란, 말그대로 변수가 함수 단위로 취급된다는걸 의미한다.

블록 스코프란, 말그대로 변수가 블록 단위로 취급된다는걸 의미한다.

블록 스코프는 함수 스코프에 부분집합이다. 왜냐면 함수는 블록으로 감싸야하기 떄문이다.


함수 호이스팅

  • 호이스팅 : 끌어올리다

  • 함수를 함수 선언식으로 만들게 되면 그 함수는 스코프의 최상단으로 끌어올려진다.

    sayHello(); function sayHello () { console.log('Hello CSS-Tricks Reader!'); }

함수를 선언하기도 전에 호출하고 있는데 문제없이 잘 실행되고 있다.

  • 함수 선언식형태로 함수가 만들어졌기 때문에 함수 호이스팅이 일어나서 다음과 같은 코드가 되었기 때문이다.

    function sayHello() { console.log('Hello CSS-Tricks Reader!'); } sayHello();

  • 즉, 함수가 스코프의 최상단으로 끌어올려졌다.

함수 표현식으로 함수를 만들면 함수 호이스팅이 일어나지 않는다. 함수 선언식보다는 함수 표현식을 사용할것을 권장한다. 그래야, 함수를 사용하기전에 선언한다는 원칙을 지킬 수 있게 된다. 이러한 습관은 코드가 항상 예상할수있는 코드가 되고 유지보수 및 협업 디버깅시에도 유용하게 될것이다.


내부함수는 외부함수에 접근할 수 있다. (그 반대는 불가능하다)

 

외부함수의 스코프 안에 내부함수의 스코프가 포함되어 있다.

함수 여러개를 중첩해서 사용한다면 다음과 같이 스코프가 구성된다.

 

아래에서 위로는 접근이 가능하지만, 위에서 아래로는 접근이 불가능하다.

클로저

클로저를 한마디로 정의하면,

이미 종료된 외부함수의 지역변수(자유변수)들을 사용하는 내부함수라고 할 수 있다.

자유 변수에 묶였다, 닫혀있다의 의미로 내부함수 자체를 클로져라고 부르는 것이다.

클로저는 두가지 상황에서 사용된다.

  1. 함수 자신의 내부에서 외부를 제어(사이드이펙트)하는 일을 막기 위해서
  2. private변수를 만들기 위해서

'Javascript' 카테고리의 다른 글

#7 문장 vs 표현식  (3) 2019.07.29
#7 문장 vs 표현식 - 유튜브 expression vs statement번역  (1) 2019.07.29
#5 ==와 ===의 차이  (1) 2019.07.29
#4 암묵적 타입 변환  (0) 2019.07.29
#3 값 vs 참조  (1) 2019.07.29
댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함