function scope & block scope

ljjunh·2024년 10월 1일

clean-code-javascript

목록 보기
2/38
post-thumbnail

1. var의 함수 스코프 문제점 🚨

var global = '전역'

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

console.log(global); // 지역 - 전역 변수가 오염됨

주요 문제점

  1. var는 함수 스코프만 인식하므로 if블록을 무시
  2. 전역 변수가 의도치 않게 오염됨
  3. if문은 함수가 아닌 블록이기 때문에 새로운 스코프를 생성하지 않음

2. let / const의 블록 스코프로 해결 ✨

let global = '전역'

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

console.log(global); // 전역 - 안전하게 보호됨

블록 스코프의 장점

  1. 중괄호 안의 변수는 그 안에서만 유효
  2. 외부 스코프의 변수를 안전하게 보호
  3. 코드 예측 가능성이 높아짐

🔍 추가 테스트

let global = '전역'

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

console.log(global); // 전역

if문 없이 블럭만으로도 그 역할을 잘 하고 있다.
let과 const는 블록 단위로 동작해서 우리가 생각하는 방식 그대로 코드가 동작한다.
이런 안전한 코드를 위해 let이나 const를 사용하는 것이 좋고 그 중에서도 const를 사용하는게 좋다.

🤔 "왜 굳이 const를 써야 하나요?"

"let을 쓰면 되는거 아닌가요? const를 쓰면 객체 다루기가 더 어려워지지 않나요?"
전혀 그렇지 않다. 핵심은 '재할당'이라는 키워드에만 집중하면 된다
const로 선언한 객체의 내부 값은 얼마든지 변경이 하다. 단지 변수 자체의 재할당만 막아줄 뿐이다

const의 특징과 활용 🌟

const person = {
	name : 'jun',
	age: '29',
}

// ❌ 재할당 불가
person = {  // TypeError: Assignment to constant variable
    name: 'jun2',
    age: 29
};

// ✅ 객체 속성 변경은 가능
person.name = 'lee'
person.age = '22'

console.log(person); // { name: 'lee', age: '22' }

배열에서도 마찬가지

const person = [
	name: 'jun',
	age: '29',
]

// ✅ 배열 메서드 사용 가능
person.push({
	name: 'lee',
	age: '22',
})

console.log(person); // [ { name: 'jun', age: '29' }, { name: 'lee', age: '22' } ]

4. const 사용이 권장되는 이유 🏆

  1. 📝 명확한 의도 전달
    재할당이 필요 없는 변수임을 명시적으로 표현
    코드 가독성 향상

  2. 🛡️ 안정성
    의도치 않은 재할당 방지
    실수로 인한 버그가 감소

  3. 🔄 유연성 유지
    객체나 배열의 내부 값은 변경 가능
    참조 타입의 특성을 그대로 활용할 수 있음

🎯 결론
const를 기본으로 사용하고, 재할당이 꼭 필요한 경우에만 let을 사용하는 것이 현대 JavaScript의 권장 사항이다.

profile
Hello

0개의 댓글