[JavaScript] 자바스크립트 for 문, for in 문, for of 문

[JavaScript] 자바스크립트 for 문, for in 문, for of 문

for 문

for 문은 while 문과는 달리 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문입니다.

따라서 while 문보다는 좀 더 간결하게 반복문을 표현할 수 있습니다.

문법

for (초기식; 조건식; 증감식) {

    조건식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

}

for 문을 구성하는 초기식, 조건식, 증감식은 각각 생략될 수 있습니다.

또한, 쉼표 연산자(,)를 사용하면 여러 개의 초기식이나 증감식을 동시에 사용할 수도 있습니다.

for 문을 사용하면 앞선 예제의 while 문을 더욱 더 간결하게 표현할 수 있습니다.

See the Pen RwWzwPr by yunjunshin (@yjshin) on CodePen.

for / in 문

for / in 문은 일반적인 for 문과는 전혀 다른 형태의 반복문입니다.

for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있도록 해줍니다.

※ 열거할 수 있는 프로퍼티란 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티를 의미합니다.
이러한 프로퍼티들은 for / in 문으로 접근할 수 있게 됩니다.

※ 열거할 수 있는 프로퍼티란 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티를 의미합니다.
   이러한 프로퍼티들은 for / in 문으로 접근할 수 있게 됩니다.

이 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티의 이름을 지정된 변수에 대입합니다.

이렇게 대입받은 변수를 이용하면 루프 안에서 객체의 열거할 수 있는 프로퍼티에 순차적으로 접근할 수 있습니다.

문법

for (변수 in 객체) {

    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;

}

다음 예제는 for / in 문을 사용하여 배열의 요소에 접근하는 예제입니다.

See the Pen XWmLWMG by yunjunshin (@yjshin) on CodePen.

다음 예제는 for / in 문을 사용하여 객체의 프로퍼티에 접근하는 예제입니다.

See the Pen bGVPGWY by yunjunshin (@yjshin) on CodePen.

for / of 문

for / of 문은 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문입니다.

자바스크립트에서 반복할 수 있는 객체에는 Array, Map, Set, arguments 객체 등이 있습니다.

이 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입합니다.

for / of 문은 익스플로러에서 지원하지 않습니다.

문법

for (변수 of 객체) {

    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;

}

다음 예제는 for / of 문을 사용하여 배열의 요소에 접근하는 예제입니다.

See the Pen rNOENmP by yunjunshin (@yjshin) on CodePen.

다음 예제는 for / of 문을 사용하여 Set 객체의 프로퍼티에 접근하는 예제입니다.

See the Pen YzyozQq by yunjunshin (@yjshin) on CodePen.

감사합니다. 오늘도 행복한 하루 보내세요:)

---

추천글

• [JavaScript] 자바스크립트 문자열 자르기 slice, substring, substr
• [JavaScript] 자바스크립트 배열 요소 제거 또는 추가, 수정하는 방법
• [JavaScript] 자바스크립트 배열 추가 삭제하는 방법
• [JavaScript] 자바스크립트 문자열을 배열처럼 접근하기
• [JavaScript] 자바스크립트 if , else, else if 문