For… 내 마음의 루프

Jan 27 2023
루프가 JavaScript에서 작동하는 방식 이해
처음으로 JavaScript를 선택하는 것은 확실히 어려울 수 있습니다. 특히 백그라운드 코딩이 없는 경우에는 더욱 그렇습니다. JavaScript를 배우고 있다면 JavaScript가 객체 지향 언어라는 것을 이해할 수 있을 것입니다. 즉, JavaScript는 객체와 해당 속성 및 메소드의 개념을 기반으로 합니다.

처음으로 JavaScript를 선택하는 것은 확실히 어려울 수 있습니다. 특히 백그라운드 코딩이 없는 경우에는 더욱 그렇습니다. JavaScript를 배우고 있다면 JavaScript가 객체 지향 언어라는 것을 이해할 수 있을 것입니다. 즉, JavaScript는 객체와 해당 속성 및 메소드의 개념을 기반으로 합니다. JavaScript로 작업하면 웹 페이지의 구조를 나타내는 DOM(문서 개체 모델)을 쉽게 조작할 수 있습니다. JavaScript는 종종 HTML 및 CSS와 같은 다른 기술과 함께 사용되어 귀하와 제가 매일 사용하는 대화형 웹 페이지를 생성합니다. 웹에서 가장 일반적으로 사용되는 프로그래밍 언어 중 하나인 JavaScript 전문가가 되기 위해 노력하면서 배워야 할 것이 많습니다.

이러한 복잡한 코딩 언어를 배우는 데는 어려움이 있습니다. JavaScript는 이벤트 기반이므로 코드 실행은 사용자 입력, 페이지 로드 및 네트워크 요청과 같은 이벤트를 기반으로 합니다. JavaScript의 성공적인 제작자가 되려면 다양한 개체 및 배열 메서드가 어떻게 작동하는지 잘 이해해야 합니다.

여러분의 어려움이 JavaScript 내에서 좀 더 복잡한 방법에 있는지 여부에 상관없이 기본으로 돌아가 JavaScript 내에서 다양한 유형의 for 루프가 작동하는 방식을 분석할 것입니다.

for…루프란 무엇입니까?

JavaScript의 for 루프는 지정된 횟수만큼 코드 블록을 반복할 수 있는 제어 구조입니다. for 루프의 기본 구문은 다음과 같습니다.

초기화 섹션은 루프 시작 시 한 번만 실행됩니다. 일반적으로 카운터 변수를 초기화하는 데 사용됩니다. 조건은 루프의 각 반복 전에 확인되며 true로 평가되면 루프 내의 코드 블록이 실행됩니다. 조건이 거짓으로 평가되면 루프가 종료됩니다. 증분 섹션은 각 반복이 끝날 때 실행되며 일반적으로 카운터 변수를 업데이트하는 데 사용됩니다.

예를 들어 다음 코드는 for 루프를 사용하여 1에서 10까지의 숫자를 콘솔에 출력합니다.

이 예제에서 초기화 섹션은 변수 i를 1로 초기화하고 조건 섹션은 i가 10보다 작거나 같은지 확인하고 증분 섹션은 각 반복 후에 i를 1씩 증가시킵니다. 그 결과 루프가 10번 실행되고 i 값이 반복될 때마다 콘솔에 출력됩니다.

for 루프 외에도 JavaScript에서 for…in 및 for…of 루프를 사용할 수 있습니다. 이 루프는 각각 개체와 배열을 반복하는 데 사용됩니다.

for…in 루프 이해

for…루프는 일련의 숫자나 배열을 반복하는 데 사용되지만 일반적으로 for…in 루프는 객체의 속성을 반복하려는 경우에 사용됩니다.

for…in 루프의 기본 구문은 다음과 같습니다.

변수는 루프가 반복될 때마다 생성되는 새 변수이며 객체의 속성 이름을 사용합니다. 객체는 속성이 반복될 객체입니다.

예를 들어 다음 코드는 for…in 루프를 사용하여 객체의 속성을 반복하고 해당 값을 콘솔에 출력합니다.

이 예제에서 "key" 변수는 루프의 각 반복에 대해 생성되며 개체 "person"의 속성 이름을 사용하고 키 변수를 사용하여 해당 속성의 값에 액세스합니다. 출력은 다음과 같습니다.

개체의 속성 순서가 보장되지 않을 수 있으므로 for…in 루프를 사용할 때 특정 순서에 의존하지 마십시오. 또한 for...in 루프는 for..of 루프 또는 forEach() 루프를 사용해야 하는 경우 배열에서 작동하지 않습니다.

for…of 루프 이해

JavaScript의 for…of 루프는 배열이나 문자열과 같은 반복 가능한 객체의 요소를 반복하는 데 사용됩니다.

for…of 루프의 기본 구문은 다음과 같습니다.

변수는 루프의 각 반복에 대해 생성되는 새 변수이며 iterable의 현재 요소 값을 사용합니다. iterable은 요소가 반복될 객체입니다.

예를 들어 다음 코드는 for…of 루프를 사용하여 배열의 요소를 반복하고 해당 값을 콘솔에 출력합니다.

이 예에서 변수 "숫자"는 루프의 각 반복에 대해 생성되며 배열의 현재 요소 값을 사용합니다. 출력은 다음과 같습니다.

forEach() 루프 이해

forEach() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행할 수 있게 해주는 배열 메서드입니다. forEach()는 객체에 사용할 수 없으므로 배열을 반복하려는 경우 훌륭한 방법입니다.

forEach 메서드의 기본 구문은 다음과 같습니다.

함수의 첫 번째 매개변수는 현재 요소이고 두 번째 매개변수는 현재 요소의 인덱스이며 세 번째 매개변수는 배열입니다. 함수 내에서 this 키워드로 사용할 선택적 thisValue 매개변수를 제공할 수도 있습니다.

예를 들어 다음 코드는 forEach 메서드를 사용하여 배열의 요소를 반복하고 해당 값을 콘솔에 출력합니다.

객체의 속성을 반복하려면 for…in 루프를 사용하거나 객체의 자체 속성 이름 배열을 반환하는 Object.keys() 메서드를 사용할 수 있습니다. 정상적인 루프로. 그런 다음 forEach 메서드를 사용하여 해당 배열을 반복할 수 있습니다.

이 예제에서는 forEach() 메서드를 실행할 수 있도록 Object.keys(person)를 사용하여 person 개체에서 배열을 반환했습니다.

For 루프가 래핑됨

결론적으로 for 루프는 배열과 객체를 반복하기 위한 JavaScript의 필수 도구입니다. 코드 블록을 여러 번 실행할 수 있는 방법을 제공하므로 배열 요소를 통해 반복하거나 객체의 속성을 반복하는 것과 같은 작업에 유용합니다.

JavaScript는 각각 고유한 사용 사례가 있는 다양한 유형의 for 루프를 제공합니다.

  • for 루프는 일련의 숫자 또는 배열을 반복하는 데 사용됩니다.
  • for…in 루프는 객체의 속성을 반복하는 데 사용됩니다.
  • for…of 루프는 배열이나 문자열과 같은 반복 가능한 객체의 요소를 반복하는 데 사용됩니다.
  • forEach() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행할 수 있게 해주는 배열 메서드입니다.

당면한 작업에 적절한 유형의 루프를 사용하면 코드를 더 읽기 쉽고 효율적으로 만들 수 있으며 오류 가능성이 줄어듭니다. 따라서 다양한 유형의 루프와 사용 시기를 이해하는 것은 JavaScript로 개발하는 데 있어 중요한 측면입니다.