코딩/Javascript

반복, 반복! 반복문을 쉽게 만들어보자. for문!

우당당쿵당콩탕 2023. 2. 23. 18:39
728x90
반응형

자바스크립트를 작성하다보면 반복되는 것이 많다는 것을 알 수 있습니다.

이것을 반복문이라 하는데 똑같은 것을 길게 늘여놓는 것을 자바스크립트는 싫어합니다. 물론 저도... 😅

이 반복문들은 불필요하기도 하고 가독성도 떨어지면서 관리하기도 쉽지 않아집니다.

그럴 때, for문을 사용하면 편하고 깔끔해집니다.

그럼 알아볼까요?

 

for문

자바스크립트에서 가장 많이 사용하는 반복문입니다. 이 친구는 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 매우 편리합니다.예를 들어 구구단 같은거죠.

반복문 for의 기본 형식

저는 for를 공부할 때 실행순서가 가장 헷갈렸는데요. 초기값은 처음에 한 번만, 나머지 조건과 명령 실행, 증가식을 반복한다고 생각했습니다. 예제를 한 번 살펴볼까요?

for문으로 배열 요소 표시하기

벌써 어지러운데요. 차례대로 천천히 살펴보면서 계산하면 이런 순서입니다. 덩어리, 덩어리로 살펴보겠습니다.

1번. 초기값을 실행하고 조건을 체크합니다. 조건이 성립되었으니 결과를 냅니다.
2번 i++는 1씩 증가시킨다는 뜻이 있기때문에 i를 증가시켜줍니다.
마지막입니다. 조건을 충족시키지 않았기때문에 flase가 뜨고 for문은 끝이납니다.

결과값 // Park. Kim. Lee. kang

이것이 반목문 for입니다. 간단하지만 어려운 친구. for문 말고도 forEach 문이 있습니다.


forEach문

이 친구는 프로그램 중에서 배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때, 배열의 요소를 가져와서 함수를 실행해야 할 때 편리하게 사용할 수 있습니다. 역시 기본형이 있습니다.

foreach의 기본형

 

junction(student)라는 함수를 정의 했는데 인자처럼 사용하는 함수를 콜백 함수라고 합니다.

 

foreach문에서 students 배열에 있는 각 요소를 student라고 정하고 student값을 화면에 표시하는 예제입니다.

결과값 // Park. Kim. Lee. kang

 


for...in문

다음은 for...in문인데요.

배열에서만 반복되는 반복문이 forEach라면 for...in문은 반복해서 객체의 값을 가져와서 처리할 수 있게 합니다.

for...in문은 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호([])를 사용합니다. 

 

for..of문

for...of문은 문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다.

앞에서 foreach문을 사용해서 작성했던 소스 코드를 다음과 같이 for...of문으로도 작성할 수 있습니다.


반복문에 대해서 알아보았는데요. 너무 어렵지만 그래도 힘내봅니다! 다들 화이팅!