분홍돼지 IT 블로그

웹 사이트를 구경하시다 보면 위의 사진과 같은 형태의 슬라이드를 보신 적이 있으실 겁니다.

저는 그때마다 이건 어떻게 한거려나 하면서 멍하니 이리저리 클릭해 본 경험이 있는데요.

최근 저런 슬라이드를 쉽게 구현할 수 있는 jquery 플러그인을 알게 되었습니다. 

바로 slick.js 입니다!

01. Scope란 무엇인가요?

Scope란 단어를 사전에 검색하면 영역, 범위라는 뜻을 가지고 있으며 프로그램 언어에서의 Scope는 어느 범위까지 참조하는, 즉 변수와 매개변수(parameter)의 접근성과 생존 기간을 뜻합니다.

02. Javascript Scope 특징은 무엇인가요?

- 함수단위 유효범위(function-level-scope), 함수 코드 블럭 내에서 선언된 변수는 함수 코드 블럭 내에서만 유효하고 함수 외부에서는 유효하지 않습니다.

아래 예제를 살펴보겠습니다.

scopeTest 함수 안의 b, c 변수를 호출하고 있습니다. 하지만 scopeTest 함수 안의 변수 a를 scopeTest 함수 밖에서는 호출하면 에러가 발생됩니다

** 여기서 잠깐! 만약 위의 코드가 Java 면  b, c 역시 값을 찍을 수 없는 것 알고 계시나요? 찍고 있는 위치를 확인해보세요.

 b는 if이 끝나고 난 뒤, c는 for문이 끝나고 난 후에 값을 찍고 있습니다. Java는 block-level-scope라고 하여 code block ({...}) 내에서 호출이 가능합니다 **

- 변수명 중복 허용이 가능합니다. 

아래 예제를 살펴보겠습니다.

scope란 변수를 중복하여 적었지만 에러가 나지 않으며 결과  값을 가져옵니다. 여기서 scope 값이 20인 이유는 같은 변수명이 여러 개 있는 변수를 참조할 때는 가장 가까운 범위의 변수를 참조하기 때문입니다.

- var 키워드 생략이 가능합니다. Javascript는 var 키워드를 가지고 변수를 선언하지만 var 키워드를 빼고 변수를 선언하면 전역변수로 선언을 할 수 있습니다.

아래 예제를 살펴보겠습니다.

scope란 함수 안에 scope란 변수에는 var를 생략했고 doyaji란 변수 앞에는 var를 붙여주었습니다.

그리고 scopeTest 함수를 호출했을 때 scope 변수 값은 찍었으나 doyaji란 변수 값은 찍지 못하고 에러가 발생한 것을 확인할 수 있습니다.

- 렉시컬 스코핑 (lexical, scoping),  즉 함수 실행시 유효범위를 함수 실행환경이 아닌 함수 정의 환경으로 참조하는 특성입니다. 

아래 예제를 살펴보겠습니다.

사진 모두 test란 함수 안에서 scope를 호출하고, doyaji란 변수의 값을 console.log로 찍고 있습니다.
다만 왼쪽 사진에서는 'doyaji is not defined' 란 에러가 나오고 있는데요. 이것은 함수 scope가 test 안에 들어온 것 마냥 test 내부 변수 doyaji를 참조할 수 없어 발생됐습니다. 

그렇기에 내가 doyaji란 변수를 사용하고 싶다면 오른쪽 사진처럼 변수를 재 정의하거나 파라미터로 넘겨주어야 합니다.