안녕하세요 :)
프론트엔드 개발자로 근무한다면 다들 react vue angular spa로 애플리케이션이 구현이 되죠 !
근데 react vue angular 는 항상 기초가 되는건 자바스크립트 이에요 !
자바스크립트의 기초가 튼튼하다면 어떤 언어 공부하는데 살을 붙이면서 공부하면 큰 효율이 생길거같았습니다 ㅎ
오늘 제가 설명 드릴 주제는 '스코프' 입니다!
스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이고 중요한 개념이에요
'스코프' scope
한국어로는 범위 라는 의미인데요
function add(x,y){
console.log(x,y); (1)
return x + y
}
add(2,5)
console.log(x,y) (2)
상단에 (1)번, (2) 번 결과가 어떻게 나올지 예상이 되시나요?
(1)번은 2,5
(2)번은 ReferenceError:x is not defined 라고 오류나 나올거에요!
add 라는 함수의 매개변수 x, y 는 함수 몸체 내부에서만 참조할수있으므로
즉, 매개변수의 스코프(유효범위)는 함수 내부에요!
그러므로 매개변수는 함수 내부에서만 참조할수있어 함수 외부에서 접근하려고 하면 에러가 나옵니다!
-> x is not defined : x 라는 변수는 선언되지 않았다.. 이거죠 !
그냥 말그대로
소스 안에가 사회 라고 생각하면 함수 add가 동물원이라고 생각해봐요 !
동물원에서는 기린을 부르면 기린이 나오는데
동물원이 아닌 식물원이나 그냥 도심 속에서 기린을 찾으면 볼수 있을까요? 없겠죠!
이게 기린이 사는 울타리 = 스코프 가 있다고 생각하시면 편할거에요 ㅎㅎ
다음은 '스코프체인' 입니다!
먼저 관련된 소스 보겠습니다!
var x = 'global x'; ----> 전역변수
var y = 'global y'; ----> 전역변수
function outer(){
var z = 'outer's local z'; ---> 지역변수
console.log(x); (1) global x
console.log(y); (2) global y
console.log(z); (3) outer's local z
function inner(){
var x = 'inner local x'; ----> 지역변수
console.log(x); (4) inner local x
console.log(y); (5) global y
console.log(z); (6) outer's local z
}
inner();
}
outer();
conosle.log(x); (7) global x
console.log(z); (8) RefernceError : z is not defined
소스를 보시면 x,y, 변수가 선언된거는 전역변수 이에요 !
전역 변수란 어디서든지 참조할수있는것이에요!
전역과 반대되는 지역변수란
지역리나 함수 몸체 내부를 말합니다! z 변수요!
위에 소스에서 outer 함수와 inner함수 두개가 있지만 outer 함수 내부안에 또다른 함수가 있는것을 중첩함수 라고 해요!
전역스코프 - outer 지역 스코프 - inner 지역 스코프 전부 연결이 되어 있는데요
변수를 참조 할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로
이동하며 선언된 변수를 검색 합니다!
그래서 inner 함수에서
console.log(z) 콘솔 불러도 오류가 나지않고 outer 함수에 있는 z 변수를 읽어와서 z변수 값을 가지고 온거에요!
움 이것도 동물원과 비유를 해본다면
전역 변수를 사람1 이고
outer 함수가 동물원이라고 생각하고 거시 z 변수는 사육사
inner 함수의 x변수는 기린입니다.
inner 함수에서 콘솔 찍어서 사육사를 부를수있을까요 ?
👌 가능하죠!
같은 중첩 함수이니깐요!
같은 동물원 안에 있으니깐 기린이 살고있는 곳에 사육사가 갈수있겠죠 ?
그럼 !! 기린이 살고있는 곳에 일반 사람1 이 갈수있을까요 ? ❌
못갑니다!
사람1은 동물원 소속 사람이 아니니깐요 ( 괜히 동물원에 놀러간 사람1 아니냐 라고 보는게 아니에요!! )
이런식으로 동물원과 비유해서 생각하면서 범위 스코프에 대해서 간략하게 설명 해봤습니다 ㅎㅎ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ너무 개발새발인가...
zoo 동물원에 있는 기린과 관련인물 ...
그 밖에 있는 도시.... 하핳
난 디자이너 아니니깐 그림은 참고로 하시길
