JavaScript 03.

미니·2022년 4월 8일

js

목록 보기

3/7

05. 추상화

001. 할당 연산자

x = x - 2; → 오른쪽에있는 피연산자를 왼쪽에 있는 피연산자에 할당한다. (우 → 좌)

피연산자 : 연산이 되어지는 대상 | 할당 : 지정했다, 대입했다

코드를 해설할때는 할당연산자에 오른쪽부터 해석! (연산식을 먼저 해결 후 왼쪽에 할당)

let name = "미니";
let x = 5;

x = x - 2; // 3

002. 복합할당 연산자

할당 연산자와 결합해서 자주 쓰이는 표현을 더 간략하게 쓸수 있게 해주는 연산자

// 다음 두줄은 같습니다.
x = x + 1;
x += 1;

// 다음 두 줄은 같습니다.
x = x + 2;
x += 2;

// 다음 두 줄은 같습니다.
x = x * 2;
x *= 2;

// 다음 두 줄은 같습니다.
x = x - 3;
x -= 3;

// 다음 두 줄은 같습니다.
x = x / 2;
x /= 2;

// 다음 두 줄은 같습니다.
x = x % 7;
x %= 7;

앞으로 x += 1과 같은 문법을 보게된다면, 당황하지말고 복합할당연산자구나! 합시댱

증가(increment), 감소(decrement) 연산자

변수의 값을 1씩 증가시키거나 감소시킬 때는 복합할당연산자 보다 더 간략하게 쓸 수 있는
증가연산자, 감소연산자를 사용할수도 있다!
더하기 기호를 연달아 쓰거나(++), 뺴기 기호를 연달아 쓰면된다!! (--)

// 다음 세줄은 같은 의미입니다.
x = x + 1;
x += 1;
x ++;

// 다음 세줄은 같은 의미입니다.
x = x - 1;
x -= 1;
x --;

오잉? 궁금해요~

1++ 과 ++1 의 차이점 1++ : 1++이 작성된 코드의 줄을 실행하고나서 증가시키고
++1 : ++1이 작성된 코드의 줄을 실행할 때 1을 증가시킨 상태로 코드를 실행합니다.
증가 감소 연산자는 1씩만 가능한가요? (++2, --2 / ++3, --3 ㄱㄴ?) 뭐 3씩 더하고 싶다고 하면 함수를 만들어야 할겁니다~
```
function up3 (num) {
	return num +3 ;
}
up3(숫자);
```
증감 연산자는 수식 안쓰고 1씩 올리고 내리려고 쓰는거랍니다~ ++2 같은경우는 실행전 1을 플러스 해주기 때문에 3으로 돌아다니며 3으로 나와요 신기하게 2++ 같은것도 있답니다~ 이것은 함수안에서는 2 로 돌아다니고 나중에 끝나면 1을 더해주는 것이라 생각하시면 되요~ 증감 연산자는 숫자에 넣는 것보다는 숫자가 선언된 변수를 돌리기 위해 쓰는거라 for 문같은 곳에서 많이 보입니다
```
for(var i=0; i<array.length; i++) {
	console.log(array[i]);
}
```

003. 함수의 실행 순서

코드는 위에서 아래로 / 왼쪽에서 오른쪽으로

호이스팅 참고 (https://developer.mozilla.org/ko/docs/Glossary/Hoisting)

function sayHello() {
  console.log("hello");
  console.log("Welcome to House");
}

console.log("함수 호출 전"); // 함수 호출 전
sayHello(); // sayHello 함수 호출(Hello / Welcome to House)
console.log("함수 호출 후"); // 함수 호출 후

function square(x){
  return x * x
}

console.log("함수 호출 전"); // 함수 호출 전
console.log(square(5)); // 파라미터에 5가전달(console.log(25)) -> 25
console.log("함수 호출 후"); // 함수 호출 후

function square(x){
  return x * x
}

console.log("함수 호출 전"); // 함수 호출 전
console.log( square(3) + square(4) ); // console.log( 9 + 16 ); -> 25
console.log("함수 호출 후"); // 함수 호출 후

예제

// 여기에 expressMultiplication 함수를 작성해 주세요.
function expressMultiplication(x, y) {
  console.log(`${x} * ${y} = ${x * y}`);
}

// 테스트 코드
expressMultiplication(3, 4);
expressMultiplication(3, 2);
expressMultiplication(7, 5);
expressMultiplication(8, 9);
expressMultiplication(5, 5);
expressMultiplication(9, 9);

/*
3 * 4 = 12
3 * 2 = 6
7 * 5 = 35
8 * 9 = 72
5 * 5 = 25
9 * 9 = 81
*/

004. return문 제대로 이해하기

결과값을 돌려주는 역할말고 “함수의 실행을 중단하는 역할”

function square(x) {
  console.log("return 전");
  return x * x; // 이단계에서 retrun이 함수를 종료시켜버림
  console.log("return 후"); //투명하게 되어 실행이 안됨(데드코드)
};

console.log("함수 호출 전");
console.log(square(3));
console.log("함수 호출 후");

/*
"함수 호출 전"
"return 전"
9
"함수 호출 후"
*/

005. return과 console.log의 차이

return이 없는 함수를 실행하면 undefined를 return받게 된다.

function printSquare(x) {
  console.log(x * x); //9
};

function getSquare(x) {
  return x * x;
};

// printSquare(3);
// getSquare(3);
// console.log(getSquare(3));
console.log(printSquare(3));

return : 함수를 실행하고 어떤값을 돌려주는것

console.log : 콘솔에 어떤값을 출력해주는것

예제쓰...

변수선언을 왜 아래다 한건가여? 위에해야하는거아닌가여?
```
let result = calculateRectangleArea(3, 6)
console.log(result);

function calculateRectangleArea(width, height) {
    return width * height;
}
```
이렇게 함수 선언문 방식으로 함수를 정의하면 함수 호이스팅에 의해 함수 코드가 한줄씩 실행되기 전에 함수 선언문이 실행됩니다. 그래서 문제 없이 선언문 이전에 함수를 호출해도 실행되는 것이죵. 하지만 함수 선언문이 호출시보다 먼저 위치하는게 일반적입니당

006. 옵셔널 파라미터

파라미터에 “기본값을 설정”하는 방법 / 하단의 3번의 상황 참조

반드시 생성한 다음 가장 뒤쪽으로 선언해줘야합니다!

함수의 파라미터를 활용하면 전달되는 값에 따라 다양한 결괏값을 얻을수 있다.

function sayHello(name) {
  console.log(`안녕하세요 ${name}님!`);
}

sayHello("미니");
sayHello("오딘");
sayHello("도란");
sayHello(); //undefined

undefined가 출력되는 경우
1. let x;-> console.log(x); : 변수를 선언하고 아무런값도 할당하지 않았을떄
2. console.log(sayHello("미니 최고")); : 함수를 호출했는데 리턴문이 작성되지 않는 경우
3. sayHello(); : 파라미터가 있는데 함수를 호출할때 아무런 값도 전달하지 않을경우
3번의 상황(Optional Parameter)

필요에 따라서는 undefined가 아닌 다른값이 자동으로 전달되게끔 하는 파라미터에 기본값을 설정하는 방법이 있다. 함수를 호출할때 파라미터값을 전달해도 되고 생략해도 되니깐 선택적으로 전달을 받는다고 하는것

// 옵셔널 파라미터 (Optional Parameters)
function introduce(name, age, nationality = "한국"){ 
// nationality = "한국" : 파라미터에 할당연산자를 통해서 값을 할당(옵셔널파리미터)
  console.log(`제 이름은 ${name}입니다.`);
  console.log(`나이는 ${age}살 이고,`);
  console.log(`국적은 ${nationality}입니다.`);
}

introduce("미니", 28, "영국"); // 값을 모두 전달한 경우
console.log("");
introduce("미니", 28); // 파라미터값을 생략한 경우

/*
"제 이름은 미니입니다."
"나이는 28살 이고,"
"국적은 영국입니다."
""
"제 이름은 미니입니다."
"나이는 28살 이고,"
"국적은 한국입니다."
*/

옵셔널 파라미터가 중간에 있을때 호출을 할 때 생략을 하려고 하면 순서가 밀려버리는 문제가 발생 → 반드시 생성한 다음 가장 뒤쪽으로 선언해줘야합니다!

// 옵셔널 파라미터 (Optional Parameters)
function introduce(name, nationality = "한국", age ){
  console.log(`제 이름은 ${name}입니다.`);
  console.log(`나이는 ${age}살 이고,`);
  console.log(`국적은 ${nationality}입니다.`);
}

introduce("미니", "영국", 28 ); // 값을 모두 전달한 경우
console.log("");
introduce("미니", 28); // 파라미터값을 생략한 경우

007. 변수의 Scope (로컬변수, 글로벌 변수)

scope : 범위, 영역 | 변수가 선언되면 어디깐지 유효한지 변수의 유효범위

변수를 만들고 값을 할당하면 어디서든 그 변수 이름으로 할당된 값을 가져올수있다.
변수에는 유효한 범위가 있어서 그 범위를 벗어나게 되면 오류가 발생하게된다.

블록문(Block Statement) : {중괄호}로 감싼것을 블록문이라고 합니다 (기준)
- 로컬변수, 지역변수(Local Variable) : 블록문 안에 선언된 변수(블록문 안에서만 작동함!)
- 글로벌 변수, 전역변수(Gloabal Variable) : 블록문 밖에서도 사용할수 있는 변수

// Scope : 범위, 영역
function myFunction() { // 블록문(Block Statement) : {}감싼것
  let x = 3; // 로컬변수, 지역변수(Local Variable) : 블록문 안에 선언된 변수
  console.log(x);
}

myFunction(); // 3
console.log(x); // error : 변수가 유효하지않은곳에서 사용

// Scope : 범위, 영역
let x = 3; // 글로벌 변수, 전역변수(Gloabal Variable) : 블록문 밖에서도 사용할수 있는 변수

function myFunction() { 
  console.log(x);
}

myFunction(); // 3
console.log(x); // 3

// 블록문내에서 변수를 사용하게 되면 로컬변수가 있는지 확인후 없으면 글로벌 변수 확인
// -> 함수종료

let x = 3; // Global Variable

function myFunction() { // Block Statements
  let x = 5; // Local Variable
  console.log(x);
}

myFunction(); // 5
console.log(x); // 3

008. 상수상수..안상수 (Constant)

절대 변하지 않고 일정한값

대문자와 밑줄로 상수명을 작성해준다~ ex) myNumber → MY_NUMBER

// 상수 (constant)
let PI = 3.14; // 원주율
let radius = 0; // 반지름
// 빈값이거나 변할수 있는 값이라면 null을 할당해준다.
// tip> 빈값을 표현하면서 변수에 일정하게 들어갈 자료형을 간접적으로 표현하고싶을땐
//      숫자형은 0 / 문자형은 " "

// 원의 넓이를 계산하는 함수
function caculateArea() {
  return pi * radius * radius;
}

// 반지름에 따른 원의 넓이를 출력하는 함수
function printArea() {
  return `반지름이 ${radius}일 때, 원의 넓이는 ${caculateArea()}`;
};

radius = 4;
console.log(printArea());

radius = 7;
console.log(printArea());

radius = 8;
console.log(printArea());

06. 제어문⭐️

001. if문

어떤 특별한 조건에 따라서 코드를 실행할지 말지 결정할수 있는 문법

if (조건부분) { // 만약 조건부분이 충족되면
  동작부분 // 동작부분을 수행해라
}

let icePoint = 2;

if (icePoint <= 0) {
  console.log("물이얼어요");
} else {
  console.log("물이 얼지않아요")
};

002. else if 문

2가지 이상의 옵션을 선택해야할때

let temperature = 110;

// 구린 가독성
if (temperature <= 0) {
  console.log("물이 얼어요");
} else {
  if (temperature < 100 ) {
    console.log("물이 그냥 물이에요");
  } else {
    console.log("물이 끓어요")
  }
}; 

// ---------------------------------

// else if를 사용한 좋은 가독성
if (temperature <= 0) {
  console.log("물이 얼어요");
} else if (temperature < 100) {
  console.log("물이 그냥 물이에요")
} else {
  console.log("물이 끌어요")
};

let temperature = 200;

if (temperature <= 0) {
    console.log("물이 얼어요");
  } else if (temperature < 100) {
      console.log("물이 그냥 물이에요")
  } else if (temperature < 150) {
    console.log("물이 끓어요")
  } else {
    console.log("물이 모두 증발했어요")
  };

예제...

// 나의 나이와, 나의 성별을 저장하는 변수
let myAge = 26;
let myGender = 'male';

// 호칭을 담은 변수
let callOlderBrother = '형';
let callOlderSister = '누나';
let callFriend = '친구';
let callYoungerSister = '여동생';
let callYoungerBrother = '남동생';

// 상대방의 나이와 성별에 따른 호칭을 리턴하는 함수 whatShouldICall를 완성하세요.
function whatShouldICallYou(yourAge, yourGender) {
  // 여기에 코드를 작성해 주세요.
  if (myAge > yourAge && myGender == yourGender) {
    console.log("남동생");
  } else if (myAge < yourAge && myGender == yourGender) {
    console.log("형");
  } else if (myAge > yourAge && myGender !== yourGender){
    console.log("여동생");
  } else if (myAge < yourAge && myGender !== yourGender){
    console.log("누나");
  } else {
    console.log("친구");
  }
};

// 테스트 코드
let result1 = whatShouldICallYou(25, 'female');
let result2 = whatShouldICallYou(20, 'male');
let result3 = whatShouldICallYou(26, 'female');
let result4 = whatShouldICallYou(30, 'male');
let result5 = whatShouldICallYou(31, 'female');

console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
console.log(result5);

모범답안

// 나의 나이와, 나의 성별을 저장하는 변수
let myAge = 26;
let myGender = 'male';

// 호칭을 담은 변수
let callOlderBrother = '형';
let callOlderSister = '누나';
let callFriend = '친구';
let callYoungerSister = '여동생';
let callYoungerBrother = '남동생';

// 상대방의 나이와 성별에 따른 호칭을 리턴하는 함수 whatShouldICall를 완성하세요.
function whatShouldICallYou(yourAge, yourGender) {
  // 여기에 코드를 작성해 주세요.
  if (myAge === yourAge) {
    return callFriend;
  } else if (myAge > yourAge) {
    if (yourGender === 'male') {
      return callYoungerBrother;
    } else if (yourGender === 'female') {
      return callYoungerSister;
    }
  } else {
    if (yourGender === 'male') {
      return callOlderBrother;
    } else if (yourGender === 'female'){
      return callOlderSister;
    }
  }
}

// 테스트 코드
let result1 = whatShouldICallYou(25, 'female');
let result2 = whatShouldICallYou(20, 'male');
let result3 = whatShouldICallYou(26, 'female');
let result4 = whatShouldICallYou(30, 'male');
let result5 = whatShouldICallYou(31, 'female');

console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
console.log(result5);

003. switch문

무엇을 선택햇는지에 따라 다르게 동작하는 스위칫문!

조건과 일치하는 경우를 찾은 다음에는 break문을 만나기 전까지는 모든 동작을 실행하게됨!!!

// Switch문 (Switch Statement)

switch (비교할_값) {
  case 조건값_1:
    동작부분;
    break; // 스위치문을 빠져나와라!
  case 조건값_2:
    동작부분;
    break;
  default: // 비교할값이 모든조건과 일치하지 않을때(필요에따라 생략가능)
    동작부분;
}

// Switch Statement
let myChoice = 8;

switch(myChoice) {
  case 1:
    console.log("토끼를 선택한 당신,....");
    break;
  case 2:
    console.log("고양이를 선택한 당신,...");
    break;
  case 3:
    console.log("코알라를 선택한 당신,...");
    break;
  case 4:
    console.log("강아지를 선택한 당신,...");
    break;
  default:
    console.log("1에서 4사이의 숫자를 입력하세용!")
}

Switch VS if

💡 if문과 switch문 모두 특정한 조건에 따라 다르게 동작하는 코드를 만들 수 있지만, **어떤 넓은 범위를 만족하는 조건식**을 만들 때는 if문을 활용하는 것이 좀 더 효과적이고 **특정한 값에 일치하는 조건**을 만들 때는 switch문이 좀 더 효과적입니다.

그런데 switch문이 익숙하지 않으신 분은 이렇게 if else문으로도 대체가 가능하니깐 switch문의 구조가 너무 어려우신 분은 if else문을 활용하셔도 좋습니다.

한 가지 주의할 점은 조건식에서 등호를 반드시 3개를 입력해 주어야 한다는 점인데요. switch문은 암시적 형 변환을 허용하지 않기 때문입니다.

그렇기 때문에, switch문은 값들을 비교할 때 자료형을 엄격하게 구분한다는 것과
if문으로 대체할 때는 반드시 등호 3개로 일치비교를 해야한다 는 것.
이 부분은 꼭 기억해 두시면 좋을 것 같습니다! :)

004. for문 (반복문)

조건 부분이 충족되면 계속해서 동작부분을 반복!

조건 비교에 사용되는 값을 반복문 내부에서만 사용, 반복이 끝나면 외부에서는 사용 불가능

초기화 부분 : for 반복문이 시작할때 가장 먼저, 그리고 딱한번만 실행되는 부분
(주로 반복횟수를 저장할 변수를 생성하는데 활용)

조건부분 : 이부분에 작성된 코드를 불린형태로 평가한 다음 true로 판단되면 동작부분을 실행

추가동작부분 : 조건 부분이 true로 판단 됐을때 동작 부분을 실행하고 그 다음 추가적으로 동작할 부분을 작성

for (초기화부분; 조건부분; 추가동작부분) {
  동작부분
}

for문 작성시 가장먼저 생각해야할 부분 : 얼만큼 반복할까?
→ 반복의 횟수를 저장하는 역할 : 변수 i

/ 미니짱을 열번반복해서 쓰고싶어!
for (let i = 1; i <= 10; i++) {
  console.log("미니짱!");
};

// for문 작성시 가장먼저 생각해야할 부분 : 얼만큼 반복할까?
// 반복의 횟수를 저장하는 역할 = 변수 i
// 초기화부분은 주로 반복횟수를 저장할 변수를 생성하는데 활용

// 초기화부분(let i = 1;) 
// 조건부분(i <= 10) : 10번 반복한다.
// 추가동작부분(i++) : 반복 횟수를 카운트(변수의값을 하나씩 증가)

예제

for 반복문을 사용하여 1 이상 100 이하의 짝수를 모두 출력해 보세요.

**i를 1부터 100까지 반복하면서 2로 나눴을 때 나머지가 0일 때만 i를 출력하는 방법**

i를 1부터 100까지 반복하면서 i를 출력하려면 다음과 같이 작성하면 됩니다.

for (let i = 1; i <= 100; i++) {
  console.log(i);
}

// 여기서 만약 i를 2로 나눴을 때 나머지가 0일 때 i를 출력하려면, if문과 나머지연산(%)을 활용해서 다음과 같이 코드를 작성할 수 있겠죠?

for (let i = 1; i <= 100; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

*i를 1부터 50까지 반복하면서 i 2를 출력하는 방법**

// i를 1부터 50까지 반복하면서 i를 출력하려면 다음과 같이 작성하면 됩니다.

for (let i = 1; i <= 50; i++) {
  console.log(i);
}

//여기서 i * 2를 출력하려면 console.log함수를 사용하는 부분만 살짝 바꿔주면 되겠죠?

for (let i = 1; i <= 50; i++) {
  console.log(i * 2);
}

**i를 2부터 100까지 반복하면서 i를 2씩 증가시키는 방법**

// i를 2부터 100까지 반복하면서 i를 출력하려면 다음과 같이 작성하면 됩니다.

for (let i = 2; i <= 100; i++) {
  console.log(i);
}

// 여기서 i를 2씩 증가시키려면 추가동작부분에서 i를 2씩 증가시켜주면 되겠죠?

for (let i = 2; i <= 100; i += 2) {
  console.log(i);
}

주어진 높이(height)에 맞게 '*'로 삼각형을 그려주는 함수 printTriangle을 완성 파라미터로 전달되는 숫자 값에 따라 '*'을 출력하는 코드를 만들어봅시다. for문을 활용하면 되겠죠?

function printTriangle(height) {
// 여기에 코드를 작성해 주세요.
for (let i = 0; i < height; i++) {
    console.log('*');
  }
}

이렇게 파라미터의 숫자 값에 따라 '*'을 출력하는 코드를 완성했다면 이제 반복할 때마다 '*'의 개수를 증가시켜주어야 하는데요. 그러기 위해서, 콘솔에 '*'을 바로 출력하는 게 아니라 for문이 반복되기 전에 message라는 변수를 만든 다음 for문이 반복될 때마다 message에 '*'을 하나씩 추가하면서 콘솔에 message를 출력한다면 어떨까요?

function printTriangle(height) {
// 여기에 코드를 작성해 주세요.
let message = '';
  for (let i = 0; i < height; i++) {
    message += '*';
    console.log(message);
  }
}

이대로 코드를 실행해보면, 코드가 우리가 원하는 모양이 잘 출력되는 모습을 확인할 수 있습니다.

높이: 1
*
높이: 3
*
**
***
높이: 5
*
**
***
****
*****

// 가능한거
for (i = 0; i< height ; i++){
 console.log("*".repeat(i+1));
}

// 내답
function printTriangle(height) {
   // 여기에 코드를 작성해 주세요.
   let message = "";
   for (let i = 0; i < height; i++) {
     message = message + "*";
     console.log(message);
   }
}

005. while문(반복문)

조건부분을 충족하지 않을때(false)까지 계속 반복

글로벌 변수를 조건 비교하여 사용하고 반복문 내부에서도 다루면서, 반복문이 종료된 다음에도 이 변수를 사용해야될때는 while문 사용

// while문 (while statements)
while (조건부분) {
  동작부분
}

// while문 (while statements)
let i = 1;

while (i <= 10) { // while문에는 초기화부분이 없어서 카운트 하려면 반복문밖에서 글로벌변수 미리만들어라
  console.log(`${i} 미니 짱!`);
  i++;
}

for (let i = 1; i <= 10; i++) {
  console.log(`${i} 미니 짱!`);
}

예쩨

180의 공약수를 모두찾고, 갯수도 ㅇ ㅏㄹ려줘
1. 약수 모두 출력하기
약수를 세는 것은 일단 미루어 두고, 약수를 모두 출력하는 코드부터 작성해 봅시다. 180의 약수를 모두 찾아야 하는데요. 그러면 180이 1로 나누어떨어지는지 확인하고, 2로 나누어떨어지는지 확인하고, 3으로 나누어떨어지는지 확인하고... 이런 식으로 180까지 나누어떨어지는지 확인하면 됩니다. '나누어떨어진다'는 건 코드로 어떻게 나타낼까요? 변수 i가 4로 나누어떨어진다면, i % 4 === 0은 true가 나올 것입니다. 그렇다면 약수를 모두 출력하기 위해서 while문과 if문을 활용해서 다음과 같이 코드를 작성할 수 있겠죠?
```
const N = 180;
// 여기에 코드를 작성해 주세요.
let i = 1;

while (i <= N) {
  if (N % i === 0) {
    console.log(i);
  }
  i += 1;
}
```
참고로 i += 1은 if문 밖에 있어야 합니다. 그렇지 않으면 끝이 안 나는 "무한 루프"에 빠지게 됩니다. 주의해 주세요!
2. 약수 세기
그런데 이 문제에서는 약수를 모두 출력하는 것뿐만 아니라 약수의 총 개수도 출력해야 합니다. 그러기 위해서는 개수를 세기 위한 변수를 하나 만들어야겠죠? 변수 이름은 count 같은 게 좋을 것 같습니다! 이 count 변수는 어떻게 활용해야 할까요? if문 안쪽에서 180의 약수를 발견했을 때마다 1씩 늘려 주면 될 것 같네요 :)
```
const N = 180;
// 여기에 코드를 작성해 주세요.let i = 1;
let count = 0;

while (i <= N) {
  if (N % i === 0) {
    console.log(i);
    count++;
  }
  i += 1;
}
```
3. 문장 출력하기
끝으로 마지막 문장을 출력해야 합니다. 마지막 문장은 과제의 출력 예시를 참고해서 템플릿 문자열을 활용하면 좀 더 깔끔하게 코드를 작성할 수 있겠죠?
모범답안
```
const N = 180;
// 여기에 코드를 작성해 주세요.let i = 1;
let count = 0;

while (i <= N) {
  if (N % i === 0) {
    console.log(i);
    count++;
  }
  i += 1;
}

console.log(`${N}의 약수는 총 ${count}개입니다.`);
```

005. break 와 countinue

조건을 만족하면 다시 반복

break : 반복문을 빠져나오는 거라면

continue : 동작 부분을 한번 건너뛰는것 (바로 다음단계로 뛰어넘는것)

// 1~7까지 출력하는코드
let i = 1;

while (i <= 10){
  console.log(i);
  if (i === 7) {
    break;
  }
  i++;
}

for (let i = 1; i <= 10; i++) {
  console.log(i);
  if (i === 7) {
    break;
  }
}

// 홀수만 출력해주는 코드

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

// =============================

let i = 1;

while (i <= 10) {
  if (i % 2 === 0) {
    // i++; 안하면 무한루프
    i++; // for문과 다르게 추가 동작 부분이 없기때문에 증가시켜줌 / 아래의 이유로 미리 증가시켜준다!
    continue // 동작부분을 건너뛰게 되면 바로 조건 부분으로 넘어가게 된다.
  }
  console.log(i);
  i++;
}

중첩문

* 중첩 while 문
         * - 중첩 for문과 마찬가지로 while 문 내부에 또 다른 반복을 수행하는 while 문을 기술
         * 
         * < 기본 문법 >
         * 초기식1;
         * 
         * while(조건식1) {
         *         
         *         초기식2;
         * 
         *         while(조건식2) {
         *             // 반복할 문장...
         *             증감식2;
         *         }
         * 
         *         증감식1;
         * 
         * }
         * 
         */

예제(구구단 만들기)

let i = 1;

while (i <= 9) {
  let j = 1;
  while(j <= 9) {
    console.log(`${i} * ${j} = ${i * j}`);
    j++;
  }
  i++;
}

미니

ㅂr람ㄸrㄹr, 水ㄸrㄹr...🌊

이전 포스트

JavaScript 01.

다음 포스트