[javascript] 2. 반복문

1. while

• i의 초기값은 while문 외부에 작성해야 한다.
• 조건은 false가 되도록 해야 한다 그렇지 않으면 while문은 영원히 반복이 된다.
• i에게 변화를 주는 건 while문 안에 작성해야 함

    let i = 0;
    
    while (i < 10) {
      console.log(i); // 0 1 2 3 4 5 6 7 8 9
    }

// 예시
    let i = 0;
    let isFun = false;
    
    while (isFun === false) {
      console.log(i);
      i++;
      if (i === 30) {
        isFun = true;
      }
    }
    // 0 1 2 3 4 5 6 ....... 29

2. break / continue

• break와 continue는 반복문에서 벗어나거나 다음 루프를 돌 수 있게 해주는 역할

    for (let i = 0; i < 10; i++) {
      if (i === 2) continue; // 특정 조건이 만족 됐을때 그 다음 루프를 진행 
      console.log(i);
      if (i === 5) break; // 반복문을 끝내고 바깥으로 나옴
    }

• continue는 특정 조건이 만족 됐을 때 그다음 루프를 진행한다.
  • 위 코드에선 2가 스킵이 되고 다음이 진행된다.
• break는 특정 조건이 만족 됐을 때 반복문을 끝내고 바깥으로 나온다.
  • 위 코드에선 2가 스킵이 되고 바깥으로 나가게 된다.

3. forEach

• forEach 반복문은 오직 Array 객체에서만 사용가능한 메서드

    const arr = [0,1,2,3,4,5,6,7,8,9,10];
    
    arr.forEach(function(element){
    	console.log(element) // 0 1 2 3 4 5 6 7 8 9 10
    });
    
    // es6 arrow 함수
    arr.forEach(element => 
    	console.log(element)  // 0 1 2 3 4 5 6 7 8 9 10
    )

4. map()

• map()은 배열 안의 각 원소를 변환할 때 사용 되며, 이 과정에서 새로운 배열이 만들어집니다.

- 각 배열 원소 제곱 예제

// for / forEach로 작성
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        
// 기존 for문
for (let i = 0; i < array.length; i++) {
	squared.push(array[i] * array[i]);
}
console.log(squared); // [1, 4, 9, 16, 25, 36, 49, 64]
        
        // forEach문
array.forEach((n) => {
	squared.push(n * n);
});
console.log(squared); // [1, 4, 9, 16, 25, 36, 49, 64]

• map을 사용한 예제

// map으로 작성
const square = (n) => n * n;
const squared = array.map(square);
        
console.log(squared); // [1, 4, 9, 16, 25, 36, 49, 64]

• map을 이용한 객체에 접근하기
  - 객체를 텍스트로만 이루어지게 하려면?

        const items = [
          {
            id: 1,
            text: "hello"
          },
          {
            id: 2,
            text: "bye"
          }
        ];
        
        const text = items.map((item) => item.text);
        
        console.log(text); // ["hello","bye"]

5. shift / pop / unshift / push

shift

• shift()는 기존에 배열을 수정하게 되고 맨 앞에 원소를 제거하고, 제거된 요소를 반환한다.
• shift()는 배열의 길이를 변하게 합니다.

    const numbers = [10,20,30,40];
    
    const value = numbers.shift();
    
    console.log(value) // 10
    console.log(numbers) // [20,30,40]

pop

• shift()가 앞에서 제거했다면 pop()은 뒤에서 제거하고, 제거된 요소를 반환한다.
• pop()은 배열의 길이를 변하게 합니다.

        const numbers = [10,20,30,40];
        
        const value = numbers.pop();
        
        console.log(value) // 40
        console.log(numbers) // [10,20,30]

unshift

• 배열의 앞에서부터 추가해 준다.

        const numbers = [10,20,30,40];
        
        const value = numbers.unshift(5);
        
        console.log() // [5,10,20,30,40]

push

• 배열의 뒤에서부터 추가해 준다

        const numbers = [10,20,30,40];
        
        const value = numbers.push(50);
        
        console.log(value) // [10,20,30,40,50]