[TIL] Javascript: Scope (왜 계속 undefined라고 뜨는거야!!🤮)

0. is not defined` ?!ㅠㅠ

분명히 변수를 선언했다고 생각했는데 is not defined Error가 뜰 때가 있습니다.

아래는 앞으로 배울 scope의 이유로 계속 undefined가 나왔던 상황입니다. (끼어억~~ㅠ)

let myProfile = {
  name: '김개발',
  address: {
    email: 'geabal@gmail.com',
    home: '위워크'
  },
  'my favorite': {
    food: [{
      name: '샐러드',
      price: 3500
    }, {
      name: '삼겹살',
      price: 15000
    }],
    hobby: ['축구']
  }
}

// getAnswer 함수를 호출하면
// '샐러드'가 return 될 수 있도록 프로퍼티에 접근해서 반환해주세요.
// ❗️  ❗️  ❗️  No  ❗️  ❗️  ❗️  
function getAnswer() {
  const salad = myProfile['my favorite'].food[0].name;
  console.log(salad);

}
console.log(getAnswer());

하지만 scope의 개념을 재정리 한 후 아주 간.단.한 방법으로 문제를 해결할 수 있었습니다..🥲

바로 선언을 {} 밖으로 빼주는 것입니다.
마지막에 함수를 호출해도 값이 나오지 않았던 이유는 바로 이것이었습니다!

let myProfile = {
  name: '김개발',
  address: {
    email: 'geabal@gmail.com',
    home: '위워크'
  },
  'my favorite': {
    food: [{
      name: '샐러드',
      price: 3500
    }, {
      name: '삼겹살',
      price: 15000
    }],
    hobby: ['축구']
  }
}

// getAnswer 함수를 호출하면
// '샐러드'가 return 될 수 있도록 프로퍼티에 접근해서 반환해주세요.
// 💚     💚     💚Yes💚     💚     💚
const salad = myProfile['my favorite'].food[0].name;

function getAnswer() {
  return salad;
}
console.log(getAnswer());

scope는 javascript의 문법은 아니지만, javascript에서 scope란 변수가 어디까지 쓰일 수 있는지의 범위를 의미합니다.

변수를 선언했다고 생각했는데 is not defined Error가 뜰 때가 있습니다.
그 이유는 변수를 선언한 영역(block)에 점근할 수 없었기 때문입니다.

1. Block

block은 {}로 감싸는 부분을 말합니다.

if, for, object를 만들면서 사용 된 {}모두 블럭입니다.

이 블럭{}안에서 정의 된 변수는 오로지 블럭{}안에서만 사용이 가능하며, {}내부에서 정의된 변수는 지역 변수라고 합니다.

function getResult() {
  let result = 10;
  
  return result;
}


// 자바스크립트 에러! 
// getResult 내부의 scope에 접근할 수 없다
console.log(result);

2. Global(전역) Scope

scope는 변수가 선언되고 사용할 수 있는 공간을 말합니다.
아까 위에서 Block scope를 배웠는데, 그럼 Block 밖에서 선언 된 변수들은 어디에 있는 걸까요?

블럭 밖은 Global scope라고 합니다. 또 global scope안에 선언 된 변수는 전역 변수라고 합니다.

const color = 'red';
console.log(color);


function returnColor() {
  console.log(color);
  return color;
}


console.log(returnColor());

• 그러나 수많은 코드와 함수가 있을 상황에서 Global 변수를 남용하는 것은 좋지 않습니다.
  변수는 최대한 block scope으로 나누어야 합니다. 그 이유는

• 타이트한!(더 세부적인) scope(tightly scoping)의 변수는 코드 품질을 올려줍니다!
• 코드가 block 으로 명확하게 구분되기 때문에 코드 가독성이 올라갑니다.
• 코드가 한줄 한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워집니다.
• 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬워집니다.
• 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리 절약도 됩니다.

요약: global 변수는 쓰지 않도록 노력해야 하고, 최대한 {} 내에서 let, const 을 사용하여 변수를 새로 만들어서 쓰자는 말입니다.
(var 은 block을 무시해버리기 떄문에 쓰면 안됨)