자바스크립트 반복문 - for, for in, for of, forEach, map, filter

 자바스크립트 반복문 

for, for in, for of, forEach, map, filter

for문에는 종류가 많이 있습니다. for, for in, for of, forEach 말고도 map이나 filter 함수도 있지만 이건 나중에 알아보고 for문들을 먼저 알아보겠습니다.

for문

for문은 흔히 알고 자주 사용합니다. 조건문이 거짓이 될 때 까지 반복문을 수행합니다.

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

    //수행할 코드

}

세미콜론 ; 으로 구분합니다.

초기문 - 보통 1이나 0으로 초기설정을 합니다. 초기문을 for문 바깥에서 선언해서 그 변수를 초기문으로 쓸 수 있습니다.

조건문 - 조건을 검사합니다. 만약 조건문이 참(true)라면 거짓(false)가 될때까지 실행합니다.

증감문 - 초기문에서 작성한 초기값이 for문이 반복 될 때 마다 증감합니다.

반복문 중에서 가장 빠르고 모든 자료형에 대해 사용이 가능합니다.

for (let i = 0; i < 10; i++) {

  console.log(i); //0123456789

}

변수를 let으로 설정하면 for문 바깥에서 접근 할 수 없습니다. var 키워드를 쓸 수 있지만 거기에 대한 설명은 아래 링크에서 확인 할 수 있습니다.

변수 var, let, const

for in

for in문은 객체의 속성(프로퍼티)에 접근하여 반복문을 수행합니다.

let person = {

  name: "kim",

  age: 30,

};

for (let i in person) {

  console.log(i); // name, age

console.log("person", person[i]); // kim, 30

}

객체에 접근해야하는 만큼  for 반복문들 중에서 성능이 제일 속도가 느립니다.

for of

for of문은 ES6에 추가된 새로운 반복문입니다. 반복이 가능한 객체를 순회합니다.

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

const array1 = ["a", "b", "c"];

for (const element of array1) {

  console.log(element); // a b c

}

 array1 배열의 값을 element에 하나씩 담아오는 개념이라고 알면 될 것 같습니다.

성능면에서도 준수하고 문자열 'hello'도 for of문을 사용하면 h, e, l, l, o 이렇게 하나씩 꺼내서 반복문을 수행 할 수 있습니다.

forEach

forEach는 배열에서 사용하고 다른 for문들과 달리 매개변수로 콜백함수를 받아와서 배열을 순회합니다.

const array1 = [1, 2, 3];

let forEach = array1.forEach((data) =>

console.log(data * 2));//2,4,6

console.log("forTest", forEach); //undefined

console.log("forArray", array1); // [1, 2, 3]

콜백함수의 인자는 array1의 요소를 받아옵니다. array1에 있는 배열의 하나하나의 요소라고 생각하면 될 것 같습니다. 원본배열을 변경하지 않지만 콜백함수를 통해 원본 배열을 변경 할 수 있습니다.

forEach 메서드의 반환값은 언제나 undefined입니다.

map

map도 마찬가지로 배열에서 사용하고 forEach문과 비슷하지만 map함수는 요소값을 새로운 배열을 반환합니다.

const array1 = [1, 2, 3];

let map = array1.map((data) => data * 2);

console.log("map", map); // [2, 4, 6]

console.log("array1", array1); // [1, 2, 3]

forEach은 단순히 반복문을 대체하기 위한 함수이고 map은 요소값을 다른 값으로 새로운 배열을 반환하는 차이점을 가지고 있습니다. 

React를 해보셨다면 component 내에서 for문이나 if문을 쓸 수 없고 대신에 map 함수나 삼항연삼자를 써보셨을겁니다. React에서는 컴포넌트 바깥에서는 for문을 쓸 수 있지만 component 안에서는 for문을 쓸 수 없습니다.

filter

filter도 배열에서 사용하고 콜백함수에서 만족하는 조건의 요소만 모아서 새로운 배열로 반환합니다. 

const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let filter = array1.filter((data) => data < 5);

console.log(filter); // [1, 2, 3, 4]

console.log(array1); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

조건식이 복잡한 코드에 많이 유용합니다. 복잡한 if문보다 훨씬 간결하고 새로운 배열로 반환하기 때문에 기존 배열에 아무런 영향이 없습니다.

반복문에 대해서 간단하게 설명했지만 사실 실제로 써보기 전까지는 잘 와닿지 않아서 포트폴리오를 만들면서 이해를 많이 했습니다.

React로 작업을 하다보니 map, filter를 제일 많이 썼습니다. 자바스크립트 기초를 다 올리고나면 React에서 실제로 쓰는법을 알아보겠습니다.