[Javascript] 배열 값 전체 출력하기 (for, forEach, for in, for of)

 

반복문을 사용하여

배열의 값을 출력하는 방법을 정리해보았습니다.

• for
• forEach()
• for in
• for of

 

for

// 배열 선언
const arr = ['A', 'B', 'C'];

// 배열 출력 (for 문)
for(let i = 0; i < arr.length; i++) {
  document.write(arr[i] + '<br>');
}

가장 기본적인 반복문인

for문을 사용하여 배열의 값을 출력하였습니다.

배열은 0부터 순서대로 index가 증가하기 때문에,

for문을 이용하여 index를 증가시키고,

이 index를 사용하여 배열에 순차적으로 접근하여

각각의 값을 출력하였습니다.

 

 

 

forEach()

// 배열 선언
const arr = ['A', 'B', 'C'];

// 배열 출력 (forEach)
arr.forEach(element => {
  document.write(element + '<br>');
})

forEach() 함수는

배열의 element에 대해 

파라미터로 입력받은 함수를 실행시키는 함수입니다.

따라서 위 예제에서는 forEach() 함수에 다음과 같은 함수를 파라미터로 전달하였습니다.

element => {
	document.write(element + '<br>');
}

이 함수는 배열 각 element를 파라미터로 받아서

그 값을 화면에 출력해 줍니다.

 

 

 

for in

// 배열 선언
const arr = ['A', 'B', 'C'];

// 배열 출력 (for in)
for(let index in arr) {
  document.write(arr[index] + '<br>');
}

for...in 은 객체의 속성을 순회하는 데 사용합니다.

배열 또한 객체의 한 종류이므로

for...in을 사용하여 객체의 key를 가져올 수 있습니다.

배열에서의 key는 index이므로

for...in 구문은 배열의 index를 가져오게 됩니다.

for문과 마찬가지로

이렇게 가져온 index로 배열의 element를 참조하여

배열의 값을 출력하였습니다.

 

for...in에 대해서는 지난 포스팅을 참조하세요.

[Javascript] 객체의 모든 key, value 값 가져오기 (for in 루프)

 

 

 

for of

// 배열 선언
const arr = ['A', 'B', 'C'];

// 배열 출력 (for of)
for(let element of arr) {
  document.write(element + '<br>');
}

for...of는 배열을 포함한 iterable 객체를 순회하는 반복문입니다.

for...in이 배열의 index를 참조하는 것과 달리

for...of는 배열의 element 값을 참조할 수 있습니다.

 

for...of에 대한 자세한 설명은 지난 포스팅을 참조하세요.

[Javascript] 반복문(4) - 배열 반복문 for...of (ES6)

 

---

 

 

지금까지 4가지 반복문을 이용하여

배열의 값을 출력하는 방법을 알아보았습니다.