for 반복문 / for ...in 반복문 / for ...of 반복문 / forEach 반복문 이란?

 

명확하지 않은 반복문의 이론을 정리 해야겠다는 생각이 들었다. 

그중에서 제일 헷깔리는 반복문을 모와 하나하나 정리!

 

 

 

---

 

 

[자바스크립트 반복문 각각의 차이점 간단정리]
1. for와 for...in은 index 를 반환하고, for...of와 forEach는 값을 반환한다.
2. for...in은 주로 객체에서 사용하고, for...of는 배열에서 사용한다.
3. 속도는 for문이 가장 빠르다.

 

💖 for 반복문

1. for 반복문은 자바스크립트의 대표적인 반복문입니다.

2. for 반복문은 초기값부터 시작하여 조건식이 거짓인 상태가 될 때까지 loop문 내의 명령들을 반복적으로 수행합니다.
즉, 조건식이 참인 상태인 동안은 loop문 내의 명령을 반복 수행하다가 거짓이 되면 for문을 빠져나오고, 처음부터 조건식이 거짓인 상태이면 loop문 내의 명령을 수행하지 않습니다.

3. for 반복문을 각 반복이 시작하기 전에 조건을 확인합니다. 추가 세팅을 할 수 있습니다.

 

 

//for 반복문 기본 문법
for(초기값;조건;증감식) {
	반복 실행할 문장 (ture인 경우에만 실행)
    }

 

 

// for 반복문 예시
const todos = ["Buy Milk", "Check Business Mail", "Pilates Class"]

for(let i = 0; i < todos.length; i++) {
	console.log(`${todos[i]}`)
  }
    
 /* 
 [ for 반복문 결과 ]
 
 Buy Milk
 Check Business Mail
 Pilates Class
 */

 

 

---

 

💖 for ...in 반복문

1. for ...in 반복문은 객체(object)의 모든 열거할 수 있는 '프로퍼티(eunmerable properties)'을 순회 할수 있도록 도와줍니다. 

- 프로퍼티(Property) : 'Property' 는 속성 이란 뜻으로, JS에서는 객체 내부의 속성을 의미합니다.

- 열거할 수 있는 프로퍼티안 내부적으로 enmerable(셀수있는) 플래그가 true로 설정된 프로퍼티를 의미합니다.

 

 

enmerable : true

- enmerable : 객체자료형을 만들때 단순히 개발자가 적은 키밸류값만 저장되는 것이 아닙니다. 그 외에 숨겨진 속성 3개가 같이 저장됩니다. 

 

2. for ...in 반복문은 모든 객체에서 사용이 가능합니다. 또한 객체의 key값에 접근이 가능하고, value값에는 직접 접근이 불가능합니다.

 

//for ...in 반복문 기본 문법
for (const 반복변수 in 배열 or 객체) {
    문장
}

 

// for...in (객체순환)
let book = {
        title: "자바스크립트 완벽하게 이해하기",
        price: 32000,
        author: "훈이",
        publisher: "자바스크립트짱짱",
      };

//i(변수명은 임의변경 가능) in 객체명
for (const i in book) {
   console.log(i, book[i]);
}

 /* 
 [ for ...in 반복문 결과 ]
 
 title 자바스크립트 완벽하게 이해하기
 price 32000
 author 훈이
 publisher 자바스크립트짱짱
 */

 

 

 

3. for ...in 반복문을 배열요소 하나하나 꺼내서 특정문장을 실행할 때 사용한다.

 

// for ...in 반복문 예시
const todos = ["Buy Milk", "Check Business Mail", "Pilates Class"]

for(const i in todos) {
	console.log(`${i}번째 할 일 : ${todos[i]}`);
  }
    
 /* 
 [ for ...in 반복문 결과 ]
 
 0번째 할 일 : Buy Milk
 1번째 할 일 : Check Business Mail
 2번째 할 일 : Pilates Class
 */

 

 

 

---

 

 

💖 for ...of 반복문

1. for ...of 반복문은 배열(object)에서 요소의 값을 반복할때 안정적으로 사용할 수 있는 반복문입니다.

2. for ...of 반복문은 for ...in반복문과 다르게 반복 변수에 요소의 값이 들어갑니다.

 

//for ...of 반복문 기본 문법
for(const 반복변수 of 배열) {
	문장
    }

 

// for ...of 반복문 예시
const todos = ["Buy Milk", "Check Business Mail", "Pilates Class"]

for(const i of todos) {
	console.log(`${i}`});
  }
    
 /* 
 [ for ...of 반복문 결과 ]
 
 Buy Milk
 Check Business Mail
 Pilates Class
 */

 

 

 

3.  for ...of 반복문 에서 객체사용이 불가능합니다.

 

// for...of (배열순환) - 에러발생
let book = {
        title: "자바스크립트 완벽하게 이해하기",
        price: 32000,
        author: "훈이",
        publisher: "자바스크립트짱짱",
      };

for (const i of book) {
   console.log(i, book[i]);
}

 /* 
 [ for ...of 반복문 결과 ]
 Uncaught TypeError: obj is not iterable
 */

 

 

 

 

---

 

💖 for in 반복문과 for of 반복문의 차이점

🔊 for...in 과 for...of 구문은 모두 무언가 순회할 때 사용합니다. 주된 차이점은 순회 대상입니다.

- for...in 반복문 : 객체의 열거 가능한 속성(enumerable properties)을 임의의 순서로 순회합니다.

- for...of 반복문 : [Symbol.iterator] 속성을 가지는 객체의 값(value)을 순회합니다.

 

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {}; 

var iterable = [3, 5, 7]; 
iterable.foo = "hello"; 

//for...in 반복문
for (var key in iterable) { 
console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom" 
} 


//for...of 반복문
for (var value of iterable) {
console.log(value); // 3, 5, 7 
}

 

1. 모든 객체는

- Object.prototype.objCustom을 따라 objCustom 속성을 상속 받습니다.

- Array.prototype.arrCustom을 따라 Array인 모든 객체는 arrCustom속성을 상속받습니다.

 

2. iterable객체는 상속과 프로토타입체인을 따라 objCustom  과 arrCustom 속성을 상속받습니다.

 

 

//for...in 반복문
for (var key in iterable) { 
console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom" 
}

 

3. for...in 반복문의 정의를 따라 iterable객체의 열거 가능한 속성만을 임의의 순서로 출력합니다.

열거 가능한 속성이 아닌 3, 5, 7, hello를 출력하지 않는 이유는 이들 속성이 아니라 값이기 때문입니다.

 

 

for (const i in iterble) {
	if(iterble.hasOwnPropty(i)) {
    console.log(i) // [ console 결과값 ] 0, 1, 2, "foo" 
    }
 }

 

4. 3번과 유사하지만 열거 가능한 속성이 객체의 자체 속성인지 판단하는 hasOwnProperty()을 사용하고 있습니다. 따라서 0, 1, 2, foo 는 자체속성이기 때문에(상속x) 출력되지만, 상속받은 objCustom , arrCustom 은 출력되지 않습니다.

 

 

//for...of 반복문
for (var value of iterable) {
console.log(value); // 3, 5, 7 
}

 

5. for...of는 정의의 따라 iterble객체의 속성이 아닌 값을 출력합니다. 따라사 객체 요소인 3, 5, 7이 출력되었습니다.

 

 

 

 

 

---

 

💖 forEach (Array 메소드)

 

1. forEach는 해당 배열의 각 요소(element)에 대한 함수(콜백함수)를 한번씩 호출하는 메소드(method)입니다. 간단히 생각하자면 배열의 요소들을 반복호출해 주는 것으로 for문으로 처리해주는 것이라 생각하면 편합니다.

 

forEach를 사용하여 배열이나 Set.Map(Array, Set, Map)의 모든 값을 출력 하도록 할 수 있습니다.
하지만 forEach의 단점은 속도가 느리다는 것 입니다. 👉 처리 중간에 함수를 호풀하는 처리가 있기 때문.

2. forEach 의 콜백(callback)은 세가지 매개변수(parameter)를 받게 됩니다.
   ㄴ (currentValue , index , array)   <- 세가지 매개변수

 

 

//.forEach() 메소드 기본 문법
Array.forEach([currentValue],[index],[array])

// currentValue ::  처리할 현재요소
// index        ::  처리할 현재요소의 인덱스
// array        ::  forEach 를 호출한 배열

 

 

//forEach 예시
const todos = ["Buy Milk", "Check Business Mail", "Pilates Class"]

todos.forEach(function(element, index)) {
	console.log(`${index}번째 할 일 : ${element}`);
  });
    
 /* 
 [ forEach 결과 ]
 
 0번째 할 일 : Buy Milk
 1번째 할 일 : Check Business Mail
 2번째 할 일 : Pilates Class
 */

 

 

---