scope

이용원·2022년 11월 11일
0

JAVASCRIPT

목록 보기
10/34

Scope

스코프
범위는 '변수 가시성'을 참조한다.
변수를 어디 부분에서 정의하는냐
변수를 밖에 둘 거냐 함수 안에 중첩된 함수에 넣을 거냐
정의된 변수가 어디에서 위치하는지
우리가 어디에서 그 변수를 접근할 수 있는지

함수 안에 변수가 정의되었을 때 
function collectEggs(){
    let totalEggs = 6;
    console.log(totalEggs);
}
collectEggs(); // 6

//함수 밖에서 그 변수를 참조했을 때 
collectEggs(totalEggs)  // ReferenceError: 'totalEggs is not defined' 

함수가 실행되고 let totalEggs = 6; 이라는 변수가 생성되었는데
왜 함수 밖에서 사용하지 못 할까 scope때문이다.
함수 안에서 정의한 변수들은 함수 코드블럭 내에서만 사용이 가능하고 그 외에서는 참조할 수 없다.

함수 밖에다 함수 코드블럭에서 생성한 변수와 똑같은 이름으로 변수를 만들어도 둘은 별개이기 때문에
정의가 가능하고 값도 다르다

let totalEggs = 3;
function collectEggs(){
    let totalEggs = 6;
    console.log(totalEggs);
}
collectEggs();//안 쪽에서 정의된 totalEggs 6
console.log(totalEggs) //함수 밖에서 정의된 totalEggs 3

그러면 함수 내에서 선언을 하지 않고 할당만 해준다면???
함수 내에서 변수를 선언하지 않았기 때문에 전역변수에 값을 업데이트 해줌

let totalEggs = 3;  //밖에 할당하는 변수를 '전역변수'라고 한다.
function collectEggs(){
  //선언하지 않고 밖에 있는 변수를 가져와서 할당
    totalEggs = 0;
}
console.log(totalEggs) // 밖에 totalEggs 3
collectEggs();		 // 밖에 totalEggs를 0으로 할당
console.log(totalEggs) // 0

scope의 범위

let radius = 8;

if(radius>0){
    const PI = 3.141592;
    let msg ='HIII!';
}

console.log(PI); ReferenceError: PI is not defined
console.log(msg); msg is not defined;

radius의 크기가 0보다 큰데 왜 PI, msg는 선언이 되지 않았을까?
함수와 같이 코드블록 때문이다.

let,const는 변수의 범위가 블록으로 지정됨
var를 쓰면 변수의 범위가 전역변수로 지정됨

let radius = 8;

if(radius>0){
    const PI = 3.141592;
    var msg ='HIII!';
}
// console.log(PI);
console.log(msg); // 'HIII!'

여기서 웃긴 점은 function의 코드블럭에서는 var로 변수 선언을 해도 밖에서 참조가 안됨.
forif문에서만 그런 거 같음

함수 스코프랑 블록 스코프랑 같지만 다르다고 생각하면 됨

함수 스코프는 함수에 있는 거
블록 스코프는 for문이나 if문에 있는 거

lexical 스코프

부모 함수의 안에 중첩된 내부 함수는 해당 부모 함수의 범위에나 범위 내에서 정의된 변수를 참조할 수 있다.

function bankRobbery(){//부모함수
    const heroes =['Spiderman', 'Wolverine', 'Black Panther', 'Batwoman'];
  
    function cryForHelp(){//내부함수
        for(let hero of heroes){//내부함수에서는 부모함수에서 선언된 변수에 접근 가능
            console.log(`HELP US, ${hero.toUpperCase()}`)
        }
    }
  // cryForHelp(); 안쪽 함수를 만들고 // cryForHelp(); 이렇게 호출해줘야 한다.
}
bankRobbery();
함수를 이렇게 정의하고 부르면 아무것도 값이 나오지 않는다
밖에 정의한 bankRobbery함수의 리턴값이 없고 // 리턴값이 뭐라도 있으면 뭐라도 리턴
안에 정의한 cryForHelp함수를 실행시키지 않았기 때문

내부함수에서는 부모함수에서 정의한 변수에 접근하여 값을 사용할 수 있음
그러면 부모함수는 내부함수에서 정의된 변수 사용 가능?

  function bankRobbery(){
    const heroes =['Spiderman', 'Wolverine', 'Black Panther', 'Batwoman'];
    console.log(a)//부모함수에서 내부함수에서 정의된 변수 접근
    function cryForHelp(){
        let a = 'hi;'//내부함수에서 정의된 변수
        for(let hero of heroes){
            console.log(`HELP US, ${hero.toUpperCase()}`)
        }
    }
    cryForHelp();
}
bankRobbery(); // ReferenceError: a is not defined
오류 나버림
  
  

0개의 댓글

관련 채용 정보