[JavaScript] 반복문

정진우·2024년 5월 14일
JavaScript
0

JavaScript

목록 보기
9/20
post-thumbnail

반복문

반복문은 프로그램에서 동일한 코드 블록을 여러 번 실행하는 데 사용됩니다. 이를 통해 반복적인 작업을 자동화하고 코드의 중복을 줄일 수 있습니다.

반복문의 종류

  1. for 문
  2. while 문
  3. do...while 문
  4. for...of 문
  5. for...in 문

for 문

  • 초기화, 조건, 반복 실행문, 반복 후 작업으로 구성됩니다.
  • 주로 반복 횟수가 명확할 때 사용됩니다.
// for (시작조건; 종료조건; 변화조건;) {
     // 반복 실행될 코드
// }
for (let i = 0; i < 3; i += 1) {
  // 반복 실행될 코드
}
  • 시작조건 : 반복문 시작 전에 단 한번 실행되는 초기화 구문입니다.
  • 종료조건 : 각 반복마다 평가되는 조건입니다. 조건이 true이면 반복이 계속됩니다.
  • 변화조건 : 각 반복이 끝난 후 실행되는 코드입니다.

한번 써보자 - 1

const ulEl = document.querySelector("ul");

for (let i = 1; i <= 10; i += 1) {
  // 반복 실행될 코드
  const li = document.createElement("li");
  li.textContent = `list-${i}`;
  if (i % 2 === 0) {
    li.addEventListener("click", function () {
      console.log(li.textContent);
    });
  }
  ulEl.appendChild(li);
}

  • 시작조건 : let i = 1 변수 i를 선언하고 1으로 초기화합니다. 이것은 반복문의 초기값을 설정하는 부분입니다.
  • 종료조건 : i < 10 이 부분은 for문이 얼마나 반복될 것인지를 결정하는 조건을 작성하는 부분입니다. 이 조건이 참이면 실행됩니다.
  • 변화조건 : i += 1 이 부분은 반복문이 한 번 실행될 때마다 i가 1씩 증가하도록 합니다.
  • 이 코드의 반복문은 i 값이 10이 되는 순간 중단됩니다. <li>태그를 생성하고, 이 태그의 텍스트로 list-${i}를 설정합니다. i는 1부터 시작합니다. if를 사용하여 i이 짝수인 경우 li의 클릭 이벤트를 실행합니다. 이 클릭 이벤트는 li 태그의 텍스트를 콘솔에 로그합니다. 그리고 생성된 li태그를 ul 태그에 추가합니다.

한번 써보자 - 2

const animals = [
  "Aardvark",
  "Aardwolf",
  "African Elephant",
  "African Tree Pangolin",
  "Alligator",
  "Alpaca",
  "Anteater",
  "Antelope",
  "Ape(s)",
  "Arabian Horse",
  "Armadillo",
  "Arthropod(s)",
  "Asian Elephant",
  "Aye-Aye",
  "Baboon",
  "Badger",
  "Bandicoot",
];

// 'for' 반복문을 사용하여 'animals' 배열의 모든 요소를 순회합니다.
for (let i = 0; i < animals.length; i++) {
  // 각 반복마다, 현재 인덱스(i)와 그 인덱스에 해당하는 동물 이름을 콘솔에 출력합니다.
  console.log(i, animals[i]);
}

  • i < animals.length라는 조건은 i의 값이 animals 배열의 길이보다 작을 때만 참(true)입니다. 따라서 i의 값이 animals 배열의 길이와 같거나 크게 되면, 이 조건은 거짓(false)가 되어 for 반복문이 종료되게 됩니다. 모든 배열의 요소를 순회하고 반복문이 종료됩니다.

while 문

  • 주어진 조건이 ture인 동안 코드를 실행합니다.
  • 초기화와 반복 후 작업은 직접 지정해야 합니다.
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

한번 써보자 - 1

let count = 5;
while (count >= 1) {
  console.log(count);
  count--;
}
console.log("발사!");
  • 이 코드는 변수 count에 5를 할당한 후, while문을 사용하여 count가 1 이상일 경우에만 루프를 계속 실행합니다. 각 루프에서는 count의 값을 콘솔에 출력하고, count 값을 1씩 감소시킵니다. count 값이 0이 되면 루프가 종료되며, "발사!"가 콘솔에 출력됩니다.

한번 써보자 - 2

const SECRET = "BabyHippo";

let guess = prompt("enter the secret code...");
while (guess !== SECRET) {
  guess = prompt("enter the secret code...");
}
console.log("CONGRATS YOU GOT THE SECRET!!!");
  • 사용자가 BabyHippo라는 정확한 비밀 코드를 입력할 때까지 이 요청을 반복합니다. 사용자가 정확한 비밀 코드를 입력하면, CONGRATS YOU GOT THE SECRET!!! 라는 메시지가 콘솔에 출력됩니다.
  • guess !== SECRET는 사용자의 입력값(guess)이 SECRET(BabyHippo)과 같지 않다는 조건을 표현합니다. 사용자가 BabyHippo를 입력할 때까지 이 조건이 참이며, 그 때 조건이 거짓이 되어 while 반복문이 종료됩니다.

한번 써보자 - 3

추측 게임 만들기 - 사용자가 숫자를 추측하는 게임입니다.

let maxinum = parseInt(prompt("숫자 추측하기 게임! 숫자를 입력해주세요!!"));

while (!maxinum) {
  maxinum = parseInt(prompt("숫자를 입력하세요!"));
}

const targetNum = Math.floor(Math.random() * maxinum) + 1;
let count = 1;

let inPutval = prompt(
  "첫 번째 추측값을 입력하세요 'q'를 입력해 종료할 수 있습니다."
);

while (parseInt(inPutval) !== targetNum) {
  if (inPutval === "q") break;
  inPutval = parseInt(inPutval);
  if (inPutval > targetNum) {
    inPutval = prompt("높아요");
    count++;
  } else if (inPutval < targetNum) {
    inPutval = prompt("낮아요");
    count++;
  } else {
    inPutval = prompt(
      "다른거 말고 숫자를 입력해주세요. 'q'를 입력해 종료할 수 있습니다."
    );
  }
}

if (inPutval === "q") {
  console.log("수고하셨습니다.");
} else {
  console.log(`축하드려요~! ${count}번 만에 맞추셨어요!`);
}

각 부분이 어떤식으로 작동하는지 확인해보겠습니다.

let maxinum = parseInt(prompt("숫자 추측하기 게임! 숫자를 입력해주세요!!"));

// 사용자가 유효한 숫자를 입력할 때까지 계속해서 입력을 요청합니다.
while (!maxinum) {
  maxinum = parseInt(prompt("숫자를 입력하세요!"));
}
  • JavaScript에서 NaN, null, undefined, 0, 빈 문자열(""), false와 같은 값들은 falsy(거짓으로 취급되는) 값입니다.
  • parseInt 함수는 숫자로 변환할 수 없는 값을 처리하면 NaN을 반환합니다.
  • while (!maxinum)에서 maximum이 Falsy값을 가지게 되면 !maxinum은 ture가 되어서 while문이 계속 실행됩니다. 즉 코드는 사용자가 숫자(0이 아닌 정수)를 입력할 때 까지 계속 해서 입력을 요청하게 됩니다.
// 1부터 사용자가 입력한 최대 숫자(maxinum)까지의 범위에서 랜덤한 정수를 생성합니다.
const targetNum = Math.floor(Math.random() * maxinum) + 1;

// 사용자의 추측 횟수를 저장하는 변수입니다. 초기값은 1로 설정합니다.
let count = 1;
  • Math.random()은 0과 1 사이의 랜덤한 소수를 생성합니다.
  • 만약 maximum(사용자 입력값)이 10이라면, Math.random() * maximum의 결과는 0부터 9.9999.. 중 하나가 됩니다. 정수를 얻어야 하기 때문에 Math.floor() 함수로 소수점 아래를 버려주면서 0부터 9 사이의 정수를 얻을 수 있습니다.
  • 원하는건 1부터 10사이의 정수이기 때문에 +1을 해줘서 0이 아닌 1부터 시작, 최대값도 10이 되도록 조정해줍니다.
  • count변수는 사용자의 추측 횟수를 저장하는 변수이며 초기값은 1로 설정합니다.
// 사용자에게 첫 번째 추측값을 입력 받습니다. 'q'를 입력하면 게임을 종료할 수 있습니다.
let inPutval = prompt("첫 번째 추측값을 입력하세요 'q'를 입력해 종료할 수 있습니다.");

// 사용자의 추측값이 목표 숫자와 일치하지 않을 경우, 계속해서 새로운 추측값을 요청합니다.
while (parseInt(inPutval) !== targetNum) {
  if (inPutval === "q") break;
  // 사용자가 'q'를 입력하면 게임을 종료합니다.
  inPutval = parseInt(inPutval);
  // 사용자가 입력한 문자열 inPutval을 정수로 변환합니다.
  if (inPutval > targetNum) {
    inPutval = prompt("높아요");
    count++;
  } else if (inPutval < targetNum) {
    inPutval = prompt("낮아요");
    count++;
  } else {
    inPutval = prompt("다른거 말고 숫자를 입력해주세요. 'q'를 입력해 종료할 수 있습니다.");
    // 유효하지 않은 추측값 입력 시, 사용자에게 숫자를 입력하거나 'q'를 입력하여 종료하라는 메시지를 출력합니다.
  }
}
  • 사용자가 입력한 추측값과 목표 숫자(targetNum)를 비교하여, 추측값이 목표 숫자보다 크거나 작은 경우에는 적절한 메시지를 출력합니다.
  • 추측값이 목표 숫자보다 클 경우에는 높아요라는 메시지를, 추측값이 목표 숫자보다 작을 경우에는 낮아요라는 메시지를 출력하고, 숫자가 아닌 다른값을 입력했을 경우 다시 추측값을 입력하라는 프롬프트를 보여줍니다.
  • 사용자가 dfgdfg나 1235와 같이 목표값이 아닌 값을 입력하더라도, 사용자의 입력값이 목표값과 정확히 일치할 때까지 while문은 계속해서 실행됩니다.
  • count는 사용자가 목표 숫자를 맞추는 데 시도한 횟수를 저장합니다. 따라서 count++는 사용자가 새로운 추측을 할 때마다 시도 횟수를 1 증가시키는 것을 의미합니다.
// 사용자가 'q'를 입력하여 게임을 종료한 경우, "수고하셨습니다."라는 메시지를 출력합니다.
if (inPutval === "q") {
  console.log("수고하셨습니다.");
} else {
  // 사용자가 목표 숫자를 맞춘 경우, "축하드려요~! ${count}번 만에 맞추셨어요!"라는 메시지를 출력합니다.
  console.log(`축하드려요~! ${count}번 만에 맞추셨어요!`);
}

do...while 문

  • while 문과 비슷하지만, 반복 실행문이 먼저 실행되고 조건을 검사합니다.
  • do...while 문은 코드 블록을 최소 한 번 실행하는 것을 보장합니다.
  • 따라서 최소 한 번의 실행을 보장합니다.
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

한번 써보자

let userInput;
do {
  userInput = prompt("1 + 1 = ? (정답을 입력해주세요!)");
} while (userInput !== "2");
console.log("정답을 찾았습니다!");

  • do 에 작성된 코드는 최소 1번은 실행됩니다. 되므로 사용자에게 한 번 이상의 입력 기회를 제공합니다.
  • 이 코드는 사용자가 2를 입력할 때까지 1 + 1 = ? 라는 프롬프트를 반복해서 보여줍니다. do-while 루프는 do 블록의 코드를 최소한 한 번 실행한 후, while 문의 조건이 참인 경우에 루프를 계속 반복합니다. 올바른 값이 입력되면 반복문이 종료되고 "정답을 찾았습니다!"가 출력됩니다.
  • while 문의 조건이 거짓인 경우, do-while 루프는 다시 do 부분으로 돌아갑니다.

for...of 문

for...of 문은 반복 가능한(iterable) 객체의 각 요소에 대해 반복하는 데 사용됩니다. 배열, 문자열, Set, Map 등과 같은 내장된 반복 가능한 객체에 사용됩니다.

기본 문법

for (const element of iterable) {
  // 반복할 코드
}

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}
  • 배열 arr의 각 요소를 출력합니다. for...of 문을 사용하여 각 요소를 순회하고, 순회하는 동안 요소를 item 변수에 할당하여 출력합니다.
  • element는 반복 가능한 객체의 각 요소를 나타냅니다.
  • iterable은 배열, 문자열, Map, Set 등 반복 가능한 객체입니다.

한번 써보자 - 1

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const num of numbers) {
  if (num % 2 !== 0) {
    console.log(num);
  }
}

  • 이 코드는 배열 number의 요소중 홀수만을 출력하는데 for of문을 사용해서 각 요소를 순회하고, 순회하는 동안 조건에 맞는 요소 (홀수)를 num변수에 할당하여 출력합니다.

한번 써보자 - 2

const seatingChart = [
  ["Kristen", "Erik", "Namita"],
  ["Geoffrey", "Juanita", "Antonio", "Kevin"],
  ["Yuma", "Sakura", "Jack", "Erika"],
];

// for 문
for (let i = 0; i < seatingChart.length; i++) {
  const row = seatingChart[i];
  for (let j = 0; j < row.length; j++) {
    console.log(row[j]);
  }
}

// for of 문
for (let row of seatingChart) {
  for (let student of row) {
    console.log(student);
  }
}

/*
Kristen
Erik
Namita
Geoffrey
Juanita
Antonio
Kevin
Yuma
Sakura
Jack
Erika
*/
  • 2차원 배열인 seatingChart를 순회 하기 위해 for...of문을 두 번 사용하고 있습니다. 첫 번째 for...of문은 seatingChart의 각 행(배열)에 접근하고, 그 안에 두 번째 for...of문은 해당 행의 각 요소에 접근합니다. 각 행의 모든 학생들이 순서대로 출력 됩니다.
  • for...of문이 가독성 있어 보입니다.

한번 써보자 - 3

const greeting = "Hello";

for (const char of greeting) {
  console.log(char);
}
// 출력: H, e, l, l, o

for...in 문

  • for...in 문은 객체의 속성을 순회할 때 사용됩니다.
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    console.log(key);
}

한번 써보자

const obj = {a: 1, b: 2, c: 3, d: 4, e: 5 };
let count = 0;
for(let key in obj) {
count++
}
console.log(`속성개수: ${count}`)

  • obj의 속성 개수를 세어 출력합니다. for...in 문을 사용하여 객체의 각 속성을 순회하면서 count변수를 증가 시킵니다.

중첩 루프(Nested Loop)

중첩 루프는 루프 안에 또 다른 루프를 포함하는 구조입니다. 다차원 배열을 처리하거나 복잡한 반복 작업을 수행할 때 유용합니다. 중첩 루프는 일반적으로 외부 루프와 내부 루프로 구성됩니다. 외부 루프가 한 번 실행될 때마다 내부 루프가 처음부터 끝까지 실행됩니다.

중첩 for 루프

예제 - 1

const seatingChart = [
  ["Kristen", "Erik", "Namita"],
  ["Geoffrey", "Juanita", "Antonio", "Kevin"],
  ["Yuma", "Sakura", "Jack", "Erika"],
];

for (let i = 0; i < seatingChart.length; i += 1) {
  const row = seatingChart[i];
  console.log(`ROW #${i + 1}`);
  for (let j = 0; j < row.length; j += 1) {
    console.log(`  ${row[j]}`);
  }
}

  • 이 코드는 seatingChart라는 이차원 배열을 순회하면서 각 행과 각 행의 요소를 콘솔에 출력합니다. 외부 루프는 배열의 각 행(내부 배열)을 순회하고, 내부 루프는 각 행의 요소를 순회합니다. 각 행이 출력된 후에 해당 행의 모든 요소가 출력됩니다.

예제 - 2

for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(`${i} * ${j} = ${i * j}`);
  }
}
  • 구구단을 출력하는 코드입니다. 외부 루프는 1부터 9까지 숫자 i를 반복하고, 내부 루프는 각 i에 대해 1부터 9까지 숫자 j를 반복합니다. 각 반복에서 i와 j의 곱셈 결과를 콘솔에 출력합니다.

예제 - 3

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let sum = 0;

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    sum += matrix[i][j];
  }
}

console.log(sum); // 출력: 45
  • 0번째 행의 요소들을 합한 값인 6이 먼저 sum에 더해지고, 그 다음에 1번째 행의 요소들을 합한 값인 4+5+6 = 15가 sum에 더해집니다. 이런 식으로 모든 행의 요소들이 순차적으로 sum에 더해집니다.
  • i는 각 행에 접근하며, j는 각 행의 내부 요소에 접근합니다. matrix[i].length는 현재 행의 요소의 개수를 나타냅니다.

중첩 while 루프

let i = 0;
while (i < 3) {
  let j = 0;
  while (j < 3) {
    console.log(`i = ${i}, j = ${j}`);
    j++;
  }
  i++;
}
// 출력:
// i = 0, j = 0
// i = 0, j = 1
// i = 0, j = 2
// i = 1, j = 0
// i = 1, j = 1
// i = 1, j = 2
// i = 2, j = 0
// i = 2, j = 1
// i = 2, j = 2

중첩 for...of 루프

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (const row of matrix) {
  for (const value of row) {
    console.log(value);
  }
}
// 출력: 1, 2, 3, 4, 5, 6, 7, 8, 9

중첩 forEach 루프

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

matrix.forEach(row => {
  row.forEach(value => {
    console.log(value);
  });
});
// 출력: 1, 2, 3, 4, 5, 6, 7, 8, 9

break

break문은 반복문(for, while, do...while, switch)에서 사용되며, 특정 조건이 충족될 때 반복을 즉시 중단하는 역할을 합니다. 예를 들어 for 문 이나 while 문 내에서 특정 조건을 만족하는 요소를 찾았을 때 더 이상 반복을 계속할 필요가 없다면 break문을 사용하여 루프를 즉시 종료할 수 있습니다.

for (let i = 0; i < 1000; i++) {
  console.log(i);
  if (i === 100) break;
}
  • 0부터 1000까지의 숫자를 출력하는 for 문입니다. 근데 i가 100이 되면 break문이 실행되어 반복문이 중단됩니다. 따라서 이 코드는 0부터 100까지의 숫자만 출력하게 됩니다.
let input = prompt("Hey, say something!");
while (true) {
  input = prompt(input);
  if (input.toLowerCase() === "stop copying me") break;
}
console.log("OK YOU WIN!");
  • 사용자에게 Hey, say something!라는 메시지를 보여주고 사용자의 입력을 받습니다. 그리고 while (true)에 의해 무한 반복문을 시작합니다.
  • 반복문 안에는 사용자의 이전 입력을 다시 보여주면서 새로운 입력을 받습니다.
  • 사용자가 stop copying me를 입력하면 반복문이 중단(break)됩니다. 반복문이 중단되면 OK YOU WIN!가 출력됩니다.

객체의 속성을 순회하는 방법

  • 객체 리터럴(Object Literal)은 기본적으로 반복 가능한 객체(iterable)로 인식되지 않습니다.
  • iterable 객체는 Symbol.iterator 메서드를 가지고 있으며, 이 메서드는 반복자 객체를 반환합니다.
  • for...of 문은 iterable 객체를 순회할 수 있습니다.
  • 배열, 문자열, Map, Set 등은 iterable객체이며 for...of문을 통해 순회할 수 있습니다.
  • 기본 객체는 Symbol.iterator를 구현하지 않아서 for...of 문으로 직접 순회할 수 없습니다. 그러나 객체의 속성을 Object.keys(), Object.values(), Object.entries() 메서드로 배열로 변환하여 순회할 수 있습니다.
const testScores = {
  keenan: 80,
  damon: 67,
  kim: 89,
  shawn: 91,
  marlon: 72,
  dwayne: 77,
  nadia: 83,
  elvira: 97,
  diedre: 81,
  vonnie: 60,
};

for (let person of testScores) {
  console.log(person);
}
// 출력 : TypeError: testScores is not iterable

객체는 반복 가능한 객체가 아니기 때문에 for...of 문을 사용하여 직접 순회할 수 없습니다. 이로 인해 에러가 발생하게 됩니다. 이를 해결하기 위해, 객체의 속성을 Object.keys(), Object.values(), Object.entries() 메서드를 사용하여 배열로 변환하고 순회해 보겠습니다.

Object.keys()

Object.keys()를 사용하면 객체의 키를 배열로 얻을 수 있습니다. for...of 반복문과 함께 사용해서 각 키에 접근할 수 있습니다.

const testScores = {
  keenan: 80,
  damon: 67,
  kim: 89,
  shawn: 91,
  marlon: 72,
  dwayne: 77,
  nadia: 83,
  elvira: 97,
  diedre: 81,
  vonnie: 60,
};

console.log(Object.keys(testScores));


/*

[
  'keenan', 'damon',
  'kim',    'shawn',
  'marlon', 'dwayne',
  'nadia',  'elvira',
  'diedre', 'vonnie'
]

*/
  • testScores 객체의 모든 키가 하나의 배열로 콘솔에 출력됩니다.
const testScores = {
  keenan: 80,
  damon: 67,
  kim: 89,
  shawn: 91,
  marlon: 72,
  dwayne: 77,
  nadia: 83,
  elvira: 97,
  diedre: 81,
  vonnie: 60,
};

for (let key of Object.keys(testScores)) {
  console.log(key);
}

/*
keenan
damon
kim
shawn
marlon
dwayne
nadia
elvira
diedre
vonnie
*/
  • Object.keys(testScores)로 testScores 객체의 모든 키를 배열로 반환하고, for...of 루프를 사용하여 배열의 각 요소(객체의 키)를 문자열로 콘솔에 출력합니다.
const testScores = {
  keenan: 80,
  damon: 67,
  kim: 89,
  shawn: 91,
  marlon: 72,
  dwayne: 77,
  nadia: 83,
  elvira: 97,
  diedre: 81,
  vonnie: 60,
};

for (let key of Object.keys(testScores)) {
  console.log(`${key}: ${testScores[key]}`);
}

/*
keenan: 80
damon: 67
kim: 89
shawn: 91
marlon: 72
dwayne: 77
nadia: 83
elvira: 97
diedre: 81
vonnie: 60
*/
  • testScores[key]코드는 testScores 객체에서 key에 해당하는 값을 가져옵니다. 여기서 person은 각각의 사람 이름을 나타내는 키를 참조합니다. 따라서, ${testScores[person]}은 person 키(즉, 특정 사람의 이름)에 연결된 값을(즉, 그 사람의 점수) 출력합니다.

Object.values()

Object.values()를 사용하면 객체의 값을 배열로 얻을 수 있습니다. for...of 반복문과 함께 사용하여 각 값에 접근할 수 있습니다.

const testScores = {
  keenan: 80,
  damon: 67,
  kim: 89,
  shawn: 91,
  marlon: 72,
  dwayne: 77,
  nadia: 83,
  elvira: 97,
  diedre: 81,
  vonnie: 60,
};

console.log(Object.values(testScores));

/*

[
  80, 67, 89, 91, 72,
  77, 83, 97, 81, 60
]

*/
  • testScores 객체의 모든 값이 하나의 배열로 콘솔에 출력됩니다.
const testScores = {
  keenan: 80,
  damon: 67,
  kim: 89,
  shawn: 91,
  marlon: 72,
  dwayne: 77,
  nadia: 83,
  elvira: 97,
  diedre: 81,
  vonnie: 60,
};

let total = 0;

// Object.values() 메소드를 사용하여 testScores 객체의 모든 값을 배열로 가져옵니다.
let scores = Object.values(testScores);

// for...of 루프를 사용하여 scores 배열의 모든 점수를 total에 더합니다.
for (let score of scores) {
  total += score;
}

// 총 점수를 학생 수(점수의 개수)로 나누어 평균 점수를 구하고, 이를 콘솔에 출력합니다.
console.log(total / scores.length);

// 출력 : 79.7
  • scores.length는 학생의 수를 나타냅니다. 평균 점수를 계산하기 위해서는 총 점수를 학생의 수로 나누어야 하기 때문에 scores.length를 사용합니다.

Object.entries()

Object.entries()를 사용하면 객체의 키-값 쌍을 배열로 얻을 수 있습니다. for...of 반복문과 함께 사용하여 각 키-값 쌍에 접근할 수 있습니다. 

const testScores = {
  keenan: 80,
  damon: 67,
  kim: 89,
  shawn: 91,
  marlon: 72,
  dwayne: 77,
  nadia: 83,
  elvira: 97,
  diedre: 81,
  vonnie: 60,
};

for (let person of Object.entries(testScores)) {
  console.log(person);
}

/*

[ 'keenan', 80 ]
[ 'damon', 67 ]
[ 'kim', 89 ]
[ 'shawn', 91 ]
[ 'marlon', 72 ]
[ 'dwayne', 77 ]
[ 'nadia', 83 ]
[ 'elvira', 97 ]
[ 'diedre', 81 ]
[ 'vonnie', 60 ]

*/
  • Object.entries() 함수를 사용하면 객체의 각 키-값 쌍이 하나의 배열로 반환되고, console.log(person)를 실행하면, 각 키-값 쌍은 별도의 배열로 콘솔에 출력됩니다.

참고

profile
정진우
내가 바뀌지 않으면 아무것도 바뀌지 않는다 🔥🔥🔥
이전 포스트

[JavaScript] typeof

다음 포스트

[JavaScript] 스코프(Scope)

0개의 댓글