JavaScript -02 (for문, while문, break, continue, for of, forEach)

타다닥·2023년 9월 26일
JavaScript

JavaScript

목록 보기
2/3
post-thumbnail

JavaScript - 반복문 (for문, while문)

  • 특정 코드를 반복하고 싶을 때 사용한다. 반복되는 코드를 줄일 수 있도록!
  • for문

    • 초기값; 조건문; 증감문 의 순서로 작성한다.

      for(let i= 0; i < 10; i++) { } 의 형태이다.

      for(let i= 0; i<10; i++) {
    //반복하고 싶은 명령문 작성(반복하고 싶은 코드)
    console.log(i, "안녕?")
}
console.log("끝")

//i = 0이라는 변수를 선언
//i < 10 일때까지 아래 명령문을 실행한다. 참이라면 반복한다. 명령문이 거짓이 나온다면 { } 밖으로 나오고 끝난다.
//만약 i가 8이면? 명령문을 실행, 증감문 i++을 만나고 9가 된다.
//그리고 9가 되면 동일하게 명령문을 실행, 증감문 i++을 만나고 10이 된다.
//여기서는 명령문이 실행되지 않는다. i<10;의 조건을 만족하지 못하기 때문.
//{ } 밖으로 나오고 종료된다. 그리고 콘솔창에는 “끝”이 출력된다.

    • 조건문에서 i<10; 으로 지정하면 10번을 반복하게 된다! i가 10이 되기 전까지라고해서 9번 반복되는 것이 아니다. JS에서 숫자는 0부터 시작한다. 즉 0부터 실행하게 되고 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9)의 순서대로 되어서 총 10번을 반복하게 되는 것!

      💡 배열에는 주로 for문을 함께 사용한다. 배열은 비슷한 특징을 가진 값들을 모아둔 것이다. 그렇기 때문에 이 값들에 반복적인 코드를 사용할 일이 많아진다.
  • 중첩 for문
    • 밖에 있는 for문의 변수와 중첩된 for문의 변수는 달라야한다! 밖에서 사용중인 변수를 안에서 사용하면 꼬인다.
      for(let i = 0; i < 5; i++) {
    for(let j = 0; j<5; j++){
        console.log(`i: ${i}, j: ${j}`)
    }

✔️ 1씩 증가가 아니라 2씩 증가시키고 싶다면?

for(let i = 0; i < 10; i=i+2) {} 이런식으로 해주면 된다.

여기서 i+2 라고만 하면 안된다! i=i+2 이렇게 i에 값을 넣어주도록 작성해줘야한다!

✔️ 여기서 얘네는 똑같이 출력되게 된다. 백틱안에 넣어주면 전부 문자열로 인식해준다. 그리고 ${ }안에 넣으면 해당 변수를 사용하겠다는의미이다. 이거 변수야! 라고 확실히 표시해주는걸로 생각.

console.log(`i: ${i}, j: ${j}`)
console.log("i: " + i + ", " + "j: " +j)
  • while문

    • while문에서는 조건이 중요하다. 끝날 수 있는 조건값이어야 한다!

    • while문은 초기값을 밖에 적어준다. 그리고 증감문이 마지막에 들어온다.

      //초기값
while(조건) {
//조건이 참일 떄 실행할 코드
//증감문
}
  • do-while문
    • 조건문을 판단하기 전에 do의 코드를 먼저 실행한다. 그리고 결과가 true라면 반복되면서 실행된다. 즉 while문은 결과가 false라면 실행이 한 번도 안될 수 있다. 하지만 do-while은 결과와 상관없이 한 번은 실행되는 것.
       do {
   //조건이 참일 때 실행하 코드
   } while(조건)
💡 for문은 반복할 횟수를 특정할 수 있을 때 사용한다. 반복이 언제 끝날 지 알 수 있다. while문은 반복할 횟수를 특정할 수 없을 때 사용한다. 조건식이 유지 될 때 까지 반복.

반복문에서의 break , continue

  • break
    • 반복문을 멈추고 빠져나가게 해준다. 아예 끝내는 것!
      

while(true) {
    let number = Number(prompt("지금은 몇년도인가요?"))
    if(number>0) break;
}
console.log("정답!")
  • continue
    • 반복문을 읽지 않고 다음으로 넘긴다. 특정 조건에서 continue를 만나면 그 값은 명령문을 실행하지 않고 버려진다고 생각! 아예 끝내는게 아니라 넘기는 것!
      for(let i=0; i<10; i++) {
    if(i%2==0) {
        continue;
    }
    console.log(i);
}

//값이 0부터 들어온다. if의 조건은 결국 짝수를 의미한다. 이 값이 contine를 만나 버려진다.
//i<10;인 값 중 짝수는 버려져 콘솔에 찍히지 않게된다.

//결국 1, 3, 5, 7, 9만 출력된다!

배열에서의 for of, forEach

  • 배열에서의 for of 반복문

    • 배열의 반복에서 주로 사용한다.

    • 배열의 요소 개수만큼 반복하고, 선언한 변수에 각 배열의 요소들이 순서대로 들어간다고 생각.

    • let 변수이름 of 배열 의 형태로 사용된다. 여기서 배열은 실제로 존재하는 배열이여야 한다!!그 배열을 참조하겠다는 의미이다. of뒤에 오는 배열의 원소를 하나하나 탐색하면서, 그 원소의 값 자체를 선언한 변수(let 변수이름)에 담는다고 생각하자. 그렇기에 배열의 크기만큼 돌아가게 된다! 배열의 마지막까지 탐색하면 종료된다.

      let numbers2 = [1,2,3,4,5,6];
let fruits2 = ["귤", "바나나", "포도", "메론","망고"];

for (let number of numbers2) {
    console.log(numbers2);
}
for (let fruit of fruits2) {
    console.log(fruits2);
}

  • 배열에서의 forEach

    • for문법은 아니고 메소드로 본다.

      💡 메소드란 어떠한 객체가 가지고 있는 동작을 말한다. 데이터를 참조하고 조작할 수 있는 동작. 객체에게 그 동작을 수행하라고 지시한다. 함수는 함수자체가 그 동작을 정의하는 것이기 때문에 자기 자신을 수행하는 것이다.

    • 배열의 요소들을 반복하여 작업을 수행할 수 있다. 함수를 배열 요소 각각에 대해 실행하는 메소드. 배열의 원소를 모두 순서대로 탐색한다!

    • forEach는 매개변수를 함수로 받는다. 즉 forEach안에 함수구조를 넣는 것이다.

      let fruits5 =["apple", "banana", "grape"];
     fruits5.forEach((fruit, i, arr) => {
            console.log(fruit, i, arr);
        });

//이렇게 써도 된다.
let fruits5 =["apple", "banana", "grape"];
			fruits5.forEach(fuction (fruit, index, array){
					  console.log(fruit, index, array
})

      1)첫번째 매개변수에는 탐색하는 값이 들어온다.

      2)두번째 매개변수에는 인덱스가 들어온다. 탐색된 원소의 인덱스.

      3)세번째 매개변수에는 사용하고 있는 배열 자체가 들어온다. 사용할 배열의 내용이 들어오는 것.

      이 세가지를 모두 적을 필요는 없지만 순서와 자리가 중요하다! index를 보기 위해 index만 적으면 안된다. fruit, index 까지 적어주어야 한다.

문자열 관련 내장 메소드

  • length
    • 문자열의 길이를 반환해준다. (공백 포함)
    • console.log(str.length) 형태.
  • toUpperCase( ) & toLowerCase( )

    • 문자열 전체를 대문자, 소문자로 변경.

      let str = "I like apple."

console.log(str) //I like apple. 출력.
console.log(str.toUpperCase()) //I LIKE APPLE.출력.
  • indexOf(’’)

    • 매개변수로 문자열을 받아서 몇 번쨰 인덱스인지 숫자 반환.

      let str = "Happy"

console.log(str.indexOf('p')) //2 출력.
  • slice(startIdx[endIdx])

    • start 지점부터(포함) edn-1(end지점 직전)까지 슬라이싱해서 빼온다. 매개변수로 음수값도 가능하다.

      let str = "Happy Day~!  "

console.log(str.slice(2,7))//ppy D 출력.
console.log(str.slice(2)) //ppy Day~!  출력.
  • replace(문자열1, 문자열2)

    • 문자열1을 문자열2로 변경해준다.

      let str = "aaabbbccc"

console.log(str.replace('a', 'z')) //zzzbbbccc 출력.
  • replaceAll(문자열1, 문자열2)

    • 문자열1을 전부 찾아서 문자열2로 바꿔준다.

      let str = "How is it going?"

console.log(str.replaceAll('i', 'v')) //How vs vt govng? 출력.
  • repeat(n)
    • 문자열에 대해 n번 반복한다.
    • console.log(str.repeat(2)) 형태.
  • trim( )
    • 문자열의 양 끝 공백을 없애준다.
    • console.log(str.trim()) 형태.
  • split

    • 매개변수로 들어온 문자열을 기준으로 str을 쪼개서 배열로 저장한다.

      let str = "Happy Day~!  "

console.log(str.split(''))
//['H', 'a', 'p', 'p', 'y', ' ', 'D', 'a', 'y', '~', '!', ' ', ' '] 출력.

console.log(str.split(' '))
//['Happy', 'Day~!', '', ''] 출력.

💬

  • 어떤 문법을 사용하는게 좋을 지 감이 안잡힌다. 내가 뭘 필요로 할 때 어떤 문법을 사용해야 하는지? 그리고 같은 값이 나오지만 다양한 형태로 코드를 짤 수 있다. 어떤 문법을 사용해야 간결하고 확실하게 내가 원하는 값을 얻어낼 수 있을까 하는 생각이 들었다. 이거는 익숙해지는 방법밖에 없을 것 같다.
  • 모호하게 떠다니는 느낌이다. 각 개념들이 어느정도 모이기는 했는데 단단하게 뭉치지는 않은 느낌. 처음 배웠고 익숙하지 않으니 당연한거긴 한데 거슬린다. 근데 단단하게 뭉치기에는 방법을 모르겠고 막연한 느낌이다.
  • 생각을 먼저 하고 결과값을 보아야 한다! 생각해보면 당연한거긴 한데 반대로 하기도 한 것 같다. 어떻게 출력되는지 결과를 확인하고 아 이래서 이렇구나의 식이었다. 꼭 내가 먼저 생각해보고 결과값을 확인하자!
  • 모르는 개념이 나와서 검색을 하면 또 모르는개념이 나오고 또 모르는 개념이 나온다. 끝이 없다!

✏️

복습을 하고 이해해가는데 생각보다 많은 시간이 쓰인다. 그리고 시간이 지나면 이렇게나 책상에 앉아있었는데 막상 머리에 들어온건 적다는 느낌이 든다. ㅠ 이것도 익숙해지면 이해하는 속도가 빨라지지 않을까 싶다. 그래도 적은 양이지만 배워가면서 재미를 느끼긴 하니 그걸로 다행이라고 생각해본다.

그리고 수업을 들을 때 리더님이 작성한 코드들을 내 컴퓨터에도 작성을 하면서 수업을 듣는다. 그런데 어느순간부터 그 코드를 따라쓰느라 수업이 제대로 들어오지 않는 느낌이 들었다. 일단 내 컴퓨터에도 받아적어야하니 타자를 치기는 하는데,,, 리더님 목소리를 듣기는 하지만 타이핑에 더 집중하게 되는 느낌..? 괜히 잘못 따라적었다가 오류가 날까봐 코드를 따라적는데에 더 쫓기는 기분이다. 강의코드는 리더님이 따로 넘겨주시기도 하니 수업을 들으면서 이해하는데에 더 집중을 해보기로했다.!!

profile
타다닥
프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆
이전 포스트

[SeSAC x 코딩온] JavaScript (변수, 자료형, 형변환, 연산자, 함수, 조건문)

다음 포스트

JavaScript -03 (객체, 표준객체, DOM, Document에서의 요소 선택, 속성 추가, 노드 접근 등)

0개의 댓글