자바스크립트_3 / 연산자

1. Operator

- 다른 프로그래밍 언어와 마찬가지로 비슷한 연산자를 가지고 있다.

- string, numeric 연산자와 대입 연산자, 비교 연산자, 논리 연산자가 있다.

- 특징적으로 자바 스크립트는 increment operator와 decrement operator가 있다. 이는 연산과 값을 증가 또는 감소 시키는 동작을 하는 것을 의미한다.

 

1-1. String operator

- +: 문자열을 합치는 연산자. 문자열과 숫자가 함께 사용되면 문자열로 간주해 이를 더한다.

console.log('my' + ' cat');
console.log('1' + 2);
console.log(`string literals: 1 + 2 = ${1 + 2}`);
console.log('I\'m Hanbin.\nWhat your name?');

 

1-2. numeric operator

- +: 양 변의 값을 더한다.

- -: 양 변의 값을 뺀다.

- /: 양 변의 값을 나눈다.

- *: 양 변의 값을 곱한다.

- %: 양 변의 값을 나눈 값의 나머지.

- **: 왼쪽의 값을 밑으로 하고, 오른쪽의 값을 제곱수로 한다.

// 2. Numberic operators
// 대부분의 다른 프로그래밍과 같다.
console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(1 / 1); // divide
console.log(1 * 1); // multiply
console.log(1 % 1); // remainder
console.log(1 ** 1); // exponentiation

 

1-3. assignment operator

- +=: 우변의 값을 좌변의 값에 더한다.

- -=: 우변의 값을 좌변의 값에 뺀다.

- *=: 우변의 값을 좌변의 값에 곱한다.

- /=: 우변의 값을 좌변의 값에 나눈다.

// 3. Assignment operators
let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;

 

 

1-4. comparison operator

- >: 왼쪽 값이 더 크면 true

- >=: 왼쪽 값이 더 크거나 같으면 true

- <: 오른쪽 값이 더 크면 true

- <=: 오른쪽 값이 더 크거나 같으면 true

// 4. Comparison operators
console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // more than
console.log(10 >= 6); // more than or equal

 

1-5. logical operator

- or: 둘 중 하나만 true면 true

- and: 둘 다 true면 true

- not: true면 false, false면 true

- or와 and 모두 왼쪽값부터 확인한다. 

// 5. Logical operator || (or), && (and), ! (not)
const value1 = false;
const value2 = 4 < 2;

// || (or), finds the first truthy value 
// - 첫번째 값부터 확인한다. 따라서 heavy한 함수같은 경우는 최대한 뒤로 미루는 것이 좋다.(연산 시간이 더 오래걸리기 때문)
console.log(`or: ${value1 || value2 || check()}`); // True


// && (and), finds the first falsy value
console.log(`and: ${value1 && value2 && check()}`); // False

// often used tot compress long if-statement
// nullableObject && nullableObject.somthing
// if (nullableObject != null) {
//     nullableOhect.something;
// }

// ! (not)
console.log(!value1); // True

function check(){
    for (let i = 0; i < 10; i++) {
        // wasting time
        console.log('Hi');
    }
    return true;
}

 

 

1-6. equlity operator

- ==: 데이터 타입을 제외한 값이 같은 경우 true

- ===: 데이터 타입을 포함한 값이 같은 경우 true

- !=: 데이터 타입을 제외한 값이 다른 경우 true

- !==: 데이터 타입을 포함한 값이 다른 경우 true

// 7. Equlity
const stringFive = '5';
const numberFive = 5;

// == loose equlity, with type conversion
console.log(stringFive == numberFive); // True
console.log(stringFive != numberFive); // False

// === stricet equlity, no type conversion
console.log(stringFive === numberFive); // False
console.log(stringFive !== numberFive); // True

// object equlity by reference
// 오브젝트가 가리키고 있는 레퍼런스를 기준으로 생각한다.
const hanbin1 = {name: 'hanbin'};
const hanbin2 = {name: 'hanbin'};
const hanbin3 = hanbin1;
console.log(hanbin1 == hanbin2); // False
console.log(hanbin1 === hanbin2); // False
console.log(hanbin1 === hanbin3); // True

 

 

1-7. Increment and decrement operators

- ++variable: 변수에 1을 더하고, 이를 좌변에 할당한다.

- variable++: variable을 좌변에 할당하고 변수에 1을 더한다.

- --variable: 변수에 1을 빼고, 이를 좌변에 할당한다.

- variable--: variable을 좌변에 할당하고 변수에 1을 뺀다.

// 7. Increment and decrement operators
let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);

const preDecrement = --counter;
// counter = counter - 1;
// preDecrement = counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);
const postDecrement = counter--;
// postDecrement = counter;
// counter = counter - 1;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);

 

 

1-8. Conditional operators: if

- if, else if, else를 사용하여 표현한다.

- if : 조건에 해당하면 동작

- else if : if를 만족하지 못했을 때, 다른 조건을 걸어 조건에 해당하면 동작

- else : 모든 조건문을 만족하지 못했을 때 동작

// 8. Conditional operators: if
// if, else if, else
const name = 'coder';
if (name === 'coder') {
    console.log('Welcome Hanbin');
} else if (name === 'coder') {
    console.log('You are amazing coder'); // 동작
} else {
    console.log('unkwnon');
}

 

1-9. tenrary operator: ?

- (조건문 ? 값1 : 값2)의 형태로 쓰인다.

- 간단하게 사용할 수 있다. 

- 파이썬의 리스트 컴프리핸션의 역할이다.

console.log(name === 'ellie' ? 'yes' : 'no')

 

1-10. Switch statement

- 조건문과 비슷하지만 switch로 선언된 변수가 case 뒤에 선언된 것과 strict하게 같은 경우(===) 콜론 뒤의 내용이 실행된다.

- 조건문을 반복적으로 사용해야할 때 주로 사용한다.

- enum-like value를 확인할 때 자주 사용한다.

- 타입스크립트에서 멀티플 타입을 확인할 때 주로 사용한다.

// 10. Switch statement
// use for multiple if checks
// use for enum-like value check
// use for multiple type checks in TS
const browser = 'IE';
switch (browser) {
    case 'IE':
        console.log('go away');
        break;
    case 'Chrome':
    case 'Firefox': // 위와 같이 두 케이스에 모두 같은 값을 할당한다면 연달아서 사용하면 된다.
        console.log('love you'); 
        break;
    default:
        console.log('same all!');
        break;
}

 

 

 

2. Loops

 

 

2-1. while loop

- while 뒤에 조건문이 true일 때만 block이 실행된다.

 

2-2. do while loop

- 조건문과 상관없이 do 뒤의 block이 먼저 실행되고, 조건에 맞지 않을 때 이를 멈춘다.

// 11. Loops
// while loop, while the condition is truthy.
// body code is executed.
let i = 3;
while (i > 0) {
    console.log(`while ${i}`);
    i--;
}

// do while loop, body code is excuted first
// then check the condition.
do {
    console.log(`do while: ${i}`);
    i--;
} while (i > 0);

 

2-3. for loop

- for 뒤에 (시작점; 조건; 스텝)의 형태로 내용이 주어지면 조건이 될 때까지 for문을 반복한다.

 

// 12. for loop, for (begin; condition; step)
for (i = 3; i > 0; i--) {
    console.log(`for: ${i}`);
}

for (let i = 3;  i < 10; i = i + 2) {
    // inline variable declaration
    console.log(`for: ${i}`);
}

// nested loops
for (let i = 0; i < 10; i++){
    for (let j = 0; j < 10; j++){
        console.log(`i: ${i}, j:${j}`);
    }
}

 

 

 

문제 1. continue를 사용해 0부터 10까지 짝수를 출력하시오.

// break continue
// Q1. iterate from 0 to 10 and print only even numbers (use continue)
console.log('Q1')
for (i = 0; i <= 10; i++){
    if (i % 2 == 1) {
        continue;
    }
    console.log(`${i}`)
}

 

문제 2. break를 사용해 0부터 10까지 출력하되, 8이 되면 출력을 멈추시오.

// Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break)
console.log('\nQ2')
for (i = 0; i < 10; i++){
    if (i == 8) {
        break;
    }
    console.log(`${i}`);
}