혼자 공부하는 자바스크립트 4장 - 배열, 반복문

반복문

배열

숫자, 문자열, 불과 같은 자료는 하나의 값만 가질 수 있지만, 배열을 사용하면 여러 개의 변수를 한 번에 선언해, 묶어서 활용할 수 있다.

 

생성

대괄호 []를 사용해 생성하고, 요소를 쉼표로 구분해 입력한다. 요소에는 숫자, 문자열, 불 값, 함수, 객체, 또 다른 배열 등 어떠한 종류의 자료형도 쓸 수 있다.

const array = [273, 'String', true, function() { }, {}, [273, 103]];        // undefined

array;        // (6) [273, "String", true, ƒ, {…}, Array(2)]

 

인덱스

요소의 순서를 인덱스라고 하며, 가장 앞에서부터 0, 1, 2... 순으로 매겨진다.

const numbers = [273, 52, 103, 32];        // undefined

numbers[0];        // 273
numbers[1];        // 52
numbers[1+1];        // 103, numbers[2]와 같다.
numbers[1 * 3];        // 32, numbers[3]과 같다.

배열의 변수 명은 일반적으로 복수형으로 짓는다.

인덱스를 입력할 때 단순 숫자뿐 아니라 계산식을 넣을 수 있다.

 

요소 개수 확인하기

배열의 length 속성을 활용한다.

const fruits = ["배", "사과", "키위", "바나나"];        // undefined

fruits.length;        // 4
fruits[fruits.length-1];        //"바나나"

4개의 요소를 가지고 있으므로 fruits.length는 4가 되지만, 인덱스는 0부터 시작하기에 fruits[fruits.length-1]을 해야 마지막 요소를 확인할 수 있다.

 

배열 뒷부분에 요소 추가하기

push() 메소드 사용

const todos = ["우유 구매", "업무 메일 확인하기", "필라테스 수업"];
todos;        // (3) ["우유 구매", "업무 메일 확인하기", "필라테스 수업"]

todos.push("저녁 식사 준비하기")        // 4, 추가된 요소를 포함한 요소의 개수를 출력한다.
todos.push("피아노 연습하기")        // 5

todos        // (5) ["우유 구매", "업무 메일 확인하기", "필라테스 수업", "저녁 식사 준비하기", "피아노 연습하기"]

 

인덱스 사용

자바스크립트에서 배열의 길이는 고정이 아니므로, 원하는 인덱스에 요소를 강제 추가할 수 있다.

이 때, 추가한 인덱스와 기존 인덱스 사이의 인덱스는 empty가 된다.

const fruits = ["사과", "배", "바나나"];
fruits[10] = "귤"

fruits        // (11) ["사과", "배", "바나나", empty × 7, "귤"]

length 속성을 활용하면 배열의 마지막 위치에 요소를 추가할 수 있다.

 

const fruits = ["사과", "배", "바나나"];

fruits[fruits.length] = "귤";

fruits = ["사과", "배", "바나나", "귤"]

 

배열 요소 제거

인덱스로 요소 제거

배열의 특정 인덱스에 있는 요소를 제거할 때는 splice()를 사용한다.

배열.splice(인덱스, 제거할 요소의 개수)

const items = ["사과", "배", "바나나"];
items.splice(2, 1);        // ["바나나"], items 배열의 2번째 인덱스로부터 1개 요소를 제거한다.

items;        // ["사과", "배"]

 

값으로 요소 제거

특정 값의 위치를 찾는 indexOf()메소드를 사용해서 값의 위치를 추출한 뒤 splice() 메소드를 사용한다.

const 인덱스 = 배열.indexOf(요소);배열.splice(인덱스, 1);

indexOf() 메소드는 배열 내에서 찾고자 하는 요소의 인덱스를 리턴한다. 만일 배열 내에 찾고자 하는 요소가 없다면 -1을 리턴한다.

 

const items = ["사과", "배", "바나나"];

const index = items.indexOf("바나나");
index;        // 2

items.splice(index, 1);        // ["바나나"]
items;        // ["사과", "배"];

items.indexOf("바나나")        // -1

 

indexOf() 메소드는 문자열에도 사용 가능하다.

const string = "동해물과 백두산이 마르고 닳도록";
string.indexOf("백두산");        // 5

"백두산"의 첫 글자인 "백"의 인덱스가 5이므로 5를 출력한다.

 

특정 위치에 요소 추가

특정 위치에 요소를 추가할 때도 splice() 메소드를 사용한다. splice()의 두번째 매개변수에 0을 입력하면 아무것도 제거하지 않으며, 3번째 매개변수를 추가한다.

배열.splice(인덱스, 0, 요소);

const items = ["사과", "귤", "바나나", "오렌지"];
items.splice(1, 0, "양파");        // []

items;        // ["사과", "양파", "귤", "바나나", "오렌지"], 인덱스 1에 "양파" 요소가 추가된다.

---

반복문

for in 반복문

배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다.

for (const 반복 변수 in 배열 또는 객체) {  문장}

const todos = ["우유 구매", "업무 메일 확인하기", "필라테스 수업"];

for (const i in todos) {
	console.log(`${i}번째 할 일: ${todos[i]}`);
}

// 0번째 할 일: 우유 구매
// 1번째 할 일: 업무 메일 확인하기
// 2번째 할 일: 필라테스 수업

for 반복문의 반복 변수(위의 예시에선 i)에는 요소의 인덱스들이 들어온다. 이를 활용해 배열 요소에 접근할 수 있다.

 

for in 반복문 코드블록:

for (const key in object) {
  if (Object.hasOwnProperty.call(object, key)) {
    const element = object[key];
    }
}

for in 반복문은 이런 코드를 추가해서 사용해야 안정적으로 쓸 수 있어서 조금 위험하다. 이후에 설명하는 for of 반복문과 for 반복문을 사용하는 것이 안전하다.

 

for of 반복문

요소의 값을 반복할 때 안정적으로 사용할 수 있는 반복문이다.

for (const 반복 변수 of 배열 또는 객체) {
  문장
}

// 코드블록
for (const iterator of object) {

}

const todos = ["우유 구매", "업무 메일 확인하기", "필라테스 수업"];

for (const todo of todos) {
  console.log(`오늘의 할 일: ${todo}`);
}

// 오늘의 할 일: 우유 구매
// 오늘의 할 일: 업무 메일 확인하기
// 오늘의 할 일: 필라테스 수업

 

for 반복문

특정 횟수만큼 반복하고 싶을 때 사용하는 범용적인 반복문이다.

for (let i = 0; i < 반복 횟수; i++) {
  문장
}

// 코드블록
for (let index = 0; index < array.length; index++) {
  const element = array[index];
  
}

다른 반복문과 다르게 반복 변수 i를 let키워드로 선언하는 것에 유의한다.

for (let i = 0; i < 5; i++) {
  console.log(`${i}번 째 반복입니다.`);
}

// 0번 째 반복입니다.
// 1번 째 반복입니다.
// 2번 째 반복입니다.
// 3번 째 반복입니다.
// 4번 째 반복입니다.

0에서 시작해(let i = 0;), 5 미만까지(i < 5), 1씩 더하면서(i++) 반복한다.

 

1부터 100까지 더하는 예제:

let output = 0;

for(let i = 1; i <= 100; i++) {
  output += i;
}

console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`);
// 1~100까지 숫자를 모두 더하면 5050입니다.

1부터 시작해야 하므로 초깃값을 1로 설정하고(let i = 1), 100보다 작거나 같을 때 까지 반복해야 하므로 i <= 100을 조건식으로 둔다. output의 초깃값을 0으로 세팅한 뒤, i의 값을 1부터 100까지 1씩 늘려가며 더하는 형태다.

 

for 반복문과 배열 사용하기

for 반복문과 배열을 함께 사용할 땐 주로 배열의 length 속성을 이용한다.

const todos = ["우유 구매", "업무 메일 확인하기", "필라테스 수업"];

for (let i = 0; i < todos.length; i++) {
  console.log(`${i}번째 할 일: ${todos[i]}`);
}

// 0번째 할 일: 우유 구매
// 1번째 할 일: 업무 메일 확인하기
// 2번째 할 일: 필라테스 수업

const todos = ["우유 구매", "업무 메일 확인하기", "필라테스 수업"];

for (let i = todos.length - 1; i >= 0; i--) {
  console.log(`${i}번째 할 일: ${todos[i]}`);
}
  
// 2번째 할 일: 필라테스 수업
// 1번째 할 일: 업무 메일 확인하기
// 0번째 할 일: 우유 구매

초깃값을 todos.length -1로 설정한 뒤, 0까지 인덱스의 숫자를 1씩 빼며 반복하면 배열의 요소를 거꾸로 출력할 수 있다.

 

while 반복문

while 반복문은 if 조건문과 형태가 매우 비슷하다. if문과 다른 점은 문장을 한 번만 실행하고 끝나는 것이 아니라 불 표현식이 true면 문장을 계속 실행한다는 점이다.

while (불 표현식) {
  문장
}

 

while 반복문의 조건이 변하지 않는다면 무한 루프가 일어난다. 그러므로 조건을 거짓으로 만들 수 있는 내용을 문장에 포함시켜야 한다.

무한 루프 예시:

let i = 0;while (true) {
  alert(`${i}번째 반복입니다.`);
  i += 1;
}

조건이 항상 true이므로 확인 버튼을 클릭할 때마다 경고창이 계속 뜨게 된다.

 

let i = 0;
while (confirm("계속 진행하시겠습니까?")) {
  alert(`${i}번째 반복입니다.`);
  i += 1;
}

confirm() 함수를 통해 사용자에게서 불 값을 받는다. [확인] 버튼을 클릭하면 true가 되어 반복문을 계속하고, [취소] 버튼을 클릭하면 false가 되어 반복을 종료한다.

 

while 반복문과 배열 사용하기

let i = 0;
const array = [1, 2, 3, 4, 5];

while (i < array.length) {
  console.log(`${i}: ${array:[1]}`});
  i++;
}

// 0: 1
// 1: 2
// 2: 3
// 3: 4
// 4: 5

for 반복문과 while 반복문은 서로 대체해서 사용할 수 있지만, 횟수를 기준으로 반복할 때는 간결하게 구현할 수 있는 for 반복문을 사용하는 것이 훨씬 편하다.

while 반복문은 조건에 큰 비중이 있을 때 사용한다. "특정 시간동안 어떤 데이터를 받을 때까지", "배열에서 오떠한 요소가 완전히 제거될 때 지" 등의 조건을 기반으로 사용하는 반복문에 while 반복문을 사용한다.

 

break 키워드

break 키워드는 switch 조건문이나 무한 루프를 벗어날 때 사용하는 키워드이다.

while (true) {

} break;

for (let i = 0; true; i++) {
  alert(`${i}번째 반복문입니다.`);
  
  // 진행 여부를 물어본다  
  const isContinue = confirm("계속 하시겠습니까?");  
  if (!isContinue) {
    break;
  }
}

alert("프로그램 종료");

조건이 항상 true여서 무한 루프되는 반복문에서, isContinue로 불 값을 받는다. 취소를 누르면 !isContinue의 값이 true가 되어서 break 키워드가 실행되고, 반복문이 종료된다.

 

continue 키워드

반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행한다.

// 반복문
for (let i = 0; i < 5; i++) {
  console.log(i);
  continue;
  alert(i);
}

// 0
// 1
// 2
// 3
// 4

console.log() 함수는 실행되지만, continue 키워드가 실행되면서 alert() 함수는 실행되지 않게 된다.

0부터 10까지 짝수 합을 구하는 코드:

let output = 0;
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 1) {
    continue;
  }
  output += i;
}

console.log(output);

i의 값이 홀수이면 continue 키워드가 실행되면서 더해지지 않고, 짝수이면 cotinue 키워드가 실행되지 않으면서 output에 i가 더해진다.

 

break나 continue는 사실 반봅문의 조건식을 적절하게 만들면 필요 없는 구문이니 사용을 최대한 자제할 수 있도록 한다.

 

중첩 반복문을 사용하는 피라미드

[1, 2, 3]은 1차원 배열, [[1, 2, 3], [4, 5 ,6]]은 2차원 배열이다. 이런 n-차원의 배열 요소를 모두 확인, 출력하려면 일반적으로 반복문을 n번 중첩해야 한다.

let output = "";

for (let i = 1; i < 10; i++) {
  for (let j = 0; j < i; j++) {
    output += "*";
  }
  output += "\n";
}

console.log(output);

/*
*
**
***
****
*****
******
*******
********
*********
*/

i는 줄을 생성하고, j는 별을 생성한다.

 

let output = "";
for (let i = 1; i < 15; i++) {
  for (let j = 15; j > i; j--) {
    output += " " ;
  }
  for (let k = 0; k < 2* i -1; k++) {
    output += "*";
  } 
  output += "\n";
}

console.log(output);

/*
              *
             ***
            *****
           *******
          *********
         ***********
        *************
       ***************
      *****************
     *******************
    *********************
   ***********************
  *************************
 ***************************
*/

i는 줄을 생성하고, j는 공백을, k는 별을 생성한다.