for (고전적인 for문)

for문은 while문과 달리 초기식, 조건식, 증감식을 모두 포함하고 있는 반복문 입니다.
따라서 for문이 while문 보다 더욱 간결하게 작성할 수 있습니다.
for문을 구성하는 초기식, 조건식, 증감식은 각각 생략될 수 있습니다.
또한, 쉼표( , )를 사용하여 여러개의 초기식이나 증감식을 한번에 사용할 수도 있습니다.

for (let i = 1; i < 10; i++) {
	console.log(`i = ${i}`)
}
// (주의) 초기식에서 변수 선언 시, const를 쓰면 값 변경이 불가하여 에러 발생

while, do while

아래 코드는 while문으로 0~9까지 출력하는 코드입니다.

let i = 0
while (i < 10) {
	console.log(i) // 0~9
	i++
}

do while문과 while문의 차이는 do while문은 i의 값에 상관없이 한번은 실행된다는 것입니다.

var i = 0;
do {
	console.log(i) // 0~9
	i++;
} while ( i < 10 )

for in

for in문은 해당 객체의 모든 열거 가능한 프로퍼티 (enumerable properties)를 순회할 수 있도록 해줍니다.
이 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티의 이름을 지정된 변수에 대입합니다.
이렇게 루프 안에서 객체의 열거할 수 있는 프로퍼티를 순회할 수 있습니다.

const student = {
    name: 'joonseo Shin',
    job: 'Designer & Developer'
}

for (const key in student){
    console.log(`${key} : ${student[key]}`)
}
// name : joonseo Shin
// job : Designer & Developer

for of

for of문은 반복할수 있는 객체 (iterable objects)를 순회할 수 있도록 해주는 반복문입니다.
JS에서 반복할 수 있는 객체에는 list, tuple, range, 문자열(str), 딕셔너리, set 등이 있습니다.

const array = [10, 20, 30];
for (const item of arr){
    console.log(item) // 10, 20, 30 출력
}

for each

for each문은 배열에 사용가능한 메서드로 파라미터로 주어진 콜백함수를 배열 요소 각각에 대해서 실행합니다.
map 메서드와 유사하지만 차이점은 따로 return하는 값이 없다는 점입니다.

const myArr = [1, 2, 3, 4, 5]

const newMyArr = myArr.forEach((element, index, array) => {
	console.log(`요소: ${element}`)
	console.log(`index: ${index}`)
	console.log(array)
});

console.log(newMyArr); // undefined

for each메서드도 map메서드와 동일하게 파라미터로 콜백함수를 받는다.
그 콜백함수의 파라미터는 요소, 인덱스, 그리고 현재 for each메서드를 호출한 배열이다.
보통 세번째 배열은 잘 사용되지 않고 일반적으로 요소와 인덱스가 많이 사용된다.
앞에서 말했다시피, for each메서드는 따로 return하는 값이 없기 때문에 newMyArr에 undefined가 할당되는 것을 알 수 있다.
그래서 forEach 메서드는 변수에 할당하기 보다는 반복문이나 조건문과 같이 그냥 바로 호출되는 것이 일반적이다.

const myArr = [2, 3, 4, 1, 6]

myArr.forEach((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`)
    console.log(`index: ${index}`)
    console.log(array)
});
//출력결과

// 요소: 2
// index: 0
// [2, 3, 4, 1, 6]
// 요소: 3
// index: 1
// [2, 3, 4, 1, 6]
// 요소: 4
// index: 2
// [2, 3, 4, 1, 6]
// 요소: 1
// index: 3
// [2, 3, 4, 1, 6]
// 요소: 6
// index: 4
// [2, 3, 4, 1, 6]

map

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때, map메서드를 사용해보세요.
이 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공 map메서드를 사용하면 됩니다.

이 map메서드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다.
다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다.

let arr = [3, 4, 5, 6]

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3
}

console.log(arr) // [9, 12, 15, 18]

위 처럼 arr의 각 요소를 3을 곱해야 할 때, for문을 사용할 수 있습니다.

let arr = [3, 4, 5, 6]

let newArr = arr.map(element => {
	return element * 3
})

console.log(newArr); // [9, 12, 15, 18]

하지만 map메서드를 이용하여 각 요소에 3을 곱해주는 콜백함수를 통해 더욱 간단하게 같은 결과를 만들 수 있습니다.

이같은 map메서드는 객체 배열에서도 사용할 수 있습니다.

let users = [
	{ firstName: "Harry", lastName: "Kane" },
	{ firstName: "Daniel", lastName: "Longbottom" },
	{ firstName: "Jacob", lastName: "Black" },
]

let userFullnames = users.map(element => {
	return `${element.firstName} ${element.lastName}`
})

console.log(userFullnames)
// ["Harry Kane", "Daniel Longbottom", "Jacob Black"]

다음과 같이 map메서드를 사용하여 객체 배열을 순환하며 처리해서 firstName 및 lastName 값을 결합할 수 있습니다.

map함수의 완전한 메서드 구문은 이렇습니다.

arr.map(function(element, index, array){/*실행할 콜백함수*/}, this)

콜백함수 function()은 각 배열 요소에 대해 호출되며, map메서드는 언제나 현재의 element와 그것의 index, 그리고 전체 array 객체를 해당 요소에 전달합니다.

this인수는 콜백함수 내부에서 사용되게 됩니다. 기본적으로 이 값은 undefined입니다. 예를 들어, this값을 숫자 80으로 변경하는 방법은 다음과 같습니다.

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80)

근데 보통 element, index를 자주 씁니다.