범위 작동 방식 및 관심을 기울여야 하는 이유

범위는 프로그래머로서 불행한 일생과 비참한 일생 사이의 모든 차이를 만드는 프로그래밍의 불쾌한 구성 요소 중 하나이지만 프로그래머로서의 범위 이외의 것들에 관한 것입니다. 그러나 일반인의 관점에서 범위는 코드베이스에서 데이터에 액세스할 수 있는 위치를 정의하는 것으로 요약됩니다.

다시 말씀드리겠습니다.

범위는 코드베이스에서 데이터에 액세스할 수 있는 위치로 귀결됩니다.

그게 왜 중요합니까? 글쎄, 실제 세계 시나리오를 상상해보십시오. 코드베이스가 집이고, 데이터가 집에 있고, 범위가 집에 저장되는 위치라고 가정해 보겠습니다.

집에 있는 모든 것을 저장하고 집의 다른 곳에서 액세스할 수 있다면 머지 않아 엄청나게 지저분하고 정리되지 않은 집이 생겨서 무엇이든 찾고 사용하는 데 영원히 걸릴 것입니다. 은그릇 서랍에 칫솔이 있고 소파 쿠션에 속옷이, 옷장에 예술품이 있는 집을 상상해 보십시오. 무슨 난장판이죠? 그곳에 사는 것은 곧 버틸 수 없게 될 것입니다.

🤫 참고사항

집이 실제로 이렇다면

느낀다

Marie Kondo 당신을 구할 수 있습니다.

그래도.

조직적이고 접근 가능한 집의 동일한 원칙이 범위에 적용됩니다.

내 모든 데이터가 내 프로그램의 어디에서나 액세스할 수 있다면 사용하기 위해 검색하는 데 몇 시간을 소비해야 하는 노출된 변수와 추적할 수 없는 완전히 압도된 가비지 수집기가 빠르게 엉망이 될 것입니다. 중요한 것과 그렇지 않은 것. 모든 것을 글로벌 범위에 포함하는 것이 불가능하다는 것이 아니라 정말 나쁜 생각일 뿐입니다.

JS에는 세 가지 일반적인 유형의 범위가 있습니다.

로컬

글로벌

차단 범위.

글로벌 범위

전역 범위를 사용하면 프로그램의 어디에서나 데이터(변수에 저장된)에 액세스할 수 있습니다. 또한 프로그램의 어느 곳에서나 변경할 수 있으므로 기본적으로 전역 변수를 사용하여 변경할 수 없도록 CONST로 선언하지 않는 한 전역 변수를 사용하는 것은 정말 끔찍한 생각입니다. 함수 외부의 변수로 설정하여 데이터를 전역으로 만들 수 있습니다. var와 const만 사용하여 전역 변수를 선언할 수 있습니다.

const someStuff = "things"

console.log(someStuff)
>> "things"

function sayStuff(){
  console.log(someStuff);
};

sayStuff()
>> "things"

보시다시피 전역 범위 변수인 someStuff는 내 프로그램의 모든 함수 내부와 외부에서 액세스할 수 있습니다.

로컬 범위

로컬 범위를 사용하면 데이터가 선언된 함수 내부 어디에서나 데이터에 액세스할 수 있습니다. 변수는 여전히 변경 가능하지만 변수가 기능에 묶여 있기 때문에 예상치 못한 끔찍한 방식으로 전체 프로그램에 영향을 미치지 않습니다. 함수 실행이 완료되면 변수와 그 안에 포함된 데이터는 가비지 수집되고 더 이상 존재하지 않습니다. 해당 함수를 다시 호출할 때까지.

function sayHello(){
  var greeting = "Hello!"
  console.log(greeting);
}

sayHello()
>>"Hello!"

console.log(greeting)
>> ReferenceError: greeting is not defined

그래서 여기서 변수greeting가 함수sayHello() 내부에만 존재한다는 것을 알 수 있습니다. 일단 함수 외부에서 변수를 호출하려고 시도했습니다. 그것은 더 이상 존재하지 않았습니다. 따라서 우리는 var greeting가 함수 sayHello()로 LOCALLY 범위라고 말할 수 있습니다.

블록 범위

마지막으로 중요한 것은 블록 범위입니다. 블록 범위 내에서 생성된 데이터는 생성된 함수의 블록 내에서만 사용할 수 있습니다. 이것은 매우 특정한 경우에만 사용하려는 단기 데이터가 있을 때 유용합니다. if if 문이 true를 반환하는 것과 같습니다.

function rememberMe(name){
  if(name.includes("Akira")){
    let recognition = `Omg, hi, ${name}! I remember you!`
    console.log(recognition);
  } else {
    let recognition = `I'm sorry, I don't remember you, ${name}...`
    console.log(recognition)
  };
}

여기에서 볼 수 있듯이 let 키워드를 사용하면 해당 블록 내에서만 변수 이름recognition을 사용할 수 있습니다. 첫 번째 블록이 끝난 후 JavaScript의 가비지 수집기가 블록 실행이 완료된 후 해당 블록 변수를 지워버렸기 때문에 let 와 동일한 변수 이름을 recognition 로 새 블록 변수를 설정할 수 있습니다. 따라서 여기서 변수let recognition는 BLOCK 범위가 특정 블록으로 지정되었습니다.

참고: 블록은 한 쌍의 중괄호 사이에 아무 말도 하지 않는 멋진 방법입니다.

그래서, 당신은 그것을 가지고 있습니다! 범위를 파악했습니다.

아래에 의견이나 수정 사항을 남겨주세요. 건설적인 피드백을 듣게 되어 기쁩니다!