[Coding-Practice] 코드 최적화 - 3. for문과 forEach문

이전 시리즈 글 : 코드 최적화 - 1. this.~ 문의 사용 보러가기 

이전 시리즈 글 : 코드 최적화 - 2. 유효성 검사 보러가기

 

---

 

개요

• 개요는 시리즈 1과 동일 
• 이하에서는 for문과 forEach문에 대해 구체적으로 정리함

 

---

 

1. 문법 

• for 문

for (let j = 0; j < keypoints.length; j++) {
    let x = keypoint.x - 320;
    let y = keypoint.y - 240;
    console.log(`${keypoint.name}: [${x}, ${y}]`);
}

• forEach 문

res.keypoints.forEach((keypoint) => {                
  let x = keypoint.x - 320;
  let y = keypoint.y - 240;
  console.log(`${keypoint.name}: [${x}, ${y}]`);
})

 

---

 

2. 비교

	for문	forEach문
장점	- 인덱스 제어 가능 - break, continue 사용 가능 - 배열 뿐만 아니라 객체의 속성에 대해서도 순회 가능	- 가독성 향상
단점	- 가독성 떨어짐	- 인덱스 제어 불가 - break, continue 사용 불가 (반복문을 보다 효율적으로 만들어주는 구성 요소) - 일반적으로 객체의 속성 순회 어려움

 

• 객체의 속성 예시

// 객체 
const myObject = {
  name: 'John',
  age: 25,
  city: 'New York',
  gender: 'Male'
};

// 배열 
const myArray = ['name', 'age', 'city', 'gender']

• 객체 = myObject, 객체는 key-value로 이루어져 있음, 따라서 객체의 속성 = value = John, 25, New York, Male을 의미함
• 그러나 forEach 문은 배열을 순회하기에는 적합하지만, 객체의 속성까지 순회 불가
  : forEach 메서드는 처리 대상으로 배열을 기대, 그러나 객체는 key-value 쌍의 집합
• 보완책
  1. 객체의 key들을 배열로 얻기 → 각 key에 대응하는 value에 접근

// Object.keys() 사용
const keys = Object.keys(myObject);
keys.forEach(key => {
  console.log(`${key}: ${myObject[key]}`);
});

// 프로젝트에 적용 
const FINGER_INDICES = {
    thumb: [0, 1, 2, 3, 4],
    indexFinger: [0, 5, 6, 7, 8],
    middleFinger: [0, 9, 10, 11, 12],
    ringFinger: [0, 13, 14, 15, 16],
    pinky: [0, 17, 18, 19, 20],
};
Object.keys(FINGER_INDICES).forEach(finger => {
    const points = FINGER_INDICES[finger].map(idx => res.keypoints[idx]);
    this._drawPath(ctx, points, false);
});

     

      2. 배열 요소가 객체인 경우, 배열을 순회하면서 객체의 속성에 접근
          ( 1-1의 객체의 key들을 배열로 얻는 과정 생략하여 보다 직관적인 방법 )

/** this._result의 형태 
this._result: 
	0:
		box: {xMin: 133.~, yMin: 140.~, xMax: 346.~, yMax: 391.~, width: 213.~}
		keypoints: Array(468)
			[0 ... 99]  //배열 요소가 객체
				0: {x: 193.~, y: 315.~, z: -33.~, name: 'lips'}
				1: ... 반복
				2: ...
				3: ...
**/

this._result = result;
this._result.forEach((res, i) => {  
  res.keypoints.forEach((keypoint) => {  //res.keypoints는 배열, 배열의 각 요소(keypoint)에 대해 순회, i는 현재 요소의 인덱스
      if (keypoint.name != undefined) {
          let x = keypoint.x - 320;  //keypoint.x 및 keypoint.y 를 사용하여 현재 요소의 속성에 접근
          let y = keypoint.y - 240;
          console.log(`${keypoint.name}: [${x}, ${y}]`);
      }
  })
})

       

      3. for…in 문 사용

• 객체의 모든 속성에 대해 반복
• 그러나 hasOwnProperty 를 이용하여 객체 자체의 속성인지 확인하는 것이 중요
• 즉 프로토타입 체인을 따라 올라가서 속성을 가져오지 않고, 해당 객체의 속성에서만 확인하기 위함
• for…in 문과 형태가 유사한 for…of 문은 이터러블 객체를 순회하는 데에 유용함.
  ( 이터러블 객체 : 여러 내장 객체. Array, String, Map, Set )
• 그러나 객체는 원칙적으로 이터러블 객체가 아님. 단지 객체 내부에 배열이 있을 수 있는 것 뿐임

// for...in 문 적용
for (let key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    console.log(`${key}: ${myObject[key]}`);
  }
}

// 이터러블 객체에 for...of 문 적용 
const myString = "Hello";
for (const char of myString) {
  console.log(char);
}

const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);
for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}

const mySet = new Set([1, 2, 3, 4, 5]);
for (const element of mySet) {
  console.log(element);
}