JavaScript 블록의 작동 원리 🧱

JavaScript의 블록은 중괄호( {} )로 0개 이상의 명령문을 그룹화하는 데 사용됩니다. 명령문은 단순히 무언가를 수행하거나 일부 동작을 생성하는 코드 단위라는 것을 기억하십시오.

블록은 while , if...else 및 for 문과 함께 가장 자주 사용됩니다. 우리는 모두 이것을 보았지만 let 및 const 와 함께 블록을 사용할 때 흥미로운 의미가 있습니다.

비엄격 모드에서 함수 및 var 변수에는 블록 범위가 없습니다.

var foo = 'yo';
{
  var foo = 'hey';
}

console.log(foo); // Logs 'hey'

그러나 let 또는 const 를 사용할 때 블록은 각 변수의 범위를 유지합니다.

let foo = 'yo';
{
  let foo = 'hey';
}

console.log(foo); // Logs 'yo'

const foo = 'yo';
{
  const foo = 'hey';
}

console.log(foo); // Logs 'yo'

중복 선언에 대한 const 예제에서는 SyntaxError가 발생하지 않습니다. 이는 블록 내부의 foo 변수가 자체 범위 내에 포함되어 외부 범위와 충돌하지 않기 때문입니다.

우리는 JavaScript에서 블록을 너무 많이 사용하여 때때로 개념을 잊어버리기 쉽습니다. 그것들은 종종 if 문이나 함수와 같은 인접한 코드에 연결된 것처럼 보입니다. 그러나 위의 예에서 보았듯이 원하는 경우 자체적으로 격리된 블록을 사용하여 완벽하게 유효한 코드를 만들 수 있습니다.

{
  console.log('I run inside my very own block!');
}

이것은 이상해 보이지만(거의 즉석에서 객체를 생성하는 것처럼) 100% 유효합니다. 블록은 재미있다! 🧱


내 블로그jsbits-yo.com에서 더 많은 #JSBits를 확인하세요. 또는 나를 팔로우 하세요!