[항해99] 온보딩 스터디 - 3일차 TIL

🦄 온보딩 스터디 3일차 TIL

✨03/08 : 목표 : JS 기초 4파트 배열과 반복문

---

📒강의 노트 정리

01 배열

1. 배열

- 대괄호 안에 계산식을 넣을 수도 있다.

numbers[1+1]
numbers[1*3]

- 배열 뒷부분에 요소 추가하기 => 10번째 인덱스에 강제로 요소를 추가하면, 4~9까지 인덱스는 empty가 된다.

const fruitsA = ["사과", "배", "바나나"];
fruitsA[10] = "귤";
console.log(fruitsA);// [ '사과', '배', '바나나', <7 empty items>, '귤' ]

 

2. 배열의 요소 제거하기

1) 인덱스로 요소 제거하기, 값으로 요소 제거하기

- .splice( 인덱스 or 값 , 개수) => '접합'

fruitsA.splice(2, 1); // 2번째부터 1개
fruitsA.splice("사과", 1); //사과부터 1개 => 사과제거

2) indexOf로 인덱스 추출하여 제거하기

- .indexOf(요소) => 요소값의 위치 반환

const index = array.indexOf(a)
array.splice(index, 1)

- splice와 indexOf는 찾는 요소 하나만 제거 가능, 특정 값을 가진 모든 요소를 제거하려면 .filter()를 사용

 

3. 배열의 특정 위치에 요소 추가

- splice()의 2번째 매개변수에 0입력 시 아무것도 제거하지 않고, 3번째 매개변수에 추가하고 싶은 요소 입력

=> .splice( 1, 0, '바나나')

  fruitsA.splice(1, 0, "바나나"); // [ '사과', '바나나', '배', '귤' ]

 

4. 자료의 파괴적 처리 비파괴적 처리

=> 과거 메모리 절약을 위해 파괴적 처리 => .push(), pop(), splice() 등

=> 메모리가 여유로운 현대, 자료 보호를 위해 대부분 비파괴 처리 => .split(), trim(), .filter(), .map() 등

각각 파괴적인지 비파괴적인치 생각하며 사용해야 한다. 

 

02 반복문

1. for in => 배열의 index 또는 객체의 key로 반복

=> for in 보다는 for of 반복문이나 for 반복문을 사용하는 것을 추천  => for in은 추가 코드를 사용하여야 비교적 안정적으로 사용 가능..

 

2. for fo  => 배열의 value 값으로 반복 => 안정적

const todos = ['우유 구매', '메일 확인', '필라테스']
for (let todo of todos) {
	console,log(`오늘이 할 일 : ${todo}`)
    }

 

3. for => 특정 횟수만큼 반복하고 싶을 때 사용

- for문으로 배열 반대로 출력하기(초기값을 배열의 length-1부터 시작)

const todos = ["우유 구매", "메일 확인", "필라테스"];
  for (let i = todos.length - 1; i >= 0; i--) {
    console.log(`오늘의 ${i}번쨰 할 일 : ${todos[i]}`);
  }
/*오늘의 2번쨰 할 일 : 필라테스
오늘의 1번쨰 할 일 : 메일 확인
오늘의 0번쨰 할 일 : 우유 구매*/

 

4. while 반복문 => if와 비슷, 조건이 false가 될 때 까지 무한 반복

1) while 반복문 => 조건을 거짓으로 만들 수 있는 내용이 포함되어야 함

let i = 0
while(true){
	// false가 될 때까지 무한반복
    i = i + 1
    // break로 멈출 수 있는 코드 구현 필요
    if(i > 10) {
    	break
     	}
}

- 다른 언어에서는 무한 반복문을 '데이터를 전달받을 때 까지 기다림'과 같은 목적으로 사용하기도 한다. 하지만 자바스크립트는 무한루프에 빠지면 페이지 전체가 먹통이 되기 때문에 break 구문을 통해 반드시 멈춰주는 코드를 구현해야 한다.

 

2) while조건식에 confirm() 함수 넣기

- comfirm()함수를 입력하면 사용자에게 확인을 받는 대화상자가 실행된다. 확인 시 true, 취소 시 false로 반복을 종료한다.

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

=> '계속 진행하시겠습니까? => 확인 => 1번째 반복입니다 ' * 무한 반복

 

3) while문과 for문은 서로 대체해서 사용 가능

  let i = 0;
  const array = [1, 2, 3, 4, 5];
 
  while (i < array.length) {
    console.log(`${i} : ${array[i]}`);
    i++;
  }

 

- 위 처럼 횟수 기준 반복 시에는 for문이 더 낫다. 

❗while문은 조건에 큰 비중이 있을 경우 사용하는 것이 좋다. '특정 시간 동안 어떤 데이터를 받을 때까지', '배열에서 어떤 요소가 완전히 제거될 때까지' 등의 조건을 기반으로 사용하는 반복문에 while을 많이 사용한다. (코딩 테스트에서도 많이 사용하는 것을 보았다.)

 

 

5. break 키워드

- switch 조건문이나 반복문을 벗어날 때 사용하는 키워드. 

=> ❗어제 질문한 부분이었는데, break같은 경우는 switch나 반복문 등 결과를 리턴하지 않고 반복문을 빠져나가기 위해 사용하고, return 같은 경우는 어떤 결과를 리턴시키고 종료시키거나, 또는 반복문 뿐만 아니라 해당하는 메소드 함수 자체를 종료시키기 위해 사용하는 것 같다.

 

6. continue 키워드

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

ex) 짝수들의 합만 출력하고 싶을 경우 => 홀수일 경우 continue하고 다음반복으로 넘어감

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

    output += i;
  }
  console.log(output); //30

- break나 continue의 사용보다는 조건식을 적절하게 만드는 방법을 고려하도록 한다.

 

 

7. 중첩 반복문을 사용하는 피라미드(1)

정답)

let output = "";

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

나는 중첩 반복문을 사용해서 풀진 못했다..)

let output = "*";

  for (let i = 0; i < 10; i++) {
    console.log(output.repeat(i));
  }

 

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

let output = "";

  for (let i = 0; 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);

 

🔥확인 문제 풀어보기(오답 or 중요도 높은 문제)

  let output = 1;
  for (let i = 1; i <= 100; i++) {
    output *= i;
    console.log(output);
  }
  console.log(`1~100의 숫자를 모두 곱하면, ${output}입니다.`);

 

 let output = "";
  const size = 5;
  // i = 1~5까지 증가 => 5회 줄바꿈
  for (let i = 1; i <= size; i++) {
    // j = 공백 => j가 i보다 클때까지만 반복 => i가 1일 때 5,4,3,2,1 / 2일 때 5,4,3 ...
    for (let j = size; j > i; j--) {
      output += ".";
    }
    // k = 별찍기 => 홀수개 => k는 0일 때, 2*i -1보다 클 때까지만 => 
    for (let k = 0; k < 2 * i - 1; k++) {
      output += "*";
    }
    output += "\n";
  }
  for (let i = size - 1; i > 0; i--) {
    for (let j = size; j > i; j--) {
      output += ".";
    }
    for (let k = 0; k < 2 * i - 1; k++) {
      output += "*";
    }
    output += "\n";
  }
  console.log(output);

 

 

✅ 배운 점

오늘은 배열과 반복문을 공부했다. 배열 메소드 들이 비슷한 키워드가 많아 헷갈렸는데 split(), slice(), trim() 등을 한번 더 복습한 것 같다.

while 반복문을 평소에 많이 사용해 본 적이 없던 터라 조금 헷갈리는 부분이 있었다. while은 반드시 조건을 거짓으로 만들 수 있는 내용이 포함되어 있거나, 무한 반복문일 경우 break문을 사용해 꼭 종료할 수 있도록 해주어야 한다. 

for문과 while문 중 어떤 반복문을 사용할 것이냐 묻는다면, 먼저 for of나 forEach문일 경우 index나 value를 가져올 수 있다는 장점이 있고, 어떤 index에 대한 조작이나 순서, 횟수 등에 의존적이라면 굉장히 유용하게 사용할 수 있다. 

while문의 경우, 조건에 큰 비중이 있을 경우 사용하는 것이 좋다. '특정 시간 동안 어떤 데이터를 받을 때까지', '배열에서 어떤 요소가 완전히 제거될 때까지' 등의 조건을 기반으로 사용하는 반복문에 while을 많이 사용한다. (코딩 테스트에서도 많이 사용하는 것을 보았다.) 또 confirm으로 사용자에게 여부를 물을 수도 있다는 것과, continue 키워드의 기능도 처음 알게 됐다.

별 찍기가 정말 너무 어려웠다.... 예제가 미리 있었기 때문에 문제는 무사히 풀어냈지만, 정답을 이해하는데 한참 걸렸다. 중첩 반복문만 보면 항상 겁부터 났었는데 덕분에 조금은 더 익숙해진 것 같다. 그래도 아직 능숙하게 사용하기엔 한참 걸릴 것 같다.. 알고리즘은 항상 풀 때마다 너무 고통스럽다..알고리즘을 더 많이 공부해야할 필요성을 많이 느꼈다.😂

 

 

➕더 공부할 점

더 공부하고 싶은 부분 : 알고리즘 공부.. 중첩 for문 활용한 문제들 풀어보기, 배열과 반복문을 이용해 html에서 자료들을 나타내는 방법