operator
String concatenation
// 문자열과 문자열을 합해서 새로운 문자열을 만들 수 있다.
console.log('my' + ' cat'); // my cat
// 문자열에 숫자를 더하게 되면 숫자가 문자열로 변환해서 합해질 수도 있다.
console.log('1' + 2); // 12
// `(backtick)기호를 활용해서 string literals를 만들 수 있다. $ 기호를 이용하면 변수값을 계산해서 string으로 포함해서 문자열을 만들게 된다.
console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals: 1 + 2 = 3
// string literals의 장점은 줄바꿈을 하거나, 중간에 특수 기호(', " 등)을 이용해도 그대로 문자열로 변환해서 나오는 점이다.
console.log(`string literals:
''''
1 + 2 = ${1 + 2}`);
// string literals:
''''
1 + 2 = 3
//
// single quote로 문자열을 만들게 되면 중간에 '나 특수기호가 인식이 되지않는데, 이 경우에는 \(backslash)를 사용해서 '표시해야한다.
console.log('ryan's book');
// \n: 세로 줄바꿈
// \t: tab 키 Numeric operators
console.log(1 + 1); // 2, add
console.log(1 - 1); // 0, substract
console.log(1 / 1); // 1, divide
console.log(1 * 1); // 1, multiply
console.log(5 % 2); // 1, remainder(나머지값)
console.log(2 ** 3); // 8, 2의 3승 exponentiationIncrement and decrement operators
let counter = 2;
const preIncrement = ++counter
// proIncrement, 변수(counter) 앞에 ++기호를 붙이면 변수에 1을 더해서 변수에 할당한 다음에 변수(preInvrement)라는 변수에 값을 할당하는 것
// 위는 아래와 동일한 코드
counter = counter + 1;
preIncrement = counter;
// counter에 1을 더해서, counter에 값을 할당한 다음에(3), preIncrement 값(value)에 counter를 할당하는 것.
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`); // preIncrement: 3, counter: 3
const postIncrement = counter++;
// postIncrement, 변수 다음에 ++기호를 붙이면 먼저 변수를 할당하고 1을 증가시킨다.
// 위는 아래와 동일한 코드
postIncrement = counter;
counter = counter + 1;
console.log(`preIncrement: ${postIncrement}, counter: ${counter}`); // postIncrement: 3, counter: 4
const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`); // preDecrement: 3, counter: 3
const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`); // postDecrement: 3, counter: 2
// Decrement도 같은 원리.Assignment operators
// 할당 연산자
let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;Comparison operators
// 비교 연산자
console.log(10 < 6); // false, less than
console.log(10 <= 6); // false, less than or equal
console.log(10 > 6); // true, greather than
console.log(10 >= 6); // true, greather than or equalLogical operators: || (or), && (and), ! (not)
const value1 = false;
const value2 = 4 < 2;
// || (or), finds the first truthy value
console.log(`or: ${value1 || value2 || check()}`);
function check() {
for (let i = 0; i < 10; i++) {
//wasting time
console.log('😱');
}
return true;
} // 10😱, or: true
// value1, value2는 false, check()는 true이기때문에 true로 리턴된다.
// 중요한 포인트는 || (or) 연산자는 처음에 true가 나오면 그 자리에 멈춘다. or 연산자 중에 어떤 것이든 하나면 true면 true다.
// 만약에 value1 = true; 였다면 value2, check()와 상관없이 true가 된다. 그래서 😱는 출력이 안된다.
// 코드리뷰 팁
console.log(`or: ${check() || value1 || value2}`);
// computation(계산)이 무거운 연산을 많이하는 함수를 호출하거나, expression를 제일 앞에 두면 안된다. 간단한 value1, value2를 앞에 두고, 마지막에 마지못해 expression이나 function을 호출하는 것이 좋다. 즉, expression이나 함수를 제일 뒤에 배치하는 것이 효율적인 코드작성이다.
// && (and)), finds the first falsy value
console.log(`and: ${value1 || value2 || check()}`);
// value1이 false니까 게임 끝. false
// often used to compress long if-statement
// nullableObject && nullableObject.something
if (nullableObject != null) {
nullableObjct.somthing;
}
// && (and)는 간편하게 null check를 할 때도 쓰이는데, Object가 null이면 실행이 안된다. 즉, nullObject가 null이 아닐 때만 nullObject.something이라는 value를 받아오게된다.
function check() {
for (let i = 0; i < 10; i++) {
//wasting time
console.log('😱');
}
return true;
} // 10😱, and: false
// ! (not)
console.log(!value1); / false
// 값을 반대로 바꿔준다. value1이 true이기 때문에 반대로 false가 나온다.Equality operators
const stringFive = '5';
const numberFive = 5;
// == loose equality, with type conversion
console.log(stringFive == numberFive); // true
console.log(stringFive != numberFive); // false
// === strict equality, no type conversion
console.log(stringFive === numberFive); // false
console.log(stringFive !== numberFive); // true
// object equality by reference
const ryan1 = {
name: 'ryan'
};
const ryan2 = {
name: 'ryan'
};
const ryan3 = ryan1;
console.log(ryan1 == ryan2); // false
console.log(ryan1 === ryan2); // false
console.log(ryan1 === ryan3); // true
// ryan1, ryan2은 각각 다른 ref을 가지고 있어서 false, ryan3은 ryan1이 가지고 있는 ref value를 ryan3에 할당했기때문에 같아서 true.
// equality - puzzler
console.log(0 == false); // true
console.log(0 === false); // false
console.log('' == false); // true
console.log('' === false); // false
console.log(null == undefined); // true
console.log(null === undefined); //falseConditional operators: if
// if, else if, else
const name = 'ryan';
if (name === 'ryan') {
console.log('Welcome, ryan!');
} else if (name === 'coder') {
console.log('You are amazing coder');
} else {
console.log('unknown');
}
// if statement가 true면 안에 있는 block을 실행하게 된다. 그게 아니면 else if가 실행, 아니면 else가 실행된다. Ternary operator: ?
// condition ? value1 : value2;
console.log(name === 'ryan' ? 'yes' : 'no');
// statement(name === 'ryan')가 true가 맞아?(?)면 맞으면 'yes'를 실행하고, 아니면(:), 'no'를 실행해라.
// ternary operator를 묶고, 묶고, 묶어서 쓰는 경우가 있는데, 그렇게 하면 코드의 가독성이 떨어지기때문에, 그런 경우라면 if나 switch를 사용하는 것이 바람직하다. ternary operator는 간단할 때만 사용하자.switch operators
// 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':
console.log('love you!');
break;
case 'Firefox':
console.log('love you!');
break;
default:
console.log('same all');
break;
}
// switch () 안의 값이 case '' 안의 값이면 출력하고 멈추고, 아니면 다음으로 넘어가고...
// Chrome, Firefox는 똑같은 메시지를 출력하고 있기때문에, 반복하지않고, 연달아 붙여서 사용하면 자동적으로 묶어서 출력하게 된다. 간편!
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;
}
// if에서 else if, else if, else if, ...를 여러 개 사용한다면 switch를 사용하는 것을 고려하는 것이 좋다. 나중에 TS(TypeScript)에서 정해져있는 type을 검사하거나, enum 비슷한 value를 검사할 때는 switch를 사용하는 것이 가독성에 좋다.11. Loops
// while loop, while the condition is trythy, body code is executed.
let i = 3;
while (i > 0) {
console.log(`while: ${i}`);
i--;
}
// while: 3
// while: 2
// while: 1
// 위 코드를 실행한 다음에 i = 0인 상태,
// do while loop, body code is executed first, then check the condition
do {
console.log(`do while: ${i}`);
i--;
} while (i > 0)
// do while: 0
// do while은 i가 0이 됐음에도 block {}을 실행한 다음에, 조건이 맞는지 안맞는지 검사하고 멈춘다.
// 따라서, block {}을 먼저 실행하고 싶다면 do while loop을 써야하고, 조건문이 맞을 때만 block {}을 실행하고 싶다면 while loop을 써야한다.
// for loop, for(begin; condition; step)
for (i = 3; i > 0; i--) {
console.log(`for: ${i}`);
}
// for: 3
// for: 2
// for: 1
// for loop는 begin을 한 번만 호출 하고, block {}을 실행하기 전에 condition이 맞는 지 안 맞는 지 검사한 다음에, block {}이 실행히 되면, step을 실행한다. condition이 안 맞을 때까지, condition과 step을 계속 실행하게 된다.
for (let i = 3; i > 0; i = i - 2) {
//inline variable declaration
console.log(`inline variable for: ${i}`);
}
// inline variable for: 3
// inline variable for: 1
// nested loops
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
console.log(`i: ${i}, j:${j}`);
}
}
// i가 0일 때, j를 0~9까지 실행하고, i가 1일 때, j를 0~9까지 실행하고, ... i가 9일 때, j가 0~9까지 실행한다.
// 이렇게 nesting해서 작성하면 O(n**2)이 되서 CPU에 좋지않다. 그래서 되도록이면 피하는 것이 좋다.Break, continue
// break: loop를 완전히 끝내는 것
// continue: 지금 것은 skip하고 바로 다음으로 넘어가는 것.
// Q1. iterate from 0 to 10 and print only even numbers(use continue)
// My Solution
for (i = 0; i <= 10; i++) {
if (i % 2 === 1) {
continue;
} else {
console.log(`even numbers: ${i}`);
}
}
// Solution
for (let i = 0; i < 11; i++) {
if (i % 2 !== 0) {
continue;
}
console.log(`q1. ${i}`);
}
// Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break)
// My Solution
for (i = 0; i <= 10; i++) {
if (i === 8) {
console.log(`i: ${i}`);
break;
}
}
// Solution
for (let i = 0; i < 11; i++) {
if (i > 8) {
break;
}
console.log(`q2. ${i}`);
}- iterate: perform or utter repeatedly.
👨🏻💻☕️ 🎹🎵 🐰🎶 🛫📷