기본으로 돌아가기: JavaScript의 주기

이 시리즈에서는 JavaScript의 빌드 블록에 대해 설명합니다.초보자든 기술 면접을 준비하든 관건적인 JS 개념을 되새기든 이 시리즈는 당신을 위해 준비한 것입니다.
이 시리즈의 첫 번째 부분은 순환에 관한 것이다.

  • What is a loop?
  • Infinite loops
  • While loops
  • For loops
  • Do...while loops
  • For...in loops
  • For...of loops
  • Resources
  • 순환은 무엇입니까?


    프로그램이 어떤 조작을 반복해서 실행하도록 순환합니다.프로그램이 이 조작을 실행하는 횟수는 설정된 조건에 달려 있다.
    비프로그래밍 용어에서 친구에게 길을 가르쳐 준다고 가정해 보세요.그들은 너에게 전화를 걸어 그들이 너의 거리에 있다고 말했지만, 그들은 어느 집이 너의 집인지 모른다.네가 모퉁이에 있는 노란 집에 도착할 때까지 계속 북쪽으로 가라고 그들에게 말해라.이 성명에서, "네가 모퉁이에 도착할 때까지 노란 집"은 네가 친구를 위해 설정한 조건이다.그들은 그들이 그 집에 도착할 때까지 계속 북쪽으로 갈 것이며, 그 점에서 걷는 것을 멈출 것이다.

    만약 네 친구에게 이 조건을 주지 않는다면 무슨 일이 일어날까?다시 말하면, 만약 당신이 단지 당신의 친구에게 "계속 북쪽으로 가자"라고 말한다면, 무슨 일이 일어날까요?너의 친구는 언제 멈춰야 할지 영원히 모른다.그들은 줄곧 북쪽으로 너의 집을 지나갈 것이다.너는 네 친구가 너의 집을 찾지 못했다고 탓할 수 없다. 왜냐하면 너는 지금까지 그들에게 언제 멈춰야 할지 말하지 않았기 때문이다.

    이 비프로그래밍 예는 사람들이 순환을 사용할 때 겪는 가장 흔히 볼 수 있는 문제 중 하나를 설명한다. the infinite loop. If you don't tell your loop when to stop, the loop will keep going forever. Importantly, if you tell your loop when to stop, but that stopping point could never actually be reached, that also is an infinite loop. Using the same example, let's say you told your friend "keep walking north until you reach the pink house on the corner". Your friend keeps walking north, but no matter how far they walk, they never find a pink house on the corner. Even though you gave your friend an ending point, they never could reach that ending point, so they would (theoretically) keep walking forever.

    When working with loops, it's very important that you say when the loop should stop running, and that that ending point can actually be reached.

    While 주기


    가장 유행하는 순환 중 하나는while 순환이다.while 순환의 구조는 다음과 같다.
    while (condition) {
        statement
    }
    
    문장을 실행하기 전에 테스트condition.계산 결과가 true이면 이 문장을 실행합니다.conditiontrue이면 문장은 계속 집행된다.conditionfalse로 바뀌면 문장의 집행이 정지됩니다.
    예를 들어 e라는 변수가 있다면 0부터 시작합니다.ee보다 작으면 4가 계속 증가하거나 증가1)해야 한다.
    let e = 0;
    while (e < 4) {
        e++;
    }
    
    다음은 위의 사이클에서 발생하는 상황을 상세하게 분석한 표입니다.e e < 4순환 실행?
    0
    맞다
    맞다
    1
    맞다
    맞다
    2
    맞다
    맞다

    맞다
    맞다
    4
    거짓
    아니오.e < 4true이면 순환이 실행된다.false로 변경되면 실행되지 않습니다.while 순환을 사용할 때 의외로 무한 순환을 작성하기 쉽다.예를 들어 위의 예에서 조건e >= 0이 있다면 순환은 무한히 실행될 것이다.e0부터 시작하여 조건은 true이고 계속 커진다는 것을 의미하며 조건은 시종 true로 평가된다는 것을 의미한다.
    //Infinite loop
    let e = 0;
    while (e >= 0) {
        e++;
    }
    

    For 루프


    또 다른 광범위하게 사용되는 순환은 for 순환이다.for 순환의 구조는 다음과 같다.
    for (initialExpression; conditionExpression; incrementExpression) {
        statement
    }
    
    initialExpression는 첫 번째로 운행하는 물건이다.이 표현식에 생성된 모든 변수의 역할 영역은 순환입니다. 이것은 순환 외부에서 이 변수를 인용할 수 없다는 것을 의미합니다.initialExpression는 통상적으로 계수기를 초기화하는 곳이다.
    그리고 conditionExpressiontrue 또는 false인지 평가한다.true인 경우 이 문을 실행합니다.false라면 문장이 실행되지 않고 for 순환이 종료됩니다.목록conditionExpression이 없으면 이 상황은 자동으로 표시됩니다true.incrementExpression 문장이 실행된 후에 실행됩니다.initialExpression가 통상적으로 초기화for 순환 중인 계수기와 같이 incrementExpression는 통상적으로 이 계수기를 증가시킨다.그러나 표현식도 계수기를 줄일 수 있다(또는 1).이때 다시 계산conditionExpression하고 true일 경우for 순환이 계속됩니다.
    예를 들어 "I can count to X"라는 짧은 말을 콘솔에 기록하는 for 순환을 만듭니다. 그 중에서 X1 부터 5 까지의 숫자입니다.우리는 우선 initialExpression 초기화let i = 1 중의 변수를 사용한다.그런 다음 conditionExpressioni <= 5로 설정합니다.이것은 i가 작거나 같기만 하면 문장이 계속 운행된다는 것을 의미한다.마지막으로 우리는 매번 순환을 실행할 때5를 1로 늘리기를 희망하기 때문iincrementExpression이다.주의: 모든 표현식은 분호i++로 구분되는 것이 매우 중요하다.
    for (let i = 1; i <= 5; i++) {
        console.log("I can count to " + i)
    }
    
    다음은 위의 사이클에서 발생하는 상황을 상세하게 분석한 표입니다.; i레코드 선언
    1
    맞다
    "1까지 셀 수 있어요".
    2
    맞다
    "나는 2까지 셀 수 있어".

    맞다
    "3까지 셀 수 있어요".
    4
    맞다
    "4까지 셀 수 있어요".
    5
    맞다
    "5까지 셀 수 있어요".
    6
    거짓
    무한순환도 i <= 5순환에서 발생한다.무한 순환의 한 예는 위와 같은 예를 사용하지만 세 번째 표현식을 for로 변경한다.i--i--가 줄어들고 있기 때문에 ii부터 1로, 그리고 0-1로 변한다.i <=5true로 계속 평가될 것이다. i는 시종일관5보다 작거나 같기 때문이다.
    //Infinite loop
    for (let i = 1; i <= 5; i--) {
        console.log("I can count to " + i)
    }
    

    하다while 순환


    어떻게 하지...while 순환과 while 순환은 매우 비슷하다.do...while 순환의 구조는 다음과 같다.
    do {
        statement
    } while (condition);
    
    이 순환에서 발생하는 첫 번째 일은 집행문이다.이런 상황이 발생하면condition 검사를 받는다.condition의 계산 결과가 true라면 이 문장은 다시 실행될 것이다.이 문장은 condition 계산 결과가 false 될 때까지 계속 실행될 것이다.do...while 순환과 while 순환 사이의 주요 차이점은 문장이 항상 최소한 한 번 집행되는 데 있다.
    예를 들어 booksRead라는 변수를 10와 같이 초기화합시다.우리는 '나는 올해 X권의 책을 읽었다' 를 콘솔에 기록하기를 희망하는데, 그중 XbooksRead 의 값이다.그런 다음 조건을 booksRead < 14로 설정합니다.주의: 아래의 예에서, 컨트롤러가 올해 읽은 책의 수를 기록할 때, 나는 문자열로 삽입값을 사용합니다.문자열 보간은 JavaScripttemplate literals에서 사용됩니다.
    let booksRead = 10;
    do {
        console.log(`I read ${booksRead} books this year`);
        booksRead++;
    } while (booksRead < 14);
    
    다음은 위의 사이클에서 발생하는 상황을 상세하게 분석한 표입니다.booksRead레코드 선언booksRead < 1410
    "올해 책 10권 읽었어요".
    맞다
    11
    "올해 11권 읽었어요".
    맞다
    12
    "올해 12권 읽었어요".
    맞다
    13
    "올해 13권 읽었어요".
    맞다
    14
    거짓do...while 순환을 사용할 때 무한 순환을 만들 수 있는 방법은 조건에서 검사하는 변수를 증가하지 않는 것이다.상기와 같은 예시를 사용하여 만약에 점차적으로 증가하지 않는다booksReadbooksRead는 영원히 10에 유지될 것이다. 이것은 조건booksRead < 14이 시종true이라는 것을 의미한다.
    //Infinite loop
    let booksRead = 10;
    do {
        console.log(`I read ${booksRead} books this year`);
    } while (booksRead < 14);
    

    위하다순환하다


    A는... 이다.in-loop은 JavaScript의 객체와 함께 사용됩니다.구조는 다음과 같습니다.
    for (variable in object) {
        statement
    }
    
    for...in 대상의 모든 속성(또는 키)에서 반복 변수를 순환한다.모든 속성에 대해 이 문장을 실행합니다.순환은 속성 이름을 모르고 대상의 모든 속성에 접근할 수 있도록 합니다.for...in 순환은 임의의 순서로 대상의 속성을 교체한다.따라서 MDN documentation에 따라 "현재 방문 중인 속성을 제외하고 교체 기간에 대상에서 속성을 추가, 수정 또는 제거하지 않는 것이 좋다."너도 사용해서는 안 돼...그룹이 있는 순환 중입니다.
    예를 들어, 만약 당신이 그날 먹은 밥을 열거한 대상이 있다면, 당신은 당신이 먹은 밥을 모두 기록하고 싶다.이 대상은 foodIAte이라고 불린다.for...in 순환을 사용하면 매 끼니의 이름과 무엇을 먹었는지 열거할 수 있습니다.
    const foodIAte = {
        breakfast: 'eggs',
        lunch: 'salad',
        dinner: 'pizza'
    };
    
    for(const meal in foodIAte) {
      console.log(`For ${meal}, I ate ${foodIAte[meal]}.`);
    };
    
    다음은 위의 사이클에서 발생하는 상황을 상세하게 분석한 표입니다.meal foodIAte[meal]레코드 선언
    아침 식사
    달걀.
    아침에 나는 계란을 먹는다.
    점심
    샐러드
    점심에 나는 샐러드를 먹었다.
    저녁 식사
    피자
    저녁에 피자 먹었어요.

    위하다순환수


    마지막 순환은...순환의 일부분.for...of 순환은iterable 대상에 사용할 수 있으며 수조, 매핑, 집합, 문자열and more을 포함한다.구조는 다음과 같습니다.
    for (variable of iterableObject) {
        statement
    }
    
    for...of 순환은 iterableObject에서 교체되고 iterableObject에서 각 속성의 값에 대해 문장을 실행한다.for...in 순환 교체 속성 이름, for...of 순환 교체 속성 값.
    예를 들어, 배열이 있다고 가정하고 해당 배열의 값을 콘솔에 기록하십시오.
    const array = [5, 10, 15];
    for (const value of array) {
        console.log(value);
    }
    
    위의 루프에는 콘솔 로그5, 10, 15가 표시됩니다.
    문자열이 있다고 가정하고 콘솔에서 각 문자열의 값을 기록해 두십시오.
    const string = "cat";
    for (const value of string) {
        console.log(value);
    }
    
    위의 루프에는 콘솔 로그c, a, t가 표시됩니다.
    JavaScript의 순환에 대해 궁금한 점이나 다른 생각이 있으면 댓글로 알려 주세요.

    리소스:

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols
  • https://www.w3schools.com/js/js_loop_for.asp
  • https://www.freecodecamp.org/news/javascript-loops-explained-for-loop-for/
  • https://www.javascripttutorial.net/javascript-for-in/
  • 좋은 웹페이지 즐겨찾기