You Can Label a JavaScript `if` Statement (한글)

이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다.

 

원문: https://css-tricks.com/you-can-label-a-javascript-if-statement/#top-of-site

저작권 정보: https://css-tricks.com/license/

---

Labels는 자바스크립트 생성 이후 존재해온 기능이다. 그들은 새롭지 않아! 나는 많은 사람들이 그것에 대해 알고 있다고 생각하지 않고 그들이 약간 혼란스럽다고 주장할 수도 있다. 그러나, 우리가 보게 될 것처럼, 라벨은 매우 특정한 경우에 유용할 수 있다.

 

 

그러나 먼저 자바스크립트 Labels는 HTML의 <label>와 혼동되어서는안 된다. 이것은 완전히 다른 것이다!

 

자바스크립트 라벨은 문이나 코드 블록의 이름을 붙이는 방법이다. 일반적으로 루프 및 조건문. 

그것은 당신이 또는 내부에서 라벨을 붙인 문구를 허용한다. 문에 레이블을 적용하려면 다음 명령문을 시작하십시오. label: 그리고 당신이 라벨로 어떤 것을 붙이든지 나중에 참조할 수 있다.

레이블의 기본 구문은 다음과 같다.

 

let x = 0; // Label a loop as "myLoop" 
myLoop: while (true) {   
	if (x >= 10) {     // This will cause "myLoop" to end.
		break myLoop;   
    }
    x++;
}

 

라벨은 문장에 대한 내부 참조일 뿐이며, 조회, 내보내기 또는 값에서 저장할 수 있는 것이 아니다. 또한 변수 이름과 충돌하지 않기 때문에, 정말로 사람들을 혼란스럽게 하고 싶다면, 당신은 루프를 가질 수 있고 변수는 같은 이름이 될 수 있다. 제발 이러지 마. 미래의 너, 그리고 너의 코드를 읽어야 하는 다른 사람들이 고마워할 거야. 라벨의 사용 사례는 한정되어 있지만 믿을 수 없을 정도로 강력하다.

 

break 그리고 continue에 대한 간단한 소개

break 문은 현재 실행 중인 루프 또는 조건문을 종료합니다. 이것은 케이스를 끝내기 위해 switch 문에서 가장 일반적으로 사용되지만, if 문을 일찍 끝내기 위해 또는 루프가 종료되고 중지되는 동안 루프를 발생시키기 위해 사용될 수 있다. 그것은 조건부 진술에서 탈출하거나 루프를 일찍 끝낼 수 있는 좋은 방법이다.

 

다음은 break문의 기본적인 예입니다.

const x = 1; 
switch(x) {   
	case 1:     
    console.log('On your mark!');     
    break; // Doesn't check the rest of the switch statement if 1 is true   
    
    case 2:     
    console.log('Get set!');     
    break; // Doesn't check the rest of the switch statement if 2 is true   
    
    case 3:     
    console.log('GO!');     
    break; // Doesn't check the rest of the switch statement if 3 is true 
    }
    // logs: 'On your mark!'

마찬가지로, 더 continue 문은 현재 반복을 조기에 종료하고 루프의 다음 실행을 시작하기 위해 루프와 함께 사용할 수 있다. 그러나 이것은 루프 안에서만 작동될 것이다.

 

다음은 continue문의 기본적인 예입니다.

for (let x = 0; x &< 10; x++) {
	if (x !== 5) continue; 
    console.log(x); 
 }

 

break문에 레이블 사용 

일반적으로 레이블의 사용 사례는 모든 종류의 중첩 문을 열 때 나타납니다. 그것들을 break롸 함께 사용하면 깊게 중첩된 루프나 조건부 루프를 중지하고 즉시 정지시킬 수 있다.

 

// Our outer if statement 
outerIf:  
if (true) {   
	// Our inner if statement   
	innerIf:   
	if (true) {
    	break outerIf; // Immediately skips to the end of the outer if statement
    }   
    console.log('This never logs!'); 
}

 

continue문에 레이블 사용

제가 중첩된 루프를 만들고 내부 루프 안에서 외부 루프의 반복을 건너뛰고 싶었던 적이 있습니다. 나는 보통 내부 루프를 부수고, 내가 건너뛰고 싶은 상태에 있는지 확인하고, 외부 루프를 계속한다. 이 코드를 읽기 쉬운 문장으로 단순화할 수 있다는 것은 멋진 일입니다!

let x = 0;
outerLoop:
while (x < 10) {
  x++;
  for (let y = 0; y < x; y++) {
    // This will jump back to the top of outerLoop
    if (y === 5) continue outerLoop;
    console.log(x,y);
  }
  console.log('----'); // This will only happen if x < 6
}

Block문과 labels

JavaScript의 블록 문은 const의 범위를 지정하고 변수의 일부만 코드의 일부분으로 허용하는 방법입니다. 함수를 만들지 않고 일부 변수를 지역화하려는 경우 이 방법이 유용합니다. 이에 대한 (큰) 경고는 블록 문이 ES 모듈인 엄격한 모드에서 유효하지 않다는 것이다.

다음은 블록 문입니다.

// This example throws a syntax error in an ES module
const myElement = document.createElement('p');
myConditionalBlock: {
  const myHash = window.location.hash;
  // escape the block if there is not a hash.
  if (!myHash) break myConditionalBlock;
  myElement.innerText = myHash;
}
console.log(myHash); // undefined
document.body.appendChild(myElement);

 

실제 사용법

일상적인 생산 코드에 라벨을 사용해야 하는 이유를 생각해 내는데 시간이 좀 걸렸습니다. 이것은 다소 무리가 있을 수 있지만, 자바스크립트의 라벨이 유용하게 쓰일 수 있는 곳은 스위치 문 안에 있는 동안 루프에서 일찍 탈출하는 것이다. 스위치에서 깨질 수 있기 때문에, 일찍 끝나는 루프에 레이블을 적용하는 것은 잠재적으로 당신의 코드를 더 효율적으로 만들 수 있다.

계산기 앱에서 이 기능을 사용하는 방법은 다음과 같습니다.

const calculatorActions = [
  { action: "ADD", amount: 1 },
  { action: "SUB", amount: 5 },
  { action: "EQ" },
  { action: "ADD", amount: 10 }
];
    
let el = {};
let amount = 0;
calculate: while (el) {
  // Remove the first element of the calculatorActions array
  el = calculatorActions.shift();
  switch (el.action) {
    case "ADD":
      amount += el.amount;
      break; // Breaks the switch
    case "SUB":
      amount -= el.amount;
      break; // Breaks the switch
    case "EQ":
      break calculate; // Breaks the loop
    default:
      continue calculate; // If we have an action we don't know, skip it.
  }
}

이렇게 하면 스크립트가 계속 진행되도록 하는 대신 조건이 일치할 때 계산 루프에서 벗어날 수 있습니다!

 

결론

JavaScript 레이블을 사용해야 하는 경우는 드뭅니다. 사실, 여러분은 이것이 존재한다는 것을 전혀 알지 못하면서 매우 만족스러운 직업을 가질 수 있습니다. 그러나 이 구문이 도움이 되는 한 곳을 발견하면 바로 사용할 수 있습니다.