TIL #0402

Adela·2020년 4월 5일

✍Today I Learned

목록 보기

5/15

Scope: 범위

변수와 값이 어디서부터 어디까지 유효한가 판단하는 범위

모든 프로그래밍 언어는 각자 변수 접근 규칙을 갖는데 JavaScript엔진은 함수단위로 하나의 범위를 가진다.

Q1. greetSomeone()의 결과와 firstName의 값은?

let greeting = 'Hello';
function greetSomeone(){
  let firstName = 'Josh';
  return greeting + ' ' + firstName;
}

greetSomeone();  // 'Hello Josh'
firstName;  // ReferenceError :firstName in not defined

firstName이 greetSomeone함수 안에 선언되어있지만 접근할 수 없다는 ReferenceError가 뜬다.
⇨ 변수 firstName에 접근할 수 있는 범위가 존재한다.
⇨ Local Scope 안에 선언된 변수는 밖에서 사용할 수 없다.

⚡️Scope 규칙 1: Local scope vs Global Scope

Local에서는 Global함수에서 변수를 가져와 쓸 수 있다.
반대로 Local에서 정의된 변수는 바깥global에서 쓸 수 없다.

scope는 중첩 가능 : 함수 안에 함수를 넣을 수 있다.
global scope는 최상단 scope
전역변수는 어디서든 접근, 가져다 쓰기 가능하다.
함수 내에서는 함수 내 선언 된 지역변수가 전역 변수보다 더 높은 우선순위를 가진다.

Q2. 순서대로 콘솔에 출력되는 결과는?

let name = 'Richard';

function showName(){
  let name = 'Jack'; // 지역변수, 위의 name과는 동명이지만 다른변수
  //showName 함수 안에서만 접근가능
  console.log(name);   // ???- 출력순서 2 이유:showName()함수를 호출해야 실행된다
}

console.log(name);   // ???- 출력순서 1
showName();
console.log(name);   // ???- 출력순서 3

순서 1- console.log(name); 결과값 'Richard'
순서 2- console.log(name); 결과값 'Jack' 지역변수는 전역변수보다 우선순위가 높다
순서 3- console.log(name); 결과값 'Richard' 지역변수에 접근불가

Q3. 순서대로 콘솔에 출력되는 결과는?

let name = "Richard";

function showName (){
  name = "Jack" ; //전역변수 위의 name과 같은변수에 값을 재할당
  //선언let이 없기 때문에, 바깥scope에 있는 name이라는 변수를 가져온다
  console.log(name);  // ???-출력순서2
}

console.log(name);  // ???-출력순서1
showName();
console.log(name);  // ???-출력순서3

순서 1- console.log(name); 결과값 'Richard'
순서 2- console.log(name); 결과값 'Jack'
순서 3- console.log(name); 결과값 'Jack'

⚡️Scope 규칙 2: Function scope vs Block Scope

Block: 중괄호(CurlyBracket)로 시작하고 끝나는 단위

for (let i = 0; i<5; i++){
  console.log(i);  //다섯번 iteration 0, 1, 2, 3, 4
}
console.log('final i : ' + i);  // ???

출력결과 ReferenceError : i is not defined
block범위 {}를 벗어나는 즉시 변수를 사용할 수 없다

let, var, const의 차이

let : Block단위로 변수 사용 가능
var : 함수단위로 Scope를 가진다.

Q5. 콘솔에 출력되는 결과는?

for(var i = 0; i<5; i++){
  console.log(i);  //다섯번 iteration 0, 1, 2, 3, 4
}
console.log('final i : ' + i);  // 'final i : 5'

var로 선언된 i는 Block범위를 벗어나도 같은 function scope에서는 사용 가능하다. 따라서 예상치 못하는 변수의 재사용성 위험이 있다.
let, const 위주로 써야겠다.

const : 값이 변하지 않는 변수, 즉 상수를 정의할 때 사용한다.

let과 마찬가지로 Block Scope를 따른다
값이 변하지 않기 때문에 값을 재할당(재정의)하려고 하면 TypeError를 낸다.
var 사용한 재선언시 아무런 에러도 내지 않는다.
let을 사용한 재선언시 SyntaxError를 낸다.

let myName = 'Adela';
let myName = 'John'; //SyntaxError
var name = 'Tony';
var name = 'Nick'; //아무런 error를 내지않는다

var로 재선언 했는데 아무런 error가 나지않는다?

보통의 경우 Bug🐛
ex) 위에 선언을 했는데 까먹었다던지 .,,

따라서 가능하면 재선언하지 않는 것이 버그를 줄일 수 있는 방법이다.
-> let/ const를 쓰는 것이 실수를 막아줄 수 있어서 안전하다.

⚡️Scope 규칙 3

window: 전역범위를 대표하는 객체

global scope에서 선언된 함수와 var키워드로 선언된 변수는 window객체와 연결된다.
console창을 열어 window; 를 쳐서 확인해볼 수 있다.

전역범위에 너무 많은 변수를 선언하지 않도록 한다.
window는 최상위 scope이기 때문에 어떤 라이브러리(프로그램)가 어떠한 변수를 사용할 지 모르기 때문에 변수가 겹칠 위험이 있다.

⇨ 전역범위보다는 하나의 scope를 만들어서 안에 let 키워드로 코드를 작성하도록 한다.

⚡️Scope 규칙 4

절대로 선언 키워드(var, let, const)없이 변수를 초기화 하면 안된다

function showAge(){
  age = 90;
  //선언키워드 없이 초기화 된 age는 전역변수로 취급된다
  // age === window.age
  console.log(age);
}
showAge();  // 90
console.log(age);  // 90