코드스테이츠 프리코스 4주차 후기(2)

*코드스테이츠 프리코스 33기를 수강하면서 2019년 5월 23일(목)에 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

---

1. Scope

코드 스테이츠 Pre course 33기 4주차 목요일(2019-05-23)에는 ① Scope에 대해서 배웠다.

 

1) Local Scope vs. Global Scope

• 안쪽 scope(local scope)에서 바깥 scope(global scope)에 있는 변수/함수에 접근하는 것은 가능하지만, global scope에서 local scope에 있는 변수/함수에 접근하는 것은 불가능하다.
• javascript는 기본적으로, 함수가 선언됨과 동시에 자신만의 scope를 가지게 된다.(lexical scope, 정적 유효범위)

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

 

• scope는 중첩이 가능하다. 즉, 함수 안에 함수를 넣을 수 있다.
• global scope는 최상단의 scope로, global scope에 있는 전역변수는 어디에서나 접근이 가능하다.
• 지역변수는 함수 내에서 전역변수보다 더 높은 우선순위를 가진다.

// case1 : 지역변수는 함수 내에서 전역변수보다 높은 우선순위를 가진다.
let name = "Richard";

function showName() {
	let name = "Jack"; // 지역 변수, showName 함수 안에서만 접근 가능
	console.log(name);} // Jack : 지역변수는 함수 내에서 전역변수보다 더 높은 우선순위를 가지기 때문

console.log(name); // Richard : showName 함수의 범위 밖에 있기 때문에 global scope에 접근
showName(); // 함수를 실행
console.log(name); // Richard : 함수를 실행해도 전역변수에는 영향을 미치지 않는다.

 

• 그러나 함수 내에서 let 키워드로 선언하지 않을 경우, 함수 외부의 전역변수에 접근하여 전역변수의 값을 바꾼다.

// case2 : 함수 내 let으로 선언하지 않을 경우, 전역변수에 접근한다.
let name = "Richard";

function showName() {
	name = "Jack"; // 전역 변수, 선언(let)이 없기 때문에, 바깥 scope에 있는 name이라는 변수를 가져옵니다
	console.log(name);} // Jack : 즉, 전역변수의 "Richard"가 함수가 실행되면 "Jack"으로 변경된다.

console.log(name); // Richard : 함수 실행 전이므로 전역변수 name은 아직은 "Richard"
showName(); // 함수를 실행
console.log(name); // Jack : 함수 내에서 let으로 선언하지 않았으므로 전역변수가 변경되고, 따라서 "Jack"

 

2) Function Scope vs. Block Scope(var, let, const)

• block이란? {}, 즉 중괄호로 시작해서 중괄호로 끝나는 단위를 block이라고 한다.
• var, let, const 모두 변수를 선언할 때 사용하지만 scope 범위가 다르다.
  • var : function scope를 따른다.
  • let, const : block scope를 따른다.

// case1 : let의 사례 - block scope
for(let i=0; i<5; i++) {
	console.log(i);} // 다섯번 iteration
console.log('final i:', i); // ReferenceError 
// i는 for문 내에서 let으로 선언됐기 때문에, 두번째 줄의 중괄호가 닫히는 곳까지만 유효범위를 가진다.
// 따라서 유효범위 밖에서 i를 호출할 경우, 선언된 적이 없는 변수이므로 ReferenceError가 발생된다.

// case2 : var의 사례 - function scope
for(var i=0; i<5; i++) {
	console.log(i);} // 다섯번 iteration
console.log('final i:', i); // 5
// var로 선언됐기 때문에 block 범위를 벗어나도 같은 function scope 범위 내에서는 사용이 가능하다.

 

• const : 값이 변하지 않는 상수를 정의할 때 사용하는 키워드. 값을 재정의할 경우 TypeError 오류가 발생된다.

let, const, var의 차이

3) 전역변수와 window 객체

• window는 전역 범위를 대표하는 객체이다.
• global scope에서 선언된 함수, var 키워드로 선언된 변수는 window객체와 연결된다.
• 전역에 너무 많은 변수를 선언하지 말 것!

var myName = "Paul";
console.log(window.myName); // Paul : window라는 객체의 key에 접근한 것과 동일

function foo() {
	console.log('bar');}
console.log(foo === window.foo); // true : 마찬가지로 window라는 객체의 foo라는 메소드에 접근한 것

 

 

4) 선언 없이 초기화된 전역 변수

• 절대로 선언(var, let, const)없이 변수를 초기화하지 말 것!!!

function showAge() { 
	age = 90; // age는 전역 변수로 취급됩니다. 따라서 global scope의 age 변수값이 변경될 위험이 매우 크다!
	console.log(age);}
showAge(); // 90
console.log(age); // 90 : 전역변수로 취급됐기 때문에 함수 밖에서도 age 변수 호출이 가능한 상태. 좋지 못함.