1️⃣. String concatenation
console.log('my' + ' cat');
console.log('1' + 2);
console.log(`string literals: 1 + 2 = ${1 + 2}`);
console.log(`string literals:
''''
1 + 2 = ${1 + 2}`);
console.log("I'm studying \n\t Front-end");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(5 % 2); //remainder
console.log(2 ** 3); //exponentiation
3️⃣ Increment(++) and decrement(--) operators
let counter = 2;
const preIncrement = ++counter; //3
// counter = counter + 1;
// PreIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
const postIncrement = counter++; //3
// PreIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
// 변수값 할당 전에 계산하여 값이 출력되느냐 변수값 할당 후 계산하여 출력 되느냐의 차이
// (++) === (--)감소 오퍼레이터도 동일하다!
const preDecrement = --counter; //3
// counter = counter + 1;
// PreIncrement = counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);
const postDecrement = counter--; //2
// PreIncrement = counter;
// counter = counter + 1;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);4️⃣ Assignment operators (=)할당 오퍼레이터
let x = 3;
let y = 6;
x += y; //x = x + y;
x -= y;
x *= y;
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 equal6️⃣ Logical operators: || (or) (shift+) , && (and), !(not)
const value1 = false;
const value2 = 4 < 2;
// ⭐️ ||(or), finds const value1 : true
// ||는 true 값이 나오는 순간 계산 끝남! (트루 이후의 식은 계산 멈춤!) 따라서 단순 식을 앞에 배치하고
// 복잡한 함수나 익스프레션 같은건 뒤쪽으로 배치한다!
console.log(`or: ${value1 || value2 || check()}`); // 이 중에 하나라도 true가 있으면 true임!
// flase false true
function check() {
for (let i = 0; i < 10; i++) {
//wasting time
console.log('🥹');
}
return true; //함수가 길지만 결국 리턴값이 true이므로 결과는 true
}
// ⭐️ &&(and), find the first galsy value
// &&는 flase 값이 나오는 순간 계산 끝남! (false 이후의 식은 계산 멈춤!) 따라서 단순 식을 앞에 배치하고
// 복잡한 함수나 익스프레션 같은건 뒤쪽으로 배치한다!
console.log(`and: ${value1 && value2 && check()}`); // 이 중에 하나라도 true가 있으면 true임!
// flase false true
function check() {
for (let i = 0; i < 10; i++) {
//wasting time
console.log('🥹');
}
return true; //함수가 길지만 결국 리턴값이 true이므로 결과는 true
}
// ⭐️ ! (not) 값을 반대로 바꿔줌!
console.log(!value1);
//false이므로 값은 true로 출력됨7️⃣ Equality
const stringFive = '5';
const numberFive = 5;
// == loose equality, with type conversion ** ==loose 타입을 변경해서 검사함!
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);
// === srict equality, no type conversion ** ===strict 타입을 신경써서 엄격하게! 검사합!
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);
// object equality by reference
const ellieA = { name: 'ellie'}; //A랑 B는 할당된 메모리 공간이 다름! 이름만 같을뿐!!!
const ellieB = { name: 'ellie'};
const ellieC = ellieA;
console.log(ellieA == ellieB); //flase
console.log(ellieA === ellieB); //flase
console.log(ellieA === ellieC); //true
// equality - puzzler
console.log(0 == false); // true -> 0, null, undefine, empty string은 false로 간주될 수 있다.
console.log(0 === false); // false -> 0은 불리언 타입 아님! 타입스트릭트 equality이용하면 같다고 볼수 없음!
console.log('' == false); // true ->
console.log('' === false); // flase -> '문자열'은 불리언 타입 아님!
console.log(null == undefined); // true
console.log(null === undefined); // false -> 타입이 다르므로!
8️⃣ Conditional operatoers : if
// if, else if, else
const name = 'ellie';
if (name === 'ellie') {
console.log('Welcome, Ellie!');
} else if (name === 'coder') {
console.log('You are amazing coder');
} else {
console.log('unknwon')
}9️⃣ Ternary operator: ?
// condition ? value1 : value2
console.log(name === 'ellie' ? 'yes' : 'no');
//식의 결과값이 트루니 ? '예' 아니면 '노' 실행!🔟 Switch statement
// use for multiple if checks (if-else가 반복 사용될것 같으면 switch 추천)
// use for enum-like value check
// use for multiple type checks in TS (type script에서 중복으로 사용될것 같으면)
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;
}
1️⃣1️⃣ Loops
// ❮ while loop ❯, while the condition is truthy. (조건문이 맞을때만 {body}블럭 실행)
// 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, ({body}블럭이 먼저 실행된 후 조건부합 확인)
// then check the condition.
do {
console.log(`do while: ${i}`);
i--;
} while (i > 0);
// do while: 0
//❮ for loop ❯, for(begin; condition; step)
for (i = 3; i > 0; i--) {
console.log(`for: ${i}`);
}
for (let i = 3; i > 0; i = i - 2) {
//inline variable declaration
console.log(`inline variable for: ${i}`);
}
// nested loops (중첩)
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
console.log(`i: ${i}, j:${j}`);
}
}문제풀이 break, continue
Q1. iterate from 0 to 10 and print only even numbers (use continue) 짝수 출력
산술 연산자 % : 나머지
비교 연산자 !== : 불일치 / === : 일치
for ( let i = 0; i < 11; i++) {
if(i % 2 !== 0) {
continue;
}
console.log(`q1. ${i}`);
}
//혹은
for ( let i = 0; i < 11; i++) {
if(i % 2 === 0) {
console.log(`q1. ${i}`);
}
}Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break)
for ( let i = 0; i < 9; i++) {
console.log (`q2. ${i}`);
}
//혹은
for (let i = 0; i < 11; i++) {
if (i > 8) {
break;
}
console.log(`q2. ${i}`);
}
FE 개발 공부 중