고슴맨쉬
망치와 공(空)
고슴맨쉬
  • 분류 전체보기 (155)
    • 💡 UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • 🟨 JavaScript (66)
      • 개념 (42)
      • 정리 (2)
      • 문제풀기 (프로그래머스, 코딩애플) (15)
      • 응용하여 자동화or문제해결하기 (2)
      • 기타 (5)
    • ⚛️ React (49)
      • 개념 (27)
      • 개념(Redux) (3)
      • 정리 (4)
      • 문제풀기 (코딩애플: React) (15)
    • 📘 TypeScript (10)
      • 개념 (8)
      • 문제풀기 (코딩애플) (2)
    • 🌐 HTML,CSS (18)
      • 실무에서 자주 발생한 오류들 (10)
      • 뒤늦게 알아서 뼈아픈 유용한 CSS (6)
      • 기타 자주 쓰는 CSS (2)
    • 💻 CS (8)
      • CS (5)
      • 정규표현식 (2)
      • Git,Github (1)

태그

  • axios
  • json
  • 삼항연산자
  • UXUI
  • JavaScript
  • redux
  • react
  • state
  • CS
  • object
  • CSS
  • 프로그래머스
  • 오류
  • class
  • TypeScript
  • array
  • Props
  • useEffect
  • 코딩애플
  • Ajax
전체 방문자
오늘
어제
hELLO · Designed By 정상우.
고슴맨쉬

망치와 공(空)

🟨 JavaScript/개념

[mdn, 코딩애플 등] for, forEach, for in

2023. 1. 31. 16:03

for

일반적으로 지정된 횟수만큼 반복할 때 사용한다. 예를 들어 배열의 인덱스를 기반으로 반복을 수행해야하는 경우에 사용할 수 있다.

forEach

forEach문은 배열을 순회할 때 사용한다. forEach문은 배열의 각 요소에 대해 함수를 실행한다. forEach문은 첫번째 파라미터인 element를 기준으로 index를 받아오기 때문에 index로 array에 접근하는 것은 비효율적이다.
또한 break, continue 등의 제어문을 사용할 수 없다.

화살표함수 버전/일반버전

화살표함수를 쓰면 함수 내의 this값을 바깥에서 가져와 쓰기 때문에 주의.

const array = ['a', 'b', 'c'];

array.forEach(element => console.log(element));
const array = ['a', 'b', 'c'];

array.forEach(function() {
    console.log(element);
});

forEach의 파라미터

const array = ['a', 'b', 'c'];

array.forEach(function(element, index, array) {
    console.log(element); // a b c
    console.log(index); // 0 1 2
    console.log(array); // (3) ['a', 'b', 'c']
});
  1. 첫번째 파라미터는 array 안의 값,
  2. 두번째 파라미터는 array 내 index값 (0부터 1씩 증가하는 정수),
  3. 세번째 파라미터는 순회중인 array를 나타낸다.

for in

for in은 object 다룰 때 쉽다.

object에 쓰기

const object = { a: '사과', b: '배', c: '감' };

for (var property in object){
  console.log(property); //a b c
  console.log(object[property]); //사과 배 감
}

array에 쓰기

let students = ['흥민', '영희', '철수', '재석'];

for(let student in students){
    console.log(student); // 0 1 2 3
    console.log(students[student]); // 흥민 영희 철수 재석
};

출처 : 코딩애플 https://codingapple.com/ / MDN https://developer.mozilla.org/ko/

저작자표시 비영리 동일조건 (새창열림)

'🟨 JavaScript > 개념' 카테고리의 다른 글

[코딩애플] Local Storage 사용법 (Session Storage, IndexedDB, Cookies, Cache Storage)  (0) 2023.04.13
[코딩애플] ajax로 서버와 데이터 주고받기 (1)  (0) 2023.03.27
[코딩애플,mdn] js로 html 생성하는 법 (appendChild, createElement, insertAdjacentHTML 등)  (0) 2023.01.18
[코딩애플] 자료형 : Array, Object (특징과 차이점)  (0) 2023.01.18
[코딩애플,mdn 등] 이벤트버블링과 이벤트캡쳐링 및 관련 유용한 함수들  (0) 2023.01.16
    '🟨 JavaScript/개념' 카테고리의 다른 글
    • [코딩애플] Local Storage 사용법 (Session Storage, IndexedDB, Cookies, Cache Storage)
    • [코딩애플] ajax로 서버와 데이터 주고받기 (1)
    • [코딩애플,mdn] js로 html 생성하는 법 (appendChild, createElement, insertAdjacentHTML 등)
    • [코딩애플] 자료형 : Array, Object (특징과 차이점)
    고슴맨쉬
    고슴맨쉬
    부수되 집착하지 않고, 이해하되 머무르지 않기

    티스토리툴바