데브코스 07일차 ( 24.10.22 화 ) JavaScript

워니·2024년 10월 31일

Programmers Front-end

목록 보기

7/27

[Section 01] JavaScript 기초

< 03. 연산자 >

특정한 연산을 하는 자바스크립트 기호

1. 산술 연산자 (이항 산술 연산자)

수학적인 연산을 수행하는 연산자
+, -, *, /, % (나머지), ** (거듭제곱, 지수)

< 연습 문제 >

1. 기본 산술 연산
  a. 두 숫자 10과 5를 a 와 b 에 할당하세요.
  b. 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 연산을 수행하고 결과를 각각의 변수에 
     저장하세요.
  c. 각 연산의 결과를 콘솔에 출력하세요.

< 문제 풀이 >

const a = 10;
const b = 5;

const sum = a + b;
const difference = a - b;
const multiple = a * b;
const quote = a / b;
const remainder = a % b;

console.log(sum, difference, multiple, quote, remainder);

2. 증감 연산자 (단항 산술 연산자)

※ 증감 연산자는 데이터에 직접적으로 사용 불가

2.1. 증가 연산자 `++`

2.2. 감소 연산자 `--`

2.3. 전치 연산 : ~ 하기 전에, 증감 연산자를 항(피연산자) 앞에 사용

2.4. 후치 연산 : ~ 한 후에, 증감 연산자를 항(피연산자) 뒤에 사용

ex)

let a = 10;
++a;
console.log(a);
                // 1 증가 후 할당되었으므로 11 출력
let a = 10;
a++;
console.log(a);
                // 1 증가 후 할당되었으므로 11 출력
let a = 10;
console.log(++a);
                // 1 증가 후 할당되었으므로 11 출력
let a = 10;
console.log(a++);
                // 할당 후 1 증가 되었으므로 할당된 값에 영향 X
                // 10 출력

2.5. 단항 부정 연산자 `-`

ex)
let num = -10;
console.log(-num);   → 10 출력

< 연습 문제 >

1. 증가 및 감소 연산
  a. 변수 `y`에 숫자 7을 할당하세요.
  b. 후위 증가 연산자를 사용하여 `y`를 1 증가시키고, 
     증가하기 전과 후의 값을 각각 출력하세요.
  c. 후위 감소 연산자를 사용하여 `y`를 1 감소시키고, 
     감소하기 전과 후의 값을 각각 출력하세요.
  d. 전위 증가 연산자를 사용하여 `y`를 1 증가시키고, 
     증가한 값을 출력하세요.
  e. 전위 감소 연산자를 사용하여 `y`를 1 감소시키고, 
     감소한 값을 출력하세요.

< 문제 풀이 >

// a
const y = 7;
// b
console.log(y++);   // 7 출력 (증가하기 전의 값)
console.log(y);     // 8 출력 (증가한 후의 값)
// c
console.log(y--);   // 8 출력 (감소하기 전의 값)
console.log(y);     // 7 출력 (감소한 후의 값)
// d
console.log(++y);   // 8 출력 (증가한 값)
console.log(--y);   // 7 출력 (감소한 값)

3. 대입 연산자

3.1. 대입 연산자 `=`

3.2. 복합 대입 연산자

    `+=`, `-=`, `*=`, `/=`, `%=`, `**`

ex)
let num = 10;
num = num + 5;
console.log(num);     → 15 출력

let num = 10;
num += 5;
console.log(num);     → 15 출력

< 연습 문제 >

1. 복합 대입 연산자 연습
- 변수 `x`에 숫자 20을 할당하세요.
- 복합 대입 연산자를 사용하여 `x`에 10을 더하고, 그 결과를 출력하세요.
- 복합 대입 연산자를 사용하여 `x`에서 5를 빼고, 그 결과를 출력하세요.
- 복합 대입 연산자를 사용하여 `x`를 2로 나누고, 그 결과를 출력하세요.
- 복합 대입 연산자를 사용하여 `x`를 3으로 곱하고, 그 결과를 출력하세요.

< 문제 풀이 >

let x = 20;
x += 10;
console.log(x);  // 30
x -= 5;
console.log(x);  // 25
x /= 2;
console.log(x);  // 12.5
x *= 3;
console.log(x);  // 37.5

4. 비교 연산자

피연산자를 비교해서 논리형 값을 반환하는 연산을 수행

4.1. 동등 `==`

자료형까진 비교하지 않는 것, 형 변환을 해서 비교함

4.2. 일치 `===`

데이터 그대로를 비교

ex)
const num = 10;
const strNum = "10";
console.log(num == strNum);   // true 출력

const num = 10;
const strNum = "10";
console.log(num === strNum);   // false 출력

4.3. 부등 `!=`

4.4. 불일치 `!==`

현업에서는 동등과 부등은 사용하지 않음, 형 변환을 하기 때문에 정확한 비교라고 할 수 없음

4.5. ~ 보다 큰 `>`

4.6. ~ 보다 크거나 같은 `>=`

4.7. ~ 보단 작은 `<`

4.8. ~ 보다 작거나 같은 `<=`

>, >=, <, <= 은 형 변환이 일어 남. 문자열을 숫자로 형 변환 시켜 비교함.

< 연습 문제 >

1. 나이 비교
- 두 변수 `age1`과 `age2`에 각각 25와 30을 할당하세요.
- `age1`이 `age2`보다 큰지 비교하여 결과를 콘솔에 출력하세요.
- `age1`과 `age2`가 같은지 비교하여 결과를 콘솔에 출력하세요.
- 삼항 연산자를 사용하여 `age1`이 `age2`보다 큰 경우 "Older", 
  같거나 작은 경우 "Younger or Same"을 출력하세요.

< 문제 풀이 >

const age1 = 25;
const age2 = 30;
console.log(age1 > age2);
console.log(age1 === age2);
console.log(age1 > age2 ? "Older" : "Younger or Same");

//false
//false
//Younger or Same

5. 삼항 연산자 (조건 연산자에 속함)

항 3개로 논리적인 비교를 하는 연산자
간단한 조건처리를 할 때 현업에서 많이 사용함

5.1. `비교 ? 참 : 거짓`

ex)
const money = 3000;
const price = 5000;
const result = money >= price ? "가능" : "불가능";
console.log(result);  // 불가능

-중첩해서 사용가능하나 가독성이 떨어지므로 비추천!

5.2. `NaN (Not a Number)`, `""`, `null`, `undefined`, `false` 를 제외한 모든 값은 참임

ex)
const anonymouse = 10 * 'a';
const res = anonymouse ? "참" : "거짓";
console.log(res);   // 거짓

6. 논리 연산자

6.1. and `&&`

모든 피연산자가 참으로 평가 되어야 함

ex)
const timer = 10;
const res = timer <= 10 %% "10초 남았습니다."
console.log(res);    // 10초 남았습니다.

- 좌항과 우항이 모두 참이고 문자열이 있으면, 우항에 있는 문자열 출력

6.2. or `||`

ex)
const name = "";
const res = name || '고래';
console.log(res);    // 고래

- 초기값 설정하는 용도로 많이 사용

6.3. not `!`

- 실무에서 사용하는 테그닉, `not` 2 번 !!
- 명시적으로 true 나 false가 값으로 주어지지 않았을 때
  명확하게 값을 설정해주는 것
  
ex)
const num = 0;
console.log(!!num ? "참" : "거짓");

< 연습 문제 1 >

1. 논리 연산자 기본
- 변수 `a`와 `b`에 각각 `true`와 `false`를 할당하세요.
- `a`와 `b`의 논리 AND 연산 결과를 출력하세요.
- `a`와 `b`의 논리 OR 연산 결과를 출력하세요.
- `a`의 논리 NOT 연산 결과를 출력하세요.

< 문제 풀이 >

const a = true;
const b = false;

const res1 = a && b;
const res2 = a || b;
const res3 = !a;

console.log(res1);  // false
console.log(res2);  // true
console.log(res3);  // false

< 연습 문제 2 >

2. 여러 조건 결합
- 변수 `x`, `y`, `z`에 각각 임의의 숫자를 할당하세요.
- `x`가 10보다 크고 `y`가 5보다 작은지 확인하는 조건을 작성하고, 
  결과를 출력하세요.
- `x`가 10보다 크거나 `z`가 3보다 큰지 확인하는 조건을 작성하고, 
  결과를 출력하세요.
- `y`가 0이 아닌지 확인하는 조건을 작성하고, 결과를 출력하세요.

< 문제 풀이 >

const x = 4;
const y = 0;
const z = 5;

res1 = x > 10 && y < 5;
res2 = x > 10 || z > 3;
res3 = !(y === 0);

console.log(res1);  // false
console.log(res2);  // true
console.log(res3);  /// false

< 연습 문제 3 >

3. 사용자 로그인 및 권한 확인
- 변수 `isLoggedIn`과 `isAdmin`에 각각 `true` 또는 `false`를 할당하세요.
- 사용자가 로그인했는지 확인하고, 로그인했다면 "Welcome"을, 
  그렇지 않다면 "Please log in"을 출력하세요.
- 사용자가 관리자 권한을 가지고 있는지 확인하고, 
  관리자라면 "Admin access granted"를, 
  그렇지 않다면 "Admin access denied"를 출력하세요.
- 로그인 여부와 관리자 권한을 모두 확인하여, 
  로그인하고 관리자라면 "Full access granted"를, 
  그렇지 않다면 "Restricted access"를 출력하세요.

< 문제 풀이 >

const isLoggedIn = true;
const isAdmin = false;

res1 = isLoggedIn ? "Welcome" : "Please log in";
res2 = isAdmin ? "Admin access granted" : "Admin access denied";
res3 = 
isLoggedIn && isAdmin ? "Full access granted" : "Restricted access";

console.log(res1);  // Welcome
console.log(res2);  // Admin access denied
console.log(res3);  // Restricted access

< 연습 문제 4 >

4. 값의 존재 확인
- 변수 `value1`과 `value2`에 각각 임의의 값을 할당하세요. 
  (예: 숫자, 문자열, `null`, `undefined`)
- 두 변수 중 하나라도 값이 존재하는지 확인하는 조건을 작성하고, 
  결과를 출력하세요.
- 두 변수 모두 값이 존재하지 않는지 확인하는 조건을 작성하고, 
  결과를 출력하세요.

< 문제 풀이 >

const value1 = 32;
const value2 = null;

console.log(value1 || value2 ? "하나라도 존재" : "존재 안함");
console.log(!value1 && !value2 ? "모두 존재 안함" : "하나라도 존재");

// 삼항 연산자를 이용한 풀이법

< 연습 문제 5 >

5. 범위 확인
- 변수 `num`에 임의의 숫자를 할당하세요.
- `num`이 0 이상 100 이하인지 확인하는 조건을 작성하고, 결과를 출력하세요.
- `num`이 0 미만이거나 100 초과인지 확인하는 조건을 작성하고,
   결과를 출력하세요.

< 문제 풀이 >

const num = 34;

res1 = num >= 0 && num <= 100 ? "0이상 100이하" : "0미만 100초과";
res2 = num < 0 || num > 100 ? "0미만 100초과" : "0이상 100이하";

console.log(res1);
console.log(res2);

< 04. 조건문 >

1. `if` 문

1.1. `if` 키워드

소괄호 ( ) 안의 값이 참일 경우 중괄호 { } 안의 값이 출력됨

if (true) {
  console.log("코드가 실행됩니다");
}        // 코드가 실행됩니다

ex)
const num = 10;
if (num % 2 === 0) {
  console.log("짝수입니다");
}        // 짝수입니다

const num = 10;
if (num % 2 === 0) console.log("짝수입니다");

- 중괄호 `{ }` 안의 값이 한 줄 일 때는 중괄호 생략 가능

1.2. `else` 키워드

if 조건이 만족 되지 않으면 else 작동
단독 사용 불가
else if문이 있을 경우 else if문 보다 뒤에 위치해야 함
반드시 1개만 사용할 수 있다

ex)
const num = 9;
if (num % 2 === 0) {
  console.log("짝수입니다.");
} else {
  console.log("홀수입니다.");
}              // 홀수입니다.

1.3 `else if` 키워드

if 조건이 만족 되지 않으면 else if - else 순으로 작동
단독 사용 불가
if 문을 여러 조건 처리할 때 사용

const num = 9;
if (num > 0) {
  console.log("양수");
} else if (num < 0) {
  console.log("음수");
} else {
  console.log("제로");
}

- else는 위에서 설정한 조건들이 모두 아닐 때 적용되므로
  굳이 조건 작성 필요 없음

2. `switch` 문

값에 따라 조건 처리를 하는 조건문, 표현식이 아닌 값이 무조건 와야 한다.
switch 문으로 작성할 수 있는 코드는 if 문으로 작성할 수 있다
하지만 if 문으로 작성할 수 있는 코드를 switch 문이 100% 작성할 순 없다

2.1. `switch` 키워드

case, break, default 키워드와 함께 사용할 수 있음

ex)
const num = 10;
switch (num) {
  case 10:
    console.log("num은 10입니다");
  case 9:
    console.log("num은 9입니다");
}
// num은 10입니다
// num은 9입니다   둘 다 출력

2.2. `break` 키워드

break 키워드를 만날 때까지 변수 값과 case 값이 같으면 계속 출력

ex)
const num = 10;
switch (num) {
  case 10:
    console.log("num은 10입니다");
    break;
  case 9:
    console.log("num은 9입니다");
    break;
}
// number 10입니다   출력

2.3. `default` 키워드

if 문의 else와 같은 역할, 마지막 조건문을 작성

ex)
const num = 2;
switch (num) {
  case 10:
    console.log("num은 10입니다");
    break;
  case 9:
    console.log("num은 9입니다");
    break;
  default:
    console.log("값이 모두 일치하지 않음");
    break;
}
    // 값이 모두 일치하지 않음    출력

3. `삼항 연산자`

1. 연산자에서 배웠음

연습 문제

1. 학점 계산기
   학생의 점수를 저장하는 score 변수의 값에 따라  
   학점을 출력하는 코드를 작성해주세요.
  1. score의 점수가 90점 이상이면 A
  2. score의 점수가 80점 이상이면 B
  3. score의 점수가 70점 이상이면 C
  4. score의 점수가 60점 이상이면 D
  5. score의 점수가 60점 미만이면 F

< 문제 풀이 >

const score = 87;
let grade = "";

if (score >= 90) grade = "A";
else if (score >= 80) grade = "B";
else if (score >= 70) grade = "C";
else if (score >= 60) grade = "D";
else grade = "F";

console.log(grade);
// B 출력

2. 짝수와 홀수 판별
- 변수 `num`에 임의의 숫자를 할당하세요.
- `num`이 짝수인지 홀수인지 확인하고, 짝수면 "Even", 
  홀수면 "Odd"를 출력하세요.

< 문제 풀이 >

const num = 43;
let res1 = " ";

if (num % 2 === 0) res1 = "짝수";
else res1 = "홀수";

console.log(res1);
// 홀수 출력

3. 로그인 확인 및 권한 부여 
- 변수 `isLoggedIn`과 `isAdmin`에 각각 `true` 또는 `false`를 할당하세요.
- 사용자가 로그인했는지 확인하고, 
  로그인하지 않았다면 "Please log in"을 출력하세요.
- 사용자가 로그인했지만 관리자가 아닌 경우 "Access denied"를 출력하세요.
- 사용자가 로그인하고 관리자일 경우 "Welcome, admin!"을 출력하세요.

< 문제 풀이 >

const isLoggedIn = true;
const isAdmin = false;
let message1 = " ";

if (!isLoggedIn) message1 = "Please log in";
else if (isAdmin) message1 = "Welcome, admin";
else message1 = "Access denied";

console.log(message1);
// Access denied 출력

4. 숫자 크기 비교 
- 변수 `a`와 `b`에 임의의 숫자를 할당하세요.
- `a`와 `b`의 크기를 비교하고, `a`가 크면 "a is greater", 
  `b`가 크면 "b is greater", 
  두 값이 같으면 "a and b are equal"을 출력하세요.

< 문제 풀이 >

const a = 34;
const b = 54;
let message = " ";

if (a > b) message = "a is greater";
else if (a < b) message = "b is greater";
else message = "a and b are equal";

console.log(message);
// b is greater 출력

5.  월별 계절 판별
    1. 변수 `month`에 1에서 12 사이의 숫자를 할당하세요.
    2. `month`에 따라 해당하는 계절을 출력하세요:
        - 12, 1, 2: "Winter"
        - 3, 4, 5: "Spring"
        - 6, 7, 8: "Summer"
        - 9, 10, 11: "Fall"

< 문제 풀이 >

const month = 6;
let season = " ";

switch (month) {
  case 12:
  case 1:
  case 2:
    season = "winter";
    break;
  case 3:
  case 4:
  case 5:
    season = "spring";
    break;
  case 6:
  case 7:
  case 8:
    season = "summer";
    break;
  case 9:
  case 10:
  case 11:
    season = "fall";
}
console.log(season);
// summer 출력

6 할인율 계산
  1. 구매 금액에 따라 할인율을 적용하여 
     최종 금액을 계산하는 코드를 작성하시오
  2. 100000원 이상 : 20% 할인
  3. 50000원 이상 : 10% 할인
  4. 그외 할인 없음

< 문제 풀이 >

const price = 130000;
let sale = 0;

if (price >= 100000) sale = 0.2;
else if (price >= 50000) sale = 0.1;
else sale = 0;

console.log(`최종 금액 ${price * (1 - sale)}`);
// 최종 금액 104000 출력

7
- 1부터 7까지의 숫자를 입력받아 해당 요일(1: 월요일, 7: 일요일)을 
  출력하는 코드를 작성하시오.

< 문제 풀이 >

const date = 5;
let day = " ";

switch (date) {
  case 1:
    day = "월";
    break;
  case 2:
    day = "화";
    break;
  case 3:
    day = "수";
    break;
  case 4:
    day = "목";
    break;
  case 5:
    day = "금";
    break;
  case 6:
    day = "토";
    break;
  case 7:
    day = "일";
}
console.log(day);
// 금 출력

8. 주어진 숫자가 양수, 음수, 또는 0인지 판별하는 코드를 작성하시오.

< 문제 풀이 >

const number = 5;
let res = " ";

if (number > 0) res = "양수";
else if (number < 0) res = "음수";
else res = 0;

console.log(res);
// 양수

워니

첫 시작!

이전 포스트

데브코스 06일차 ( 24.10.21 월 ) JavaScript

다음 포스트

데브코스 08일차 ( 24.10.23 수 ) JavaScript

0개의 댓글

데브코스 07일차 ( 24.10.22 화 ) JavaScript

Programmers Front-end

[Section 01] JavaScript 기초

< 03. 연산자 >

1. 산술 연산자 (이항 산술 연산자)

< 연습 문제 >

2. 증감 연산자 (단항 산술 연산자)

2.1. 증가 연산자 ++

2.2. 감소 연산자 --

2.3. 전치 연산 : ~ 하기 전에, 증감 연산자를 항(피연산자) 앞에 사용

2.4. 후치 연산 : ~ 한 후에, 증감 연산자를 항(피연산자) 뒤에 사용

2.5. 단항 부정 연산자 -

< 연습 문제 >

3. 대입 연산자

3.1. 대입 연산자 =

3.2. 복합 대입 연산자

< 연습 문제 >

4. 비교 연산자

4.1. 동등 ==

4.2. 일치 ===

4.3. 부등 !=

4.4. 불일치 !==

4.5. ~ 보다 큰 >

4.6. ~ 보다 크거나 같은 >=

4.7. ~ 보단 작은 <

4.8. ~ 보다 작거나 같은 <=

< 연습 문제 >

5. 삼항 연산자 (조건 연산자에 속함)

5.1. 비교 ? 참 : 거짓

5.2. NaN (Not a Number), "", null, undefined, false 를 제외한 모든 값은 참임

6. 논리 연산자

6.1. and &&

6.2. or ||

6.3. not !

< 연습 문제 1 >

< 연습 문제 2 >

< 연습 문제 3 >

< 연습 문제 4 >

< 연습 문제 5 >

< 04. 조건문 >

1. if 문

1.1. if 키워드

1.2. else 키워드

1.3 else if 키워드

2. switch 문

2.1. switch 키워드

2.2. break 키워드

2.3. default 키워드

3. 삼항 연산자

연습 문제

데브코스 06일차 ( 24.10.21 월 ) JavaScript

데브코스 08일차 ( 24.10.23 수 ) JavaScript

0개의 댓글

2.1. 증가 연산자 `++`

2.2. 감소 연산자 `--`

2.5. 단항 부정 연산자 `-`

3.1. 대입 연산자 `=`

4.1. 동등 `==`

4.2. 일치 `===`

4.3. 부등 `!=`

4.4. 불일치 `!==`

4.5. ~ 보다 큰 `>`

4.6. ~ 보다 크거나 같은 `>=`

4.7. ~ 보단 작은 `<`

4.8. ~ 보다 작거나 같은 `<=`

5.1. `비교 ? 참 : 거짓`

5.2. `NaN (Not a Number)`, `""`, `null`, `undefined`, `false` 를 제외한 모든 값은 참임

6.1. and `&&`

6.2. or `||`

6.3. not `!`

1. `if` 문

1.1. `if` 키워드

1.2. `else` 키워드

1.3 `else if` 키워드

2. `switch` 문

2.1. `switch` 키워드

2.2. `break` 키워드

2.3. `default` 키워드

3. `삼항 연산자`