[JavaScript] JS 스코프, 생성자 함수

2022.09.30

💡 오늘의 JavaScript 공부

▶️ 스코프 [ Scope ]

: 변수에 접근할 수 있는 범위

📌 스코프의 타입

자바스크립트에서 스코프는 2가지 타입으로 존재한다.

[ 함수( 지역 ) 스코프 ] : 해당 지역에서만 접근할 수 있음.

[ 블록 ( 전역 ) 스코프 ] : 어느 곳에서든지 해당 변수에 접근 할 수 있음.

• 지역변수는 전역변수보다 더 높은 우선순위를 가진다.

📌 간단한 예시

let a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 let number = 111;
 console.log(number);
}
print(); // 111
console.log(a); // 1
console.log(number); // Reference Error

📌 렉시컬 스코프

함수의 상위스코프는 함수가 정의되는 시점에 정적으로 결정된다.

함수를 어디서 호출했는지가 아닌 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.

let x = 1;
function foo(){		// 상위스코프 저장, 상위스코프 전역
  let x = 10;
  bar()
}
function bar(){   // 상위스코프 저장, 상위스코프 전역
  let x = 5;
  console.log(x);
}
foo() // 5
bar() // 5

📌 스코프에서의 var, let, const

👉 const 키워드

• 유효 범위 : 블록 스코프 / 함수 스코프
• 값 재할당 : 불가능
• 재선언 : 불가능

👉 let 키워드

• 유효 범위 : 블록 스코프 / 함수 스코프
• 값 재할당 : 가능
• 재선언 : 불가능

👉 var 키워드

• 유효 범위 : 함수 스코프
• 추가 설명 : var키워드로 정의한 변수는 블록 스코프를 무시하고 함수 스코프만을 따른다. 그러나 모든 블록 스코프를 무시하는 것은 아니고 화살표 함수의 블록 스코프는 무시하지 않는다.
• 값 재할당 : 가능
• 재선언 : 가능

📌 간단한 예시

for (let i = 0; i < 5; i++){
  console.log(i)
}
console.log('final i: ', i) // Reference Error
// bolck 범위를 벗어나는 즉시 변수를 사용할 수 없다. 
// var키워드는 블록 스코프를 무시하고 함수 스코프만 따른다. 
----------------------------------------------
for (var i = 0; i < 5; i++){
  console.log(i)
}
console.log('final i: ', i) // 5
// bolck 범위를 벗어나도 같은 함수 스코프에서는 사용이 가능하다. 

const age = 30;
if( age > 19 ){
  var txt = '성인'
}
console.log(txt); // '성인'

// 블록 스코프는 이런식의 함수 내의 변수를 밖으로 끌어낼 수 없음 

function add ( num1, num2 ){
		var result = num1 + num2;
}
add(2,3);
console.log(result); // ReferenceError 
// 함수 스코프는 유일하게 함수 내의 변수는 밖으로 끌어낼 수 없음 

‼️ var 키워드보다 let키워드를 사용하는 것이 나은 이유

1. 블록 단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드로 작성할 수 있다.
2. 함수 스코프는 함수의 실행부터 종료까지이고, var 선언은 함수 스코프의 최상단에 선언된다. 함수 내에서 선언 키워드가 없는 선언은 최고 스코프에 선언된다. 즉 함수의 실행 전까지 선언되지 않은 것으로 취급한다.
3. 하지만 var 키워드는 이 규칙을 무시하므로 코드가 다소 혼란스러워질 수 있다.
4. 또한 let키워드는 변수의 재선언을 막아주기에 더 안전하다.

‼️ 주의점

• 전역 변수는 최소화하는 것이 좋다.

  ( 의도하지 않은 로직에 의해 발생하는 문제 **side effect **를 줄일 수 있다. )

• 선언하지 않은 변수는 할당 하지 말자 -> 전역변수로 취급됨

▶️ 생성자 함수

객체 리터럴을 사용해 더 쉽게 객체를 생성할 수 있게 한다.

📌 규칙

1. 함수 이름의 첫 글자는 반드시 대문자로 사용한다.
2. 반드시 ‘ new ‘ 연산자를 붙여 실행한다.

📌 간단한 예시

function Item(title, price){
  // this = { }
  this.title = title;
  this.price = price;
  this.Showprice = function(){
    console.log(`${title}의 가격은 ${ price }원 입니다. `)
  }
  // return this;
}

const item1 = new Item("인형", 3000)
const item2 = new Item("시계", 4000) 
const item3 = new Item("가방", 5000)

console.log(item1, item2, item3); 

item3.Showprice(); // "가방의 가격은 5000원 입니다. "

📌 동작 원리

1. 빈 객체를 만들어 this에 할당
2. 함수 본문을 실행 -> this에 새로운 프로퍼티를 추가해 this를 수정한다.
3. this를 반환한다.