1) String concatenation
* 아래 내용은 DreamCoding 자료를 정리한 내용입니다.
console.log("my" + " cat"); // my cat
console.log("1" + 2); // 12 (string)
console.log(`template literals: 1 + 2 = ${1 + 2}`);
// template literals: 1 + 2 = 3
// 공백이나 특수문자도 그대로 표시 가능
console.log("ellie's book");
// 특수기호는 앞에 backslash 사용- template literals
내장된 표현식을 허용하는 string literals로, 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다.
예시 )
let a = 5;
let b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."template literals을 이용하면, 이를 더욱 읽기 쉽도록 syntactic sugar을 활용할 수 있다.
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."2) Numeric 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); // exponentiation3) Increment and Decrement operators
let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
// preIncrement: 3, counter: 3
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
// postIncrement: 3, counter: 44) Assignment operators
let x = 3;
let y = 6;
x += y; // x=x+y; → x=3+6 → x=9
x -= y; // x=x-y;
x *= y; // x=x*y;
x /= y; // x=x/y;5) Comparison operators
console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greater than
console.log(10 >= 6); // greater than or equal
// 결과는 boolean임 (t/f)6) Logical operators
// 3가지: ||(or), && (and), !(not)
const value1 = true;
const value2 = 4 < 2;
//||(or), finds the first truthy value🌟
console.log(`or: ${value1 || value2 || check()}`);
//연산이 heavy한 함수를 호출하거나 expression은 효율성을 위해 제일 뒤에 와야함
//&&(and), finds the first falsy value🌟
console.log(`and: ${value1 && value2 && check()}`);
//often used to compress long if-statement
/*🌟nullableObject && nullableObject.something;
- and는 null체크할때도 많이 쓰인다.
- null일 수도 있는 값을 체크 없이 실행시키면 프로그램이 다운되므로, 이를 방지하기 위해 nullableObject가 null이면 false가 되도록 하여 뒤의 실행을 막는다.
- 즉,object가 null이 아니여야 object의 something이라는 value를 받아오게 된다.*/
if (nullableObject != null) {
nullableObject.something;
}
// 위 코드는 nullableObject && nullableObject.something과 같다.
function check() {
for (let i = 0; i < 10; i++) {
//wasting time
console.log("💕");
}
return true;
}
//! (not)
console.log(!value1);7) Equality
const stringFive = "5";
const numberFive = 5;
// ==loose equality, with type conversion
console.log(stringFive == numberFive); //true
console.log(stringFive != numberFive); //flase
// ===strict equality, no type conversion → ❗ loose equality보다 이것을 사용하는 게 더 좋다.
console.log(stringFive === numberFive); //false
console.log(stringFive !== numberFive); //true
// object equality by reference
const ellie1 = { name: "ellie" };
const ellie2 = { name: "ellie" };
const ellie3 = ellie1;
console.log(ellie1 == ellie2);//false → 각각 다른 ref가 저장되어 있기 때문
console.log(ellie1 === ellie2); //false → 똑같은 타입이든 아니든 ref값이 다르기 때문
console.log(ellie1 === ellie3); //true → 똑같은 ref 가지고 있음
// equality Quiz💥
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); //false8) Conditional operators: if
// if, else if, else
const name = "merry";
if (name === "merry") {
console.log("Welcome, Merry!"); // Welcome, Merry!
} else if (name === "coder") {
console.log("You are amazding coder");
} else {
console.log("unknown");
}9) Conditional (ternary) operator: ?
/* condition ? value1: value2;
→ condition이 true이면 value1을, false면 value2를 return함 */
const name = "merry";
console.log(name === "merry" ? "yes" : "no"); // yes
//💥복잡하게 중첩시키지 말고 그럴 땐 if나 switch문을 쓰자10) Switch statement
//use for multiple if checks : if문 너무 반복할 때 사용
//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":
// 다른 case지만 같은 코드를 실행하면 이렇게 case를 연달아 쓰면 묶어서 표현 가능
console.log("love you!");
break;
default:
// 보통 default까지 오면 안되기 때문에 throw Error('unknown type')와 같이 에러를 호출시킨다.
console.log("same all!");
break;
}11) Loops
1. while loop
: while the condition is truthy, body code is executed.
let i = 3;
while (i > 0) {
console.log(`while: ${i}`);
i--;
}
/* [console]
while: 3
while: 2
while: 1
*/2. do while loop
: body code is executed first, then check the condition.
let i = 0;
do {
console.log(`do while: ${i}`);
i--;
} while (i > 0);
/* [console]
do while: 0
*/3. for loop
: for ( begin ; condition ; step )
- 기존에 존재하는 변수에 할당하는 경우
for (i = 3; i > 0; i--) {
console.log(`for: ${i}`);
}
/* [console]
for: 3
for: 2
for: 1
*/- 변수가 기존에 존재하지 않는 경우
inline variable declaration
: 블럭안에 let이라는 지역변수를 선언해서 사용
for (let i = 3; i > 0; i = i - 2) {
console.log(`inline variable for: ${i}`);
}
/* [console]
inline variable for: 3
inline variable for: 1
*/- nested loops → CPU에 좋지 않음, 되도록 피하자!
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
console.log(`i: ${i}, j: ${j}`);
}
}
/* [console]
i: 0, j: 0
i: 0, j: 1
...
i: 9, j: 9
*/- break, continue → loop안에서 쓰임
-
break
: 현재 루프를 종료하고, 그 다음 문으로 프로그램 제어를 넘긴다.문제 ) iterate from 0 to 10 and print numbers until reaching 8 (use break)
i = 0;
while (i <= 10) {
console.log(i);
if (i === 8) {
break;
}
i += 1;
}-
continue
: 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행break 문과 달리 continue는 루프의 실행을 완전히 종료하지 않고 다음과 같이 동작한다.
- while 루프에서는 다시 조건으로 점프
- for 루프에서는 업데이트 표현식으로 점프
문제 ) iterate from 0 to 10 and print only even numbers(use continue)
for (let i = 0; i <= 10; i++) {
if (i % 2 === 0) {
console.log(i);
} else {
continue;
}
}❗ 참고자료
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w
Frontend Web/App Engineer