오늘부터 TIL을 열심히 적어보고자 한다. 사실 블로깅을 하는 것이 내가 교육과정을 따라가는 것과 동시에 진행하기에는 벅차고 어려운 것이라고 생각하여 하지 못했다. 허나 내 지식들이 정리되지 않고 뒤죽박죽이 되어 내가 필요한 개념들을 그때 그때 나의 지도에서 찾으려면 꾸준히 좌표들을 하나 하나 나의 정보통에 찍어 놔야 한다는 생각이 이제서야 들어 이제 시작해 보려고 한다.

SCOPE_ 너는 도대체 무엇입니까?

• Scope는 변수에 접근할 수 있는 유효한 범위.
• 그런데 JavaScript은 기본적으로 함수가 선언되는 (lexical) 동시에 자신만의 Scope를 가진다. 즉, 선언되는 함수안이 범위가 되는 것이다. 찾아보니 다른 말로는 함수레벨 스코프 라고 한다.

_Global Scope와 Local Scope 차이

예시)

예시를 보면 someone이란 함수를 실행할 시 let으로 선언된 변수들의 텍스트가 출력되었지만 firstName을 확인하니 레퍼런스 에러가 발생한다. 레퍼런스 에러는 firstName의 값을 참조할 수 없다는 뜻으로 함수 안에서 선언된 변수인 firstName의 값은 선언된 함수안에서만 사용될 수 있기 때문에 에러가 난다. 스코프의 범위가 함수안으로 한정되어 있기 때문이다.

여기에서 스코프를 나누어보면
Global Scope와 Local Scope로 나뉘는데

빨간색 박스가 Global Scope이고, 노란색 박스가 Local Scope인 것이다. 로컬스코프에서 선언된 변수는 글로벌 스코프에서 사용할 수 없다.

또 다른 예시)

자 여기서, 콘솔로그가 찍힌 순서는 어떻게 될까?

순서대로 얘기하면 2,1,3순으로 콘솔로그가 찍혔다.

첫번째 '헬로'는 먼저 선언된 name 변수의 값이다. 두번째 '키티'는 함수내 선언된 name변수의 값이다. 세번째 '헬로'는 첫번째 선언된 name의 값이다.

• 여기서 꼭 알아야 할 포인트
  let으로 선언된 name은 같은 변수가 아니다. 이름만 같고 서로 다른 메모리 영역에 저장되어 있는 변수라는 점을 꼭 알아야 한다. 함수 내 선언된 변수 name은 함수 내에서만 사용이 가능하다. Local scope 안의 변수이기 때문이다.

  그런 다음 예시로 보자.

  

이번엔 함수 내 변수가 선언되지 않았다. 어떤 차이점이 있을까?
결과값은 '헬로', '키티', '키티'가 나왔다.

처음 나온 '헬로'는 일단 함수가 실행되지 않았기에 처음 선언된 name의 값이 출력되었다. 그 다음 함수가 실행되고 함수안에 있는 name 변수에 '키티'가 할당되었다. 그리하여 두번째는 '키티'가 출력된다. 그리고 세번째 출력은 함수 안의 변수에 할당된 '키티'가 그대로 유지되어 출력된다. 이번 예시에서는 변수는 한번만 선언되었기에 함수 안의 변수는 같은 메모리를 사용하는 변수이다. 함수가 실행되어 변수의 값이 변하였고 그리하여 세번째는 '키티'가 출력된다.