Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/while below:

while - JavaScript | MDN

어떤 경우에는 변수 할당을 조건으로 사용하는 것이 합리적일 수 있습니다. 이것은 가독성과 상충되는 경우가 있으므로, 모든 사람이 패턴을 더 명확하게 알아볼 수 있는 특정 형식 권장 사항이 있습니다.

다음 예시는, 문서의 주석을 반복처리하여, 콘솔에 출력하는 코드입니다.

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT);
let currentNode;
while (currentNode = iterator.nextNode()) {
  console.log(currentNode.textContent.trim());
}

이것은 다음 코드 때문에, 완전히 좋은 예시라고는 할 수 없습니다.

while (currentNode = iterator.nextNode()) {

그 행의 동작은 매번 주석 노드가 얻어진다는 점에서는 괜찮습니다.

1. iterator.nextNode()는 해당 주석 노드를 반환하며, 이 노드는 currentNode에 할당됩니다.
2. 따라서 currentNode = iterator.nextNode()의 값은 truthy입니다.
3. 따라서 console.log() 호출이 실행되고 반복문이 계속됩니다.

...그리고 문서에 더 이상 주석 노드가 없는 경우는 아래와 같습니다.

1. iterator.nextNode()는 null을 반환합니다.
2. 따라서 currentNode = iterator.nextNode()의 값도 null이며, 이는 거짓으로 평가됩니다.
3. 따라서 반복문이 종료됩니다.

이 줄의 문제는, 일반적으로 조건문은 ===와 같은 비교 연산자를 사용하지만 이 줄의 =는 비교 연산자가 아니라 할당 연산자 라는 점입니다. 따라서 =는 ===의 오타처럼 보여집니다 (실제로는 오타가 아니더라도).

따라서 이와 같은 경우, 오타 가능성을 검사하여 수정할 수 있도록 도와주는 ESLint의 no-cond-assign 규칙과 같은, 일부 코드 린팅 도구는 다음과 같은 경고를 표시합니다.

Expected a conditional expression and instead saw an assignment. (조건부 표현식을 기대하는 곳에 할당이 있었습니다)

많은 스타일 가이드에서는 조건이 할당이 되려는 의도를 보다 명시적으로 표시할 것을 권장합니다. 이를 위해, 할당 주위에 그룹화 연산자로 괄호를 추가하면 최소한의 작업으로 수행할 수 있습니다.

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT);
let currentNode;
while ((currentNode = iterator.nextNode())) {
  console.log(currentNode.textContent.trim());
}

사실 이것은 ESLint의 no-cond-assign의 기본 구성과 Prettier에서 강제하는 스타일이므로, 이 패턴을 자주 마주할 것입니다.

어떤 사람들은 조건을 명시적 비교로 바꾸기 위해 비교 연산자를 추가할 것을 권장할 수도 있습니다.

while ((currentNode = iterator.nextNode()) !== null) {

이 패턴을 작성하는 또 다른 방법도 있습니다.

while ((currentNode = iterator.nextNode()) && currentNode) {

또는 아예 while 반복문을 사용하지 않는 방법도 있습니다.

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT);
for (
  let currentNode = iterator.nextNode();
  currentNode;
  currentNode = iterator.nextNode()
) {
  console.log(currentNode.textContent.trim());
}

독자가 조건 패턴으로서의 문에 충분히 익숙하다면 이러한 모든 변형은 똑같이 읽기 쉬울 것입니다. 그렇지 않은 경우, 마지막 형태가 가장 장황하지만 가장 읽기 쉬울 것입니다.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4