Post

데브코스 TIL - Day 44

Posted Updated
By hyemin 25 min read
24년 1월 23일 강의를 들은 내용을 기록한 글입니다.

연산자

📘산술연산자

사칙 연산

종류의미
+왼쪽과 오른쪽 값 더하기
-왼쪽에서 오른쪽 빼기
*왼쪽과 오른쪽 곱하기
/왼쪽으로 오른쪽 나누기
%왼쪽으로 오른쪽을 나눈 나머지
**거듭제곱 할당
Math.pow()와 같은 기능
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const a = 5;
const b = 3;

console.log(`두 수의 합은 ${a + b}입니다`);
console.log(`두 수의 차은 ${a - b}입니다`);
console.log(`두 수의 곱은 ${a * b}입니다`);
console.log(`두 수의 나누기는 ${a / b}입니다`);
console.log(`두 수의 나머지는 ${a % b}입니다`);
console.log(`두 수의 거듭제곱은 ${a ** 2}`);
console.log(`두 수의 거듭제곱은 ${Math.pow(a, 2)}`);

// 두 수의 합은 8입니다
// 두 수의 차은 2입니다
// 두 수의 곱은 15입니다
// 두 수의 나누기는 1.6666666666666667입니다
// 두 수의 나머지는 2입니다
// 두 수의 거듭제곱은 25
// 두 수의 거듭제곱은 25

📘대입연산자

오른쪽에 있는 값을 왼쪽에 대입

종류의미
=연산자를 기준으로 오른쪽에 있는 값을 왼쪽에 대입
+=연산자를 기준으로 왼쪽 값을 오른쪽 값과 더해서 다시 왼쪽 값에 대입
→ a = a + b
-=연산자를 기준으로 왼쪽 값에서 오른쪽 값을 빼고 다시 왼쪽 값에 대입
→ a = a - b
*=연산자를 기준으로 왼쪽 값을 오른쪽 값과 곱하고 다시 왼쪽 값에 대입
→ a = a * b
/=연산자를 기준으로 왼쪽 값을 오른쪽 값으로 나누고 다시 왼쪽 값에 대입
→ a = a / b
%=연산자를 기준으로 왼쪽 값에서 오른쪽 값으로 나눈 나머지를 다시 왼쪽 값에 대입
→ a = a % b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

let a = 5;
const b = 3;

a += b;
console.log(`a += b은 ${a}입니다`);
// a += b은 8입니다

a = 5;
a -= b;
console.log(`a -= b은 ${a}입니다`);
// a -= b은 2입니다

a = 5;
a *= b;
console.log(`a *= b은 ${a}입니다`);
// a *= b은 15입니다

a = 5;
a /= b;
console.log(`a /= b는 ${a}입니다`);
// a /= b는 1.6666666666666667입니다

a = 5;
a %= b;
console.log(`a %= b는 ${a}입니다`);
// a %= b는 2입니다

📘증감연산자

증가 연산자와 감소 연산자의 줄임말

종류의미
++aa의 값을 1 증가시킨 후에 연산
a++연산을 진행하고 a의 값을 1 증가
--aa의 값을 1 감소시킨 후에 연산
a–연산을 진행하고 a의 값을 1 감소
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

let a = 5;
++a;
console.log(`++a는 ${a}입니다`);
// ++a는 6입니다

a = 5;
console.log(`a++는 ${a++}입니다`);
console.log(`a를 다시 출력,a = ${a}`);
// a++는 5입니다
// a를 다시 출력,a = 6

let b = 10;
--b;
console.log(`--b는 ${b}입니다`);
// --b는 9입니다

b = 10;
console.log(`b--는 ${b--}입니다`);
console.log(`b를 다시 출력, b = ${b}`);
// b--는 10입니다
// b를 다시 출력, b = 9

📘관계연산자

같은지 다른지 큰지 작은지 비교

종류의미
==두 값이 같다
!=두 같이 다르다
>연산자를 기준으로 왼쪽이 오른쪽보다 크다
<연산자를 기준으로 오른쪽이 왼쪽보다 크다
>=연산자를 기준으로 왼쪽이 오른쪽보다 크거나 같다
<=연산자를 기준으로 오른쪽이 왼쪽보다 크거나 같다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const a = 3;
const b = 5;

console.log(`a는 b와 같다 ${a === b}`);
console.log(`a는 b와 같지 않다 ${a !== b}`);
console.log(`a는 b보다 크다 ${a > b}`);
console.log(`b는 a보다 크다 ${a < b}`);
console.log(`a는 b보다 크거나 같다 ${a >= b}`);
console.log(`b는 a보다 크거나 같다 ${a <= b}`);

// a는 b와 같다 false
// a는 b와 같지 않다 true
// a는 b보다 크다 false
// b는 a보다 크다 true
// a는 b보다 크거나 같다 false
// b는 a보다 크거나 같다 true

📘논리연산자

두개의 조건식 등을 결합하여 하나의 결과값을 만듬

종류의미
!(부정연산자)피연산자의 결과를 모두 반대로 만듬
&&(and연산자) 피연산자가 모두 참인지
||(or연산자) 피연산자 중 하나라도 참인지
??(널 병합 할당) 왼쪽 연산자가 null 또는 undefined인 경우 오른쪽 피연산자를 대입
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const a = 1;
const b = 1;
console.log(`a && b = ${a && b}`);
console.log(`a || b = ${a || b}`);
// a && b = 1
// a || b = 1

const c = 1;
const d = 0;
console.log(`c && d = ${c && d}`);
console.log(`c || d = ${c || d}`);
// c && d = 0
// c || d = 1

const e = undefined;
const f = 110;
const g = null;
console.log(e ?? f); // 110
console.log(e ?? g); // null
console.log(f ?? g); // 110

!! 타입 강제 변환

  • 변수를 boolean으로 강제 변환하는 자바스크립트, 타입스크립트 패턴
1

!!변수;
  • 첫번째 !로 변수를 boolean으로 변환
  • 두번째 !로 값을 논리적으로 연산

예시

1
2
3
4
5
6

const element = { id: 2, title: "text" };
const step1 = !element;
const step2 = !!element;

console.log("step1,", step1); // step1, false
console.log("step2,", step2); // step2, true
  • step1:
    • element는 값이 존재하므로 true한 값,
    • ! 부정연산자를 사용하여 false로 변환
  • step2
    • step1의 false값을 다시 ! 부정연산자를 사용하여 결과를 부정
    • 최종 결과로 true가 됨

예제

  • element.isAdminOnly가 true일 때,
  • admin user(userProfile.userInfo.roles에 ‘admin’이 포함됨)에게만 메뉴 보여주기
1
2
3
4
5
6
7

{
  sidebarContent.filter((element) => {
    return element.isAdminOnly
      ? userProfile?.userInfo.roles.includes("admin")
      : !!userProfile;
  });
}
  • userProfile이 존재할 때는 true를 반환
  • userProfile가 존재하지 않을 때는 false를 반환

평가문제

1. 사용자로부터 3개의 정수를 받아서, 3개의 수를 곱한 결과를 출력하라.

1
2
3
4

function solution(a, b, c) {
  return a * b * c;
}
console.log(solution(2, 3, 4));

2. 사용자로부터 3개의 정수를 받아서, 3개의 수를 더한 값과 평균을 출력하라.

1
2
3
4
5
6
7
8
9

function solution(a, b, c) {
  return a + b + c;
}

const sum = solution(2, 3, 4);
console.log(`3개의 정수를 더한 값, ${sum}`);
console.log(`3개 정수의 평균 값, ${sum / 3}`);
// 3개의 정수를 더한 값, 9
// 3개 정수의 평균 값, 3

📘삼항연산자

■ 문법

1

조건식 ? 참일 때 : 거짓일 때

■ 예제

1
2
3
4
5

const eg1 = 10 > 5 ? "참" : "거짓";
const eg2 = 10 < 5 ? "참" : "거짓";

console.log("eg1:", eg1); // eg1: 참
console.log("eg2:", eg2); // eg2: 거짓

📘타입스크립트 not null 연산자

■ 문법

1
2
3

변수명!

ojb!.key;

■ 예제

1
2
3
4

// 'e' is possibly 'null'.(18047)
function processEntity(e: string | null) {
  const s = e.toUpperCase();
}

타입 오류 해결하기

1
2
3
4
5
6
7
8
9
10

// typeof를 사용한 타입 가드
function processEntity(e: string | null) {
  if (typeof e !== "string") return;
  const s = e.toUpperCase();
}

// non-null assertion operator 사용해서 null이 아님을 명시
function processEntity(e: string | null) {
  const s = e!.toUpperCase();
}

분기문(조건문)

어떤 의미를 이루게 하거나 이루지 못하게 하기 위하여 갖추어야할 상태나 요소

📘if문

  • 가정법
  • 만약에 …라면

■ 문법

1
2
3

if (수행조건) {
  // 수행하고 싶은 일
}

■ 예제

1
2
3
4

const a = 10;
if (a > 5) {
  console.log("a는 5보다 큽니다."); // 입력 값은 5보다 큽니다.
}

📘if-else문

  • else: 그 밖의

■ 문법

1
2
3
4
5

if (수행조건) {
  // 수행하고 싶은 일
} else {
  // 수행조건이 거짓일 때 수행할 일
}

■ 예제

1
2
3
4
5
6
7
8
9
10

function solution(a) {
  if (a > 5) {
    console.log("a는 5보다 큽니다.");
  } else {
    console.log("a는 5보다 크지 않습니다.");
  }
}

solution(10); // a는 5보다 큽니다.
solution(5); // a는 5보다 크지 않습니다

■ 평가문제

1. 사용자로부터 하나의 정수를 입력받는다. 조건에 맞는 문자열을 출력하라.

  • 입력한 값이 짝수이면 출력 결과로 “입력한 수는 짝수입니다”
  • 입력한 값이 홀수이면 출력결과로 “입력한 수는 홀수입니다”
1
2
3
4
5
6
7
8
9
10

function solution(a) {
  if (a % 2 === 0) {
    console.log("입력한 수는 짝수입니다");
  } else {
    console.log("입력한 수는 홀수입니다");
  }
}

solution(10); // 입력한 수는 짝수입니다
solution(5); // 입력한 수는 홀수입니다

2. 사용자로부터 세개의 정수를 입력받는다. 입력 받은 세개의 정수를 비교하여 그 중 가장 작은 최소값을 출력하는 프로그램을 작성하라

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function solution(a, b, c) {
  if (a > b) {
    if (b > c) {
      console.log(`가장 작은 값은 ${c}입니다`);
    } else {
      console.log(`가장 작은 값은 ${b}입니다`);
    }
  } else {
    if (a < c) {
      console.log(`가장 작은 값은 ${a}입니다`);
    } else {
      console.log(`가장 작은 값은 ${c}입니다`);
    }
  }
}

solution(10, 50, 3); // 가장 작은 값은 3입니다
solution(2, 1, 7); // 가장 작은 값은 1입니다
solution(3, 6, 9); // 가장 작은 값은 3입니다

📘if-else if문

  • else if: 조건 자체가 계속 늘어날 수 있다.

■ 문법

1
2
3
4
5
6
7

if (수행조건1) {
  // 수행조건1이 참일 때 수행하고 싶은 일
} else if (수행조건2) {
  // 수행조건2가 참일 때 수행하고 싶은 일
} else {
  // 수행조건1, 수행조건2가 모두 거짓일 때
}

■ 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function solution(a) {
  if (a > 5) {
    console.log("a는 5보다 큽니다.");
  } else if (a === 5) {
    console.log("a는 5와 같습니다.");
  } else if (a < 5) {
    console.log("a는 5보다 크지 않습니다.");
  } else {
    console.log("입력값이 잘못되었습니다.");
  }
}

solution(10); // a는 5보다 큽니다.
solution(5); // a는 5와 같습니다.
solution(3); // a는 5보다 크지 않습니다.

■ 평가문제

1. 사용자로부터 점수값을 입력 받는다. 점수값은 정수이다. 조건에 맞는 문자열을 출력하라

  • 60점 이상이면 “합격입니다.”
  • 60점 미만이면 “불합격입니다.”
  • 90점 이상이면 추가로 “장학대상입니다.”
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function solution(score) {
  if (score >= 60) {
    if (score >= 90) {
      console.log("장학대상입니다.");
    }
    console.log("합격입니다.");
  } else {
    console.log("불합격입니다.");
  }
}

solution(90); // 장학대상입니다.\n 합격입니다.
solution(60); // 합격입니다.
solution(59); // 불합격입니다.

2. 사용자로부터 나이를 입력받는다. 나이는 정수이다. 조건에 맞는 문자열을 출력하라

  • 13세 미만이면 “어린이입니다.”
  • 13세 이상 19세 미만이면 “청소년입니다.”
  • 19세 이상이면 “성인입니다.”
1
2
3
4
5
6
7
8
9
10
11
12
13

function solution(age) {
  if (age < 13) {
    console.log("어린이입니다.");
  } else if (13 <= age && age < 19) {
    console.log("청소년입니다.");
  } else {
    console.log("성인입니다.");
  }
}

solution(19); // 성인입니다.
solution(15); // 청소년입니다.
solution(12); // 어린이입니다.

3. 사용자로부터 성적 점수인 정수 값을 한개 입력 받아 그 값에 대한 점을 표시하는 프로그램을 작성하라.

  • 91점 이상: A
  • 90점 ~ 81점: B
  • 80점 ~ 71점: C
  • 70점 ~ 61점: D
  • 60점 미만: F
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function solution(score) {
  let degree = "A";
  if (90 < score) {
    degree = "A";
  } else if (80 < score && score <= 90) {
    degree = "B";
  } else if (70 < score && score <= 80) {
    degree = "C";
  } else if (60 < score && score <= 70) {
    degree = "D";
  } else {
    degree = "F";
  }
  console.log(`학점은 ${degree}입니다.`);
}

solution(91); // 학점은 A입니다.
solution(81); // 학점은 B입니다.
solution(71); // 학점은 C입니다.
solution(61); // 학점은 D입니다.
solution(59); // 학점은 F입니다.

반복문

📘 while문

  • 반복조건을 만족하는 동안 반복 문장을 수행
  • 반복조건을 만족하지 않으면 while문을 빠져나감

■ 문법

1
2
3

wilte(반복조건){
  // 반복문장
}

■ 예제

1
2
3
4
5
6
7
8
9
10
11

let i = 0;

while (i < 5) {
  console.log(`Programing, ${i}`);
  i++;
}
// Programing, 0
// Programing, 1
// Programing, 2
// Programing, 3
// Programing, 4
  • 구구단코드 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let i = 1;
while (i < 10) {
  console.log(`2 x ${i} = ${2 * i}`);
  i++;
}

// 2 x 1 = 2
// 2 x 2 = 4
// 2 x 3 = 6
// 2 x 4 = 8
// 2 x 5 = 10
// 2 x 6 = 12
// 2 x 7 = 14
// 2 x 8 = 16
// 2 x 9 = 18

■ 평가문제

1. 1월부터 12월까지 출력하라

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let i = 1;

while (i < 13) {
  console.log(`${i}월`);
  i++;
}

// 1월
// 2월
// 3월
// ...
// 10월
// 11월
// 12월

2. 사용자로부터 입력받은 숫자에 해당하는 구구단을 출력하시오.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function multiplicationTable(num) {
  let i = 1;
  while (i < 10) {
    console.log(`${num} x ${i} = ${num * i}`);
    i++;
  }
}
multiplicationTable(6);

// 6 x 1 = 6
// 6 x 2 = 12
// 6 x 3 = 18
// 6 x 4 = 24
// 6 x 5 = 30
// 6 x 6 = 36
// 6 x 7 = 42
// 6 x 8 = 48
// 6 x 9 = 54

3. 반복문을 사용해서 1부터 10까지의 합을 출력하라

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let sum = 0;
let i = 1;
while (i <= 10) {
  sum += i;
  console.log(`합: ${sum}`);
  i++;
}

// 합: 1
// 합: 3
// 합: 6
// 합: 10
// 합: 15
// 합: 21
// 합: 28
// 합: 36
// 합: 45
// 합: 55

4. 반복문을 사용하여 1부터 사용자가 입력한 정수까지의 합을 출력하는 프로그램을 작성하라

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function solution(num) {
  let sum = 0;
  let i = 1;
  while (i <= num) {
    sum += i;
    console.log(`합: ${sum}`);
    i++;
  }
}

solution(6);

// 합: 1
// 합: 3
// 합: 6
// 합: 10
// 합: 15
// 합: 21

5. 배터리를 충전중이다. 1부터 100까지 충전해야하는데, 현재 충전양을 표시하고, 100이 넘어가면 “충전이 완료되었습니다.” 라고 출력하라

1
2
3
4
5
6
7
8
9
10
11
12
13

let i = 1;
while (i <= 100) {
  console.log(`충전중... 현재 배터리:${i}`);
  i++;
}
console.log("충전이 완료되었습니다.");

// 충전중... 현재 배터리:1
// 충전중... 현재 배터리:2
// ...
// 충전중... 현재 배터리:99
// 충전중... 현재 배터리:100
// 충전이 완료되었습니다.

📘 이중 while문

■ 문법

1
2
3
4
5
6

while (조건1) {
  while (조건2) {
    // 조건1과 조건2가 모두 만족할 때 실행시킬 연산
  }
  // 조건1만 만족할 때 실행시킬 연산
}

■ 예제

구구단 2단부터 9단까지 출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

let x = 2;
let y = 1;

while (x < 10) {
  while (y < 10) {
    console.log(`${x} x ${y} = ${x * y}`);
    y++;
  }
  x++;
  y = 1;
}

// 2 x 1 = 2
// 2 x 2 = 4
// 2 x 3 = 6
// ...
// 9 x 7 = 63
// 9 x 8 = 72
// 9 x 9 = 81

■ 평가문제

1. 다음과 같이 출력하도록 프로그램을 작성하되 반드시 이중 while문을 사용하여 작성하여보자.

1
2
3
4
5

*
**
***
****
*****

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let i = 1;
let str = "";

while (i <= 5) {
  let j = 1;

  while (j <= i) {
    str += "*";
    j++;
  }

  console.log(str);
  str = "";
  i++;
}

📘 무한루프

반복 수행이 무한이 일어난다는 것

  • 반복 조건이 어느 시점에 무너질 수 있도록 설계
  • 무한 조건 루프 안에서 어느 시점에 break나 return을 사용해서 빠져나올 수 있어야 함

■ 문법

1
2
3
4
5
6
7
8

function solution() {
  let i = 0;
  while (1) {
    console.log("Programing");
    i++;
  }
  return;
}

📘 for문

변수의 초기화 연산과 증감 연산자를 사용

■ 문법

1
2
3

for (초기문; 조건문; 증감문) {
  // 반복하고자 하는 내용
}

■ 예제

구구단 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function solution(num) {
  for (let i = 1; i < 10; i++) {
    console.log(`${num} * ${i} = ${num * i}`);
  }
}
solution(7);

// 7 * 1 = 7
// 7 * 2 = 14
// 7 * 3 = 21
// 7 * 4 = 28
// 7 * 5 = 35
// 7 * 6 = 42
// 7 * 7 = 49
// 7 * 8 = 56
// 7 * 9 = 63
데브코스, TIL
This post is licensed under CC BY 4.0 by the author.