[클린코드 자바스크립트] 함수 스코프 & 블럭 스코프 (function scope, block scope)

 

* 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다.

function scope & block scope

• 함수단위 스코프 : var
• 블럭단위 스코프 : const, let
• var 사용은 지양한다.
  • 왜 ? 잦은 변수 사용을 하면 값이 바뀌는 경우가 생길 수도 있음. 짧은 소스코드는 괜찮지만 소스코드가 더 길고 복잡할 수록 버그 발생이 생기기 쉬움.
• const는 재할당만 금지한다. 객체, 배열의 조작은 가능하다.

# var 사용을 지양하는 이유 

var global = '전역';

if(global === '전역') { 
  var global = '지역';
  console.log(global) // 지역
}

console.log(global) // 지역 -> 값이 바뀌는 불안요소가 있음. 

# 함수단위 스코프 

var name = 'kim';

function call() {
	var name = 'park';
  console.log(name); // park 
}

call(); 
console.log(name); // kim  

# 블럭단위 스코프 

let global = '전역';

if(global === '전역') {
  let global = '지역';
  console.log(global) // 지역
}

console.log(global) // 전역 > 안전한 변수 사용이 가능.

# 변수 재할당 

# 객체 
const person = {  // 변수 선언 + 할당 
	name: 'jang',
	age: 30
}

person = {   // 재할당 > error 
	name: 'kim',
	age: 20
}

person.name = 'kim';
person.age = 20; 

console.log(person); // 재할당 하지않고 값을 변경했기 때문에 동작 가능 {name: 'kim', age: 20} 

# 배열 
const persons = [
    { 
        name: 'jang',
        age: 30
    }
];

persons.push({
    name: 'kim',
    age: 20
});

console.log(persons); // 객체가 추가된 상태에서 정상 동작