[JS] for문 / for in문 / for of문 / forEach문

for문

: 조건이 true면 코드 실행

for (let i = 0;  i < n;  i++) {
                 ...
}

구성 요소
begin	i = 0	시작 숫자 / 반복문 진입 시 딱 한 번 실행된다.
condition	i < n	반복 조건 / false면 반복문을 멈춘다.
body	alert(i)	본문 / 조건식이 true일 동안 실행, 출력
step	i++	본문 출력 후 실행

 

for (let i = 0; i < 3; i++;) {
  alert(i);
}

 

 

 

continue;

: 현재 반복문을 빠져나온다. (다음 반복으로 넘어간다.)

for (let i = 0; i < 10; i++) {
  if ( i % 2 == 0) continue; // 짝수면 반복 중단, 다시 위의 for문으로 올라간다.
  
  alert(i); // 1, 3, 5, 7, 9를 출력
}

 

---

 

in문

: key 값이 object(객체) 안에 있는지 확인

key in object

 

• prototype(부모) 안에 내용까지 확인해줌
  (객체의 속성(property) 포함 여부 확인)

const javaScript = {
  creator: 'Brendan Eich',
  createAt: '1995.05',
  standardName: 'ECMAScript',
  currentVersion: 2023,
};

console.log('valueOf' in javaScript); // true

 

 

 

 

hasOwnProperty

: key 값이 객체 자신의 속성인지 확인하는 방법

객체.hasOwnProperty('키값')

 

• (in문과는 달리) 객체 안의 내용만 정확하게 확인 O
• 그러나 객체의 속성이 덮어쓰여질(훼손될) 위험이 있다.

javaScript.hasOwnProperty('key');

 

 

 

 

call()

: 다른 메서드 빌려쓰기

Object.prototype.hasOwnProperty.call(객체, '키값')

 

• 객체의 속성이 덮어쓰여질(훼손될) 위험이 적음👍

Object.prototype.hasOwnProperty.call(javaScript, 'key')

 

 

 

✨ 결론
☝ 자바스크립트 객체에서 in문을 사용하면 속성(사돈의 팔촌까지)까지 확인해서 찾음 
☝ 원하는 값만(사돈의 팔촌까진 X) 찾으려면 hasOwnProperty를 사용하면 되는데, hasOwnProperty만 사용하면 훼손될 위험이 큼 
👉 call()을 통해 우회적으로 메서드를 빌려씀

 

 

---

for in문

: 객체를 넣으면 객체의 key를 순환함

• 변수 👉 순환되는 객체를 담을 변수

for (변수 선언 in 객체) {
                ...
}

 

 

• value값 확인하기

객체[키]

console.log(javaScript[key]);

 

 

• 배열도 순회할 수는 있으나 사용 ❌
  - 배열의 정확한 순서를 보장해주지 않음 ❌
  - 성능 저하 ⬇

const tens = [10, 100, 1000, 10_000];

for (let key in tens) {
  console.log(key); // key 값
  console.log(tens[key]); // value 값
}

 

 

예시

const javaScript = {
  creator: 'Brendan Eich',
  createAt: '1995.05',
  standardName: 'ECMAScript',
  currentVersion: 2023,
  hasOwnProperty() {
    return '에휴'
  }
};

// 훼손된 객체 내용
Object.prototype.nickname = '호랑이';


for (let key in javaScript) {

  // 조상에 있는 nickname도 뜨는 것을 제거하기 위한 코드
  if (Object.prototype.hasOwnProperty.call(javaScript, key)) {
  
    console.log(key); // key값 확인
    console.log(javaScript[key]); // value값 확인
  }
}

/* 출력 결과
creator
createAt
standardName
currentVersion
hasOwnProperty */

 

 

 

 

✨ prototype에 메서드를 추가했는데 특정 메서드만 조회되는 이유

👉 enumerable(열거 가능한) 속성과 아닌 속성이 나눠져있기 때문

밝은 색: 열거 가능 / 어두운 색: 열거 불가능

 

 

• 옵션을 사용하면 조회가 가능하게 만들 수 있음

const obj = {}

obj.nickName = 'tiger'

// 속성 1개 정의
Object.defineProperty(obj, 'age', {
  value: 30,
  enumerable: true,
  writable: false,
  configurable: true
})

// 속성 여러 개 정의
Object.defineProperties(obj, {
  age: {
    value: 30,
    enumerable: true,
    writable: true
  }
})

 

 

---

for of문

:  iterable 요소(String, array)만 사용 가능

for (변수 선언 of 객체) {
                ...
}

 

 

• enumerable: 열거 가능한(순환, 조회 가능한)
• iterable: 반복 가능한 (String, array)
  for of 👉 iterable 요소(String, array)만 사용 가능 

const languages = [
  {
    id: 'ecma-262',
    name: 'JavaScript',
    creator: 'Brendan Eich',
    createAt: 1995,
    standardName: 'ECMA-262',
    currentVersion: 2022,
  },
  {
    id: 'java',
    name: 'Java',
    creator: 'James Gosling',
    createAt: 1995,
    standardName: null,
    currentVersion: 18,
  },
  {
    id: 'ecma-334',
    name: 'C#',
    creator: 'Anders Hejlsberg',
    createAt: 2000,
    standardName: 'ECMA-334',
    currentVersion: 8,
  },
];


// 특정 조건에서 건너띄기 (Java가 있으면 continue)
for (let value of languages) {
  let name = value.name;
  
  if (name.includes('Java') && name.length < 5) {
    continue
  } 
  
  console.table(value);
}

✨ 객체 내부에 (Symbol.iterator)가 있으면 [for of문] 사용 가능⭕

 

 

---

forEach

: 배열의 요소(아이템)를 각각 반복을 도는 반복문

배열.forEach(콜백 함수(item[, index, arr])) {
                  ...
}

 

• 값 반환 ❌
• item 👉 순환할 배열의 요소

[1, 2, 3].forEach(function(item) {
    console.log(`${index} : ${item}`)
})

// 출력 결과
0 : 1
1 : 2
2 : 3

 

 

• 사용하지 않는 매개변수는 _로 표현
  - item은 안 쓰고 index만 사용한다면 👉 (_, i)
  - 그냥 자리만 채우고 불러오지 않는거임

                        // index만 사용
[1, 2, 3].forEach(function(_, i, _) {
    console.log(`${index} : ${item}`)
})

 

 

 

• arguments는 유사배열이라 forEach문 사용 불가 ❌

✨ 유사 배열을 배열로 만들어서 반복문 수행하기(arguments ➡ array)
: 전개 구문(spread syntax)으로 arguments를 분해해서 배열로 만듦

[...arguments]

 

 

- Array.from를 사용하기도 함

: arguments를 배열로 만들어줌(arguments ➡ array)

Array.from(arguments)

let calculateTotal = function () {

  let total = 0;

  const arr = [...arguments];
  // 전개 구문(spread syntax)으로 arguments를 분해해서 배열로 만듦

// const arr = Array.from(arguments);
   // Array.from(arguments) => arguments를 배열로 만들어줌

  arr.forEach(item => {
    total += item;
  });

  return total;
};

const result = calculateTotal(1000, 5000, 2500, 4000, 2300);

 

 

---

 

while과 for 반복문