[Javascript/jQuery] 반복문

* Javascript 반복문의 종류

1. for문 : 일반적인 반복문으로, 초기화 식, 조건식, 증감식을 이용하여 반복문을 실행

for (let i = 0; i < 10; i++) {
  console.log(i);
}

2. while문: 조건식이 true인 동안 반복문을 실행

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

3. do-while문: 일단 한 번 실행한 후, 조건식이 true인 동안 반복문을 실행

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);

4. for-in문: 객체의 프로토타입 체인 상의 속성을 포함하여 모든 속성을 반복하여 실행

주의사항 : 객체에 사용자가 정의한 메서드나 속성을 추가하는 경우, 의도하지 않은 결과를 초래할 수 있음

const obj = {a: 1, b: 2, c: 3};
for (let prop in obj) {
  console.log(prop, obj[prop]);
}

5. for-of문: 배열 또는 iterable 객체의 요소를 반복하여 실행

주의사항 : EC6에서 추가된 기능이기 때문에 IE에서 지원되지 않음

const arr = [1, 2, 3];
for (let elem of arr) {
  console.log(elem);
}

6. forEach문: 배열의 각 요소에 대해 지정된 콜백 함수를 실행

const arr = [1, 2, 3];
arr.forEach(elem => console.log(elem));

7. map문: 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고, 새로운 배열을 반환

const arr = [1, 2, 3];
const newArr = arr.map(elem => elem * 2);
console.log(newArr);

 

* forEach()와 map()의 차이점

- forEach()와 map() 모두 배열을 순회하며 각 요소에 대해 콜백 함수를 호출하는 JavaScript의 함수지만 반환 값이 다르다.
- forEach() 는 각 요소에 대해 콜백 함수를 호출하고, 반환 값은 undefined.

- 따라서 forEach() 는 배열의 각 요소를 단순히 반복하면서 콜백 함수에서 처리하는 작업을 수행한다. 이 함수는 원본 배열을 변경하지 않는다.
- map() 는 각 요소에 대해 콜백 함수를 호출하고, 각 콜백 함수의 반환 값을 모아 새로운 배열을 만든다.

- 따라서 map() 는 배열의 각 요소를 처리하면서, 각 요소를 새로운 값으로 변환하는 작업을 수행한다. 이 함수는 원본 배열을 변경하지 않는다.

const arr = [1, 2, 3, 4, 5];

// forEach() 메소드 사용
arr.forEach((num) => {
  console.log(num);
});
// 출력: 1 2 3 4 5

// map() 메소드 사용
const doubled = arr.map((num) => {
  return num * 2;
});
console.log(doubled);
// 출력: [2, 4, 6, 8, 10]

- 위 코드에서 forEach() 는 배열의 각 요소를 반복하면서 각 요소를 콘솔에 출력.

- map() 는 각 요소를 2배로 만들어 새로운 배열을 만든다. 따라서 doubled 배열은 [2, 4, 6, 8, 10]으로 출력된다.

 

* jQuery 반복문의 종류

주의사항 : jQuery 2.x 버전부터는 IE6/7/8 지원 중단, 3.x 버전부터는 IE9/10 지원 중단.

1. $.each(): 배열 또는 객체의 각 요소에 대해 콜백 함수를 실행

주의사항 : IE6/7/8 버전에서는 each() 함수가 느리게 동작하는 문제가 있을 수 있음

const arr = [1, 2, 3];
$.each(arr, function(index, value) {
  console.log(index, value);
});

const obj = {a: 1, b: 2, c: 3};
$.each(obj, function(key, value) {
  console.log(key, value);
});

2. $.map(): 배열 또는 객체의 각 요소에 대해 지정된 콜백 함수를 실행하고, 새로운 배열을 반환

const arr = [1, 2, 3];
const newArr = $.map(arr, function(value, index) {
  return value * 2;
});
console.log(newArr);

const obj = {a: 1, b: 2, c: 3};
const newObj = $.map(obj, function(value, key) {
  return value * 2;
});
console.log(newObj);

3. $.grep(): 배열에서 지정된 조건에 맞는 요소만 필터링

const arr = [1, 2, 3];
const filteredArr = $.grep(arr, function(value, index) {
  return value > 1;
});
console.log(filteredArr);

4. $.fn.each(): jQuery 객체의 각 요소에 대해 콜백 함수를 실행

$('li').each(function(index) {
  console.log(index, $(this).text());
});

5. $.fn.map(): jQuery 객체의 각 요소에 대해 지정된 콜백 함수를 실행하고, 새로운 jQuery 객체를 반환

const $lis = $('li');
const $newLis = $lis.map(function(index) {
  return $(this).text() + '!';
});
console.log($newLis);

 

* Break : 반복문 내에서 실행 중인 코드의 흐름을 강제로 종료

- Javascript 반복문

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

- jQuery 반복문 : jQuery의 each() 에서는 return false를 사용하면 반복문이 종료됨

$.each([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], function (index, value) {
  if (value === 5) {
    return false;
  }
  console.log(value);
});

 

* Continue : 반복문에서 특정 조건을 만족하는 경우, 현재의 반복을 중단하고 다음 반복으로 진행

- Javascript 반복문

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

- jQuery 반복문 : jQuery의 each() 에서 return true를 사용하면 다음 반복으로 진행됨

$.each([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], function (index, value) {
  if (value % 2 === 0) {
    return true;
  }
  console.log(value);
});

 

* jQuery 반복문의 'return'

- jQuery의 each() 에서 return 구문은 for 문에서의 break 구문과 유사한 역할을 한다. each() 는 내부적으로 for 문을 사용하여 배열이나 객체를 반복하고, 콜백 함수를 실행한다. 만약 return false; 구문을 사용하면, each() 는 내부적으로 for 문에서 break 구문을 호출하여 반복문을 중단합니다.
- each() 에서 return 구문을 사용하는 이유는, each() 에서 break 구문과 continue 구문을 지원하지 않기 때문이다. each() 는 단순히 반복문을 순회하는 역할을 하고, 각 요소를 처리하는 콜백 함수에는 return 구문을 사용하여 값을 반환할 수 있다.
- 또한, jQuery의 each() 이외 map(), grep(), filter() 등 다른 반복문들도 each() 와 유사하게 콜백 함수를 사용하며, return 구문을 사용하여 값을 반환할 수 있다. 따라서 jQuery에서는 return 구문을 사용하는 것이 일관성 있는 코딩 스타일을 유지하기 위한 선택이었다.

 

* 콜백과 클로저

- 콜백 : 다른 함수에 인수로 전달되는 함수

- JavaScript에서 콜백 함수는 일반적으로 비동기 작업을 처리하거나, 이벤트 핸들러 등을 등록할 때 사용된다. 콜백 함수는 함수의 인수로 전달되므로 함수 내에서 호출되고, 이 때 콜백 함수 내에서 함수 외부의 변수를 참조할 수 있다. 이때 콜백 함수 내에서 함수 외부의 변수를 참조할 때 클로저(closure) 개념이 적용된다.
- 클로저 : 함수가 정의될 때 함수 내부에서 참조되는 변수들이 함수가 반환된 이후에도 계속해서 유지되는 것

- 클로저를 사용하면 함수 외부에서 정의된 변수를 함수 내부에서 계속해서 참조할 수 있다. 이를 이용하여, 콜백 함수 내부에서 함수 외부의 변수를 참조하면서 그 값을 계속해서 유지할 수 있다.

// JavaScript에서의 콜백 함수와 클로저
function printNumbers(numbers) {
  numbers.forEach(function(num) {
    // 콜백 함수에서 외부 변수를 참조
    console.log(num);
  });
}

var numbers = [1, 2, 3, 4, 5];
printNumbers(numbers);

// jQuery에서의 콜백 함수와 클로저
$(document).ready(function() {
  var count = 0;
  
  $('#my-button').click(function() {
    // 콜백 함수에서 외부 변수를 참조
    count++;
    console.log('Button clicked ' + count + ' times');
  });
});

- 위 코드에서, forEach() 와 $().click() 함수의 인수로 전달된 콜백 함수 내부에서 외부 변수 num과 count를 참조하고 있다.

- 이때 콜백 함수는 함수의 인수로 전달되므로, forEach() 와 $().click() 함수가 호출되면서 각각의 콜백 함수가 실행된다. 콜백 함수 내부에서 외부 변수를 참조할 경우, 그 변수들의 값은 클로저를 통해 유지됩니다.

 

* Javascript 반복문? jQuery 반복문?

- jQuery의 반복문은 내부적으로 JavaScript의 반복문을 사용하기 때문에 큰 차이점은 없음. 하지만, jQuery의 반복문은 일반적인 for 반복문보다 코드가 간결하며, 브라우저 호환성이 좋음. 또한, each() 는 배열 뿐만 아니라 객체, jQuery 객체 등 다양한 데이터 타입에 대해서도 반복문을 처리할 수 있음.

- JavaScript의 반복문인 for는 기본적으로 모든 브라우저에서 지원되며, 일반적인 배열과 같은 데이터 구조에서 사용하기 적합.

- jQuery의 each() 함수는 배열뿐만 아니라 객체, jQuery 객체 등 다양한 데이터 구조에서도 사용이 가능하며, 코드의 간결성과 가독성이 높고, jQuery의 함수형 프로그래밍 스타일에 적합
- 따라서, JavaScript의 반복문은 일반적인 배열과 같은 데이터 구조에서 사용하고, jQuery를 사용하는 경우에는 each() 함수를 사용하여 코드를 더 간결하고 가독성 높게 작성하는 것이 좋다.