[코드잇] 프로그래밍 기초 in Javascript

토픽 2. 프로그래밍 핵심개념 in Javascript

❗️오늘 하루 공부한 내용을 정리하는 글이므로 정확하지 않습니다.❗️

👩🏻‍💻 최근 한달 간 프로그래밍 관련 교육기관에 지원하는 것에 집중을 했더니 벨로그를 잘 관리하지 못했다...🥲 오늘을 계기로 공부한 것은 꾸준하게 업로드 하는 것을 목표로 해야겠다!!✍🏻

자료형

✔️ 숫자형

1. 나머지 : 7을 3으로 나눈 나머지
   console.log(7 % 3);

2. 거듭제곱 : 2의 3제곱
   console.log(2 ** 3)

3. 사칙연산의 우선순위
   console.log(2 + 3 2); // 를 먼저 계산하므로 8이 출력된다.
   console.log((2 + 3) * 2); // ()안을 먼저 계산하므로 10이 출력된다.

✔️ 문자열 기본

문자열은 우리가 사용하는 글자들을 값으로 나타내는 자료형이다.

문자열은 같은 따옴표로 감싸줘야한다. ‘코드잇 ’ “코드잇” 코드잇

양 끝 백틱을 사용하여 이용

✔️ 불 대수

일상적인 논리를 수학적으로 표현한 것을 불대수라고 한다.
불 대수의 값은 진리값이며 진리값은 어떤 명제가 참인지 거짓인지를 나타내는 것이다.

가능한 값은 true, false 두가지 뿐이다.

일반 수학의 연산 +, -, *, / 이지만 불대수의 연산 and, or, not으로이루어져 있다.

명제란 참 거짓이 확실한 문장이고 다음 예시를 통해 설명할 수 있다.

✅ 대한민국의 수도는 서울이다 (참인 명제)
✅ 2는 1보다 작다 (거짓인 명제)
✅ 한국의 수도는 어디입니까? (명제가 아님)
✅ 짜장면보다 짬뽕이 맛있다. (명제가 아님)

AND 연산

x와 y가 모두 참일 때만 x AND y가 참

Or 연산

x와 y중 하나라도 참이면 x OR y는 참

Not 연산

ex) Not 대한민국의 수도는 서울이다.(= 대한민국의 수도는 서울이 아니다.)
false

ex) Not 2는 1보다 작다.(= 2는 1보다 작지 않다)
True

✔️ 불린형

console.log(2>1);
console.log(2<1);
console.log(3<=3);
console.log(3 === 3); // ==는 일치한다를 뜻함.
console.log(3 !== 3); // !==일치하지 않는다를 뜻함.

🔍 연산자 사용 shift + 7 누르면 &&(and 연산자)가 나온다.

and 연산자
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);

or 연산자
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);

not 연산자
console.log(!true);
console.log(!false);
console.log(!!true);
console.log(!!false);

✔️ typeof 연산자

let name = 'codeit';

function sayHello(){
  console.log('Hello!');
};

console.log(typeof name); // string 출력
console.log(typeof sayHello); // function 출력

console.log(typeof 'hello' + 'codeit'); // stringcodeit이 출력된다. typeof 'hello'가 먼저 변환되서 string으로 변환된 후 +연산자로 인해 'codeit'문자열이 함께 출력된다.

console.log(typeof 8 - 3); //NaN(not a number)가 출력된다. 사칙연산보다 typeof 연산자가 먼저 처리되기 때문이다.

console.log(typeof typeof 8); // string 출력
console.log(typeof 'number'); // string 출력

✔️ 연산자 우선순위

자바스크립트에는 기본적인 사칙연산 외에도 다양한 연산자가 있다
이 모든 연산자에는 우선순위가 매겨져 있는데 우선순위 숫자가 클수록 먼저 실행된다. 순위가 같으면 왼쪽부터 시작해서 오른쪽으로 연산이 수행된다.

🔍 연산자 우선순위로 푸는 예시

typeof (6 * 2 === 11 || 13 - 7 < 7 && !true);

typeof (6 * 2 === 11 || 13 - 7 < 7 && false);

typeof (12 === 11 || 6 < 7 && false);

typeof (false || true && false);

typeof (false || false);

typeof false;

📌 참조 링크
MDN 연산자 우선순위

✔️ 형 변환 Ⅰ

형 변환(Type Conversion)이란 처음에 값으로 정해진 자료형을 다른 자료형으로 바꾸는 것을 말한다.

console.log('10' + '5'); // 문자열 15가 출력
console.log(10 + 5); // 숫자 15가 출력

String, Number, Boolean
console.log(Number('10') + Number('5'));
console.log(String(10) + String(5));

숫자 ➡️ 문자
let x = 123;
console.log(x);
console.log(String (x));
console.log(typeof x);
console.log(typeof String(x));

불린 ➡️ 문자
let y = true;
console.log(y);
console.log(String(y));
console.log(typeof y);
console.log(typeof String(y));

문자 ➡️ 숫자
let x = '문자'
console.log(x);
console.log(Number(x)); // nan으로 나타난다.
console.log(typeof x);
console.log(typeof Number(x));

let x = ‘123’
console.log(x);
console.log(Number(x)); // 123으로 나타난다.
console.log(typeof x);
console.log(typeof Number(x));

불린 ➡️ 숫자
let y = true;
console.log(y);
console.log(Number(y)); // true를 숫자로 바꾸면 1로 나타난다.
console.log(typeof y);
console.log(typeof Number(y));

let y = false;
console.log(y);
console.log(Number(y)); // false를 숫자로 바꾸면 0으로 나타난다.
console.log(typeof y);
console.log(typeof Number(y));

문자 ➡️ 불린
let x = ‘문자’
console.log(x);
console.log(Boolean(x)); // 어떤 값을 불린으로 변환할때는 true값이 된다.
console.log(typeof x);
console.log(typeof Boolean(x));

숫자 ➡️ 불린
let y = 123;
console.log(y);
console.log(Boolean(y)); // 어떤 값을 불린으로 변환할때는 true값이 된다.
console.log(typeof y);
console.log(typeof Boolean(y));

false로 변환되는 경우 : 없거나 비어있는 듯한 느낌을 주는 값

문자 ➡️ 불린
let x = ' '
console.log(x);
console.log(Boolean(x)); // false 값이 된다.
console.log(typeof x);
console.log(typeof Boolean(x));

숫자 ➡️ 불린
let y = 0;
console.log(y);
console.log(Boolean(y)); // false 값이 된다.
console.log(typeof y);
console.log(typeof Boolean(y));

let y = NaN;
console.log(y);
console.log(Boolean(y)); // false 값이 된다.
console.log(typeof y);
console.log(typeof Boolean(y));

Quiz. 퀴즈

다음 보기들 중 코드의 결과가 true인 것을 모두 선택하세요.

1. Boolean("false")
2. Boolean(6 % 2)
3. Boolean(NaN) || Boolean('0')
4. Boolean(type of false)

⭕️ 답은 1, 3, 4

(1) 선택지를 자세히 보면, 불린 false가 아니라 문자열 false이기 때문에 결과는 true이다.

(2) 6 % 2의 결과는 0 이다. 결국 Boolean(0)이 되기 때문에 결과는 false가 된다.

(3) Boolean(NaN)은 false이고, Boolean('0')은 문자열 0을 불린형으로 형 변환 한 것이기 때문에 true이다. 결국 false || true 가 되기 때문에, 결과는 true가 된다.

(4) typeof 연산자를 사용하고 있다., 이 선택지를 다시 정리하면 Boolean('boolean') 이 된다. 문자열 boolean을 불린형으로 형 변환 하기 때문에 결과는 true이다.

따라서, 결과가 true인 선택지를 모두 고르면 1번, 3번, 4번 이다.

✔️ 형 변환 Ⅱ

프로그래밍에서는 서로 다른 자료형의 연산을 오류로 처리한다. 하지만, 자바스크립트는 상황에 따라 유연하게 자동으로 처리하므로 장단점이 있다.

• 산술 연산(+, -, *, /, %, **)

console.log(4 + '2');

👉 42
(일반적으로 자바스크립트에서 '+'는 숫자를 더하는 것보다 문자열을 연결하는 것이 강하다.)

console.log(4 + 2);

👉 6

console.log(4 - true);

👉 3
(true를 Number로 자동 변환하여 1로 처리)

console.log(4 * false);

👉 0
(false를 Number로 자동 변환하여 0로 처리)

console.log(4 / ‘2’);

👉 2
(나누기는 더하기와 달리 ‘2’ 문자열로 처리하지 않고 숫자로 처리한다.)

console.log(‘4’ * true);

👉 4
(‘4’는 숫자 4, true는 1로 처리)

console.log(4 % ‘two’);

👉 NaN
(‘two’라는 문자열은 숫자형으로 변환했을 때, NaN으로 변한다. NaN값은 어떤 값과 연산해도 NaN값이 나온다.)

• 관계 비교 연산(<, <=, >, >=)

특별한 경우를 제외하며 산술연산자처럼 숫자형으로 바꿔서 비교하는 것이 일반적이다.

console.log(2 < ‘3’); //true가 출력된다.

console.log(2 > true); //true가 출력된다.

console.log(‘2’ <= false); //false가 출력된다.

console.log(‘two’ >= 1); //false가 출력된다. 문자열 ’two’가 NaN으로 형변환. 두값을 비교하는 연산에서는 true 혹은 false 중 하나의 결과값이 나와야하므로 비교가 불가능한 경우에도 false가 나온다.

• 같음 비교 연산(===, !==, ==, !=)

console.log(1 === ‘1’); // 일치(===), 불일치(!==)

👉 false

console.log(1 === true);

👉 false

console.log(1 == ‘1’); //동등(==), 부등(!=)

👉 true

console.log(1 == true);

👉 true
(true가 숫자 1로 변환됨.)

❗️일치비교는 형변환이 일어나지 않지만, 동등비교는 숫자형태로 형변환이 일어나기 때문에 값이 다르게 나온다.

등호 두개를 사용하게 되면 형변환이 일어나기 때문에 코드가 조금 더 복잡해지면 우리가 예상하지 못한 형태로 형 변환이 될 가능성이 있다. 그래서 특별한 경우가 아니라면 두 값이 서로 같은 지 비교할 때는 등호 두개보다는 세개를 이용하는 것이 조금 더 안전한 코드를 작성하는 데에 도움이 된다.

✔️ 템플릿 문자열

template: 일정한 툴, 형식
let year = 2018;
let month = 3;
let day = 11;

console.log(‘생년월일은 ‘ + year + ’년 ‘ + month + ‘월 ‘ + day + ‘일 ‘ + ‘입니다.’);

코드가 너무 길어서 읽기가 불편함 변수를 활용하는 구간에 +를 매번 넣어줘야 해서 불편함.

이런 상황에서 템플릿 문자열을 사용하면 코드를 조금 더 가독성있게 사용, 쉽게 작성.

템플릿 문자열을 만드는 방법 시멘틱(``)사용한다.

console.log(`생년월일은 2018년 3월 11일 입니다.`);

console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`);

console.log(`${myNumber}의 두배는 ${getTwice(myNumber)}입니다.`);

문자열을 연결할 때, + 기호를 쓸수도 있지만, 템플릿 문자열을 활용하면
좀 더 쉽고 편하게 작성할 수 있다.

✔️ null과 undefined

자바스크립트 자료형(data type)에는 숫자, 문자열, 불린뿐만 아니라 null과 undefined의 특별한 값의 자료형이 있다. 이것들이 특별한 이유는 자바스크립트에서 ‘값이 없다’라는 의미를 가지고 있다.

그런데, 같은 의미의 자료형이 두 개나 있는 이유는 이 자료형의 쓰임에 미묘한 차이가 있기 때문이다.

null은 값이 없다는 것을 의도적으로 표현할 때 사용하는 값으로 의도적인 없음!을 뜻한다.

undefined는 우리가 직접 값을 표현하기 보다 코드를 실행하면서 값이 없다는 것을 확인하는 값으로 처음부터 없음!을 뜻한다.

let codeit;
console.log(codeit);

—> undefined

자바스크립트에서 값이 주어지지 않는 변수에는 기본적으로 Undefined값을 가지고 있다.

다시말해서, undefined는 선언을 한 다음 값을 정해주지 않았다는 것을 의미한다.

그리고 코드를 작성하는 사람이 의도적으로 비어있는 값을 표현하고 싶을 때는

codeit = null;
console.log(codeit);

다시말해서, null은 의도적으로 없다라는 의미의 값을 지정할 때 사용하는 자료형이다.

🔍 null과 undefined

console.log(null == undefined) 👉 true
console.log(null === undefined) 👉 false

null과 undefined는 서로 동등하지만, 일치하지는 않는다.

codeit = undefined;
console.log(codeit);

이렇게 작성해도 결과값은 undefined가 나온다.
그런데 이런 방식은 null과 undefinedf를 구분하는 데 혼란을 주기 때문에 의도적으로 값이 없는 형태로 표현하려면 반드시 null을 사용할 것을 권장한다.

🔍 컵에 물을 담아 마시는 상황을 비유한다면,

먼저 물을 마시려면 빈컵을 가져와야 하는데, 컵이라는 변수를 선언해야한다.처음에 아무것도 없었던 컵을 가져오는 상황을 undefined으로 본다.

let cup;
console.log(cup); // undefined

컵에 물을 받는다. 컵에 물이 들어가는 것

cup = ‘물’;
console.log(cup); // 물이 출력된다.

마지막으로 물을 마신다. 물을 마시는 건의도적으로 이 컵을 비운다. 이 상황을 코드로 표현할 때 컵이라는 변수에 null이라는 값을 할당한다.

cup = null;
console.log(cup); // null

추상화

✔️ 할당 연산자

🔍 할당 연산자 (Assignment operators)

let name = ‘코드잇’;
let x = 5;

x = x - 2;
console.log(x);

수학적으로는 성립이 안된다. 수학에서 등호는 서로 같다는 의미를 가진다. 자바스크립트에서는 =를 할당연산자라고 한다. 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당한다.

할당 연산에도 순서가 있다. 가장 먼저 =기준 오른편부터 본다.(할당 연산자의 오른쪽부터 계산한다.)
예를 들어,

x=5, x-2=3 이라는 식이 있다면, 3을 왼쪽 연산자에 할당한다. 즉 이 코드는 x의 값을 2만큼 줄여주는 식으로 해석할 수 있다.

✔️ 복합할당 연산자

할당 연산자와 결합해서 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 해주는 연산자를 복합 할당 연산자(Compound assignment operators)라고 한다.

• 다음 두줄은 같다.
  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;

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

변수의 값을 1씩 증가시키거나 감소시킬 때는 복합 할당 연산자보다 더 간략하게 쓰일 수 있는 증가연산자, 감소연산자가 있다. 증가연산자는 더하기 기호(++)를 연달아 쓰고 감소연산자는 빼기 기호(--)를 연달아 쓴다.

• 다음 세 줄은 같은 의미이다.
  x = x + 1;
  x += 1;
  x++;

• 다음 세 줄은 같은 의미이다.
  x = x - 1;
  x -= 1;
  x--;

✔️ return문 제대로 이해하기

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

console.log(square(3));

return문에는 결과값을 돌려주는 역할말고도 하나의 역할이 더 있다. 그것은 바로 함수의 실행을 중단하는 것

말그대로 함수 내부에서 return 키워드가 나오면 함수의 실행은 그 지점에서 중단이 된다.

✔️ 옵셔널 파라미터

미리 파라미터 값을 할당한 경우 Optional parameters라고 부른다.

Function introduce(name, age, nationality = ‘한국’){
  console.log(`제 이름은 ${name}입니다.`);
  console.log(`나이는 ${age}살 이고,`);
  console.log(`국적은 ${nationality}입니다.`);
};

옵셔널 파라미터는 선언 할 때 반드시 생성한 다음 가장 뒤쪽으로 선언을 해야한다.

✔️ 변수의 scope

변수에는 유효한 범위가 있어서 그 범위를 벗어나게 되면 오류가 발생한다.

Function myFunction() {
  let x = 3; // 로컬 변수, 지역 변수 (Local Variable)
  console. log(x);
};

블록문 밖에서 선언한 변수는 블록문 안에서도 쓸 수 있다. 코드를 작성할 수 있는 어느 곳에서나 사용할 수 있다.

let x = 3

Function myFunction() {
  console.log(x); /// 글로벌 변수, 전역 변수 (Global Variable)
};

블록문 내에서 변수를 사용하게 되면 로컬변수가 있는 지 먼저 확인한 다음 없을 경우에는 글로벌 변수를 확인한다.

✔️ 상수

변한다는 의미를 가진 변수와 달리 절대 변하지 않고 항상 일정한 값을 가지는 것을 상수라고 한다.

🔍 상수(constant)
let pi = 3.14; // 원주율 —> 상수

상수이므로 Let 대신에 const를 선언한다.
특징 1. 뒤에 다시 지정 불가 ex) pi = 3; (x)
특징 2. 값을 선언 해줘야한다. ex) const PI; (x)

상수는 이름을 지을 때 대문자와 밑줄로 작성한다. 이름을 들어가는 모든 알파벳을 대문자 두 개이상의 단어를 연결할때에는 밑줄로 연결한다.
ex) const MY_NUMBER

그 이유는 상수와 변수를 구분하기 위해서이다.

const PI = 3.14;
let radius = 0; //반지름

예시문제

const X = 1500;

function myFunction() {
  X = 1500 * 1.5;
  console.log(X);
}

myFunction();
console.log(X);

1번 줄에서 const 키워드로 X라는 상수를 만들면서 숫자 1500을 할당했다. 그리고 3번 줄부터myFunction이라는 함수를 선언하고 있으며 함수의 동작 부분에서 X의 값을 변경하려고 하고 있다.
그런데 X는 const키워드로 선언한 상수이기 때문에 값의 변경이 불가하다.
따라서 이 부분에서 오류가 발생하고, 코드는 더 이상 실행되지 않게 된다.

제어문

✔️ if문

🔍 if문 (if statement)

if (조건부분) {
동작부분
}

let temperature = 1;

if (temperature <=0) {
  console.log(‘물이 업니다.’);
} else {
  console.log(‘물이 얼지 않습니다.’);
}

✔️ Else if문

let temperature = -105;

if (temperature <=0) {
  console.log(‘물이 업니다.’);
} else {
  if(temperature <100) {
    console.log(‘물이 얼지도 끓지도 않습니다.’);
  } else {
     console.log(‘물이 끓습니다.’);
  }
}

이 조건문은 가독성이 좋아보이지 않음! 이러한 문제점을 해결하기 위해서 else if문을 사용하는 것이 좋다.

여기서 조건 하나를 더 만들어보면,

let temperature = - 105;


if (temperature <= 0){
  console.log('물이 업니다.');
} else {
  if (temperature < 100) {
    console.log('물이 얼지도 끓지도 않습니다.');
  } else {
    if (temperature < 150) {
      console.log('물이 끓습니다.');
    } else {
      console.log('물이 모두 수증기가 되었습니다..');
    }
  }
}

로 만들 수 있고 이를 else if를 사용하여 다음과 같이 나타낼 수 있다.

let temperature = 85;

if (temperature <= 0){
  console.log('물이 업니다.');
} else if(temperature <100){
  console.log('물이 끓지도 얼지도 않습니다.');
} else if(temperature < 150){
  console.log('물이 끓습니다.');
} else{
  console.log('물이 끓습니다.');
}

✔️ switch문

switch문은 어떤 값을 입력했는지에 따라 다르게 동작하는 문법이다.

switch문의 기본구조는,

switch(비교할_값) {
case 조건값_1:
동작부분;
break;
case 조건값_2:
동작부분;
break;
default: //비교할 값이 모든 조건값과도 일치하지 않을 동작값, 가정문에서 else와 비슷하다.
동작부분;
}

예시 <심리테스트>

let myChoice = 2; //선택지를 담을 변수

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사이의 숫자를 선택해 주세요.');
}

if문을 활용하면 switch문을 if문으로 대체할 수도 있습니다.

if (myChoice === 1) {
  console.log('토끼를 선택한 당신, ...');
} else if (myChoice === 2) {
  console.log('고양이를 선택한 당신, ...');
} else if (myChoice === 3) {
  console.log('코알라를 선택한 당신, ...');
} else if (myChoice === 4) {
  console.log('강아지를 선택한 당신, ...');
} else {
  console.log('1에서 4사이의 숫자를 선택해 주세요.');
}

🔍 if문과 switch문의 공통점, 차이점

• 공통점: 특정한 조건에 따라 다르게 동작하는 코드를 만들 수 있다

• 차이점: if문은 어떤 넓은 범위를 만족하는 조건식을 만들 때
  switch문은 특정한 값에 일치하는 조건을 만들 때

• 주의할 점: if문은 등호를 반드시 3개(===)입력해야한다.
  switch문은 암시적 형 형변환을 허용하지 않는다.

✔️ for문

for문의 기본 구조

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

for (let i = 1; i <= 10; i++) {
	console.log(`${i} 코드잇 최고`);
}

for문의 특징

(1) 추가동작부분을 꼭 채울 필요는 없다.

for 반복문에서 추가동작부분은 사실 꼭 채울 필요는 없다.
추가동작부분에서 i를 1씩 증가시키는 부분이 동작부분에 들어가도 문제는 없다.

for (let i = 1; i <= 10;) {
	console.log(`${i} 코드잇 최고`);
	i++;
} 

위 코드처럼 동작부분 아래에 i를 증가시켜도 아무런 문제 없이 똑같은 결과가 출력이 된다.
동작부분에서 i를 증가시켰고, 추가동작부분에는 아무것도 작성하지 않았기 때문에 그냥 추가 동작부분에서 아무 동작도 하지 않는 것이기 때문이다. 하지만, for문의 특성상, 이 추가동작부분이 있기 때문에 여기 동작부분에서는 실제로 반복하고자하는 내용들만 집중하고 어떤 조건과 관련된 부분은 이 소괄호에 집중하면서 좀 더 목적에 맞는 코드를 작성할 수 있다.

(2) 초기화부분에서 생성한 변수는 for문의 로컬변수다.

for 반복문의 초기화 부분에서 생성한 변수는 for문 안에서의 로컬변수가 된다.

for (let i = 1; i <= 10; i++) {
	console.log(`${i} 코드잇 최고`);
}

console.log(i); // Error!!

for문 안에서 생성한 로컬변수이기 때문에 for 반복문이 종료되고 나서 for반복문 밖에서 변수를 사용하려고 하면 오류가 발생한다. 사소하지만 이런 부분들도 꼭 기억해야 함!

(3) 초기화 부분도 반드시 채울 필요는 없다.

for 반복문에서 초기화부분도 사실 꼭 채울 필요는 없다.

let i = 1;
for (; i <= 10; i++) {
	console.log(`${i} 코드잇 최고`);
}

위 코드처럼 for 반복문의 로컬변수를 꼭 활용하지 않아도 반복문 밖에 있는 글로벌 변수를 활용해도 아무런 문제없이 같은 결과를 출력합니다. 단! for문의 소괄호 안쪽 가장 첫번째 세미콜론은 생략할 수 없다.
저 세미콜론은 초기화부분과, 조건부분을 구분하는 세미콜론이기 때문에 초기화 부분의 코드를 생략하더라도 세미콜론 만큼은 생략해선 안된다!
for문의 소괄호 안쪽은 반드시 세미콜론 2개가 필요하다. 그렇지 않으면 실행 오류를 만나게 된다는 점을 꼭 기억해야 함!

Quiz 1. 퀴즈

주어진 높이(height)에 맞게 '*'로 삼각형을 그려주는 함수 printTriangle을 완성해 보자.
함수를 잘 작성했다면 결과는 아래와 같이 출력되어야 한다.

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

⭕️ 정답

function printTriangle(height) {
	let star = ''
	for(let i = 0; i < height; i++){
	  star = star + '*';
	  console.log(star);
	}
}

// 테스트 코드
console.log('높이: 1');
printTriangle(1);

console.log('높이: 3');
printTriangle(3);

console.log('높이: 5');
printTriangle(5);

Quiz 2. 퀴즈

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

⭕️ 정답

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

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

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

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

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

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

✔️ while문

while문의 기본 구조

while (조건부분) {
동작부분
}

let i = 1;

while (i <= 10) {
	console.log(`${i} 코드잇 최고!`);
	i++;
}

for(let i = 1; i <= 10; i++) {
	console.log(`${i} 코드잇 최고!`);
}

let i = 1;

while(i < 100) {
  if(i % 2 !== 0)
    console.log(i);
    i++;
}

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++;
	continue;
	}
	console.log(i);
	I++;
}