Operator
[String concatenation]
- 기본적으로 ', "를 사용
- `을 사용해서 string literals를 생성가능, 줄바꿈이나 특수문자를 사용해도 문자열로 만들어짐
- 특수기호를 출력할때는 \를 앞에 붙여줘야한다.
// 1. String concatenation
console.log('my' + ' cat');
console.log('1' + 2);
console.log(`string literals: 1 + 2 = ${1 + 2}`);
[Numeric operators]
// 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
[++ -- operators]
// 3. 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(`postIncrement: ${postIncrement}, counter: ${counter}`);
const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);
const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);
[= operators]
// 4. Assignment operators
let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;
[<= operators]
// 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
[Logical operators ( ||, &&, ! )]
- or연산자에서 첫번째로 검사한것이 true면 뒤에꺼는 판단하지 않고 끝냄. and 또한 같음
- check()와 같은 무거운 함수를 호출할때 맨앞에 두게 되면 --> 코드 지적질당함 따라서 가벼운것들을 앞에 배치
// 6. Logical operators: || (or), && (and), ! (not)
const value1 = true;
const value2 = 4 < 2;
// || (or), finds the first truthy value
console.log(`or: ${value1 || value2 || check()}`);
// && (and), finds the first falsy value
console.log(`and: ${value1 && value2 && check()}`);
// often used to compress long if-statement
// nullableObject && nullableObject.something
function check() {
for (let i = 0; i < 10; i++) {
//wasting time
console.log('😱');
}
return true;
}
// ! (not)
console.log(!value1);
[Equality operators ( ==, === )]
===은 타입도 평가한다.
// 7. Equality
const stringFive = '5';
const numberFive = 5;
// == loose equality, with type conversion
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);
// === strict equality, no type conversion
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);
// object equality by reference
const ellie1 = { name: 'ellie' };
const ellie2 = { name: 'ellie' };
const ellie3 = ellie1;
console.log(ellie1 == ellie2); // false
console.log(ellie1 === ellie2); //false
console.log(ellie1 === ellie3); //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); //false
[Conditional operators : if]
// 8. Conditional operators: if
// if, else if, else
const name = 'df';
if (name === 'ellie') {
console.log('Welcome, Ellie!');
} else if (name === 'coder') {
console.log('You are amazing coder');
} else {
console.log('unkwnon'); //출력
}
[Ternary operators]
// 9. Ternary operator: ?
// condition ? value1 : value2;
console.log(name === 'ellie' ? 'yes' : 'no'); //no 출력
[Switch operators
// 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;
}
Loop
[while]
// 11. Loops
// while loop, while the condition is truthy,
// body code is executed.
let i = 3;
while (i > 0) {
console.log(`while: ${i}`); // 3 2 1
i--;
}
[do-while]
// do while loop, body code is executed first,
// then check the condition.
do {
console.log(`do while: ${i}`); //0
i--;
} while (i > 0);
[for]
// 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 loop]
되도록 중첩 loop는 피하기
// nested loops
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
console.log(`i: ${i}, j:${j}`);
}
}
[break, continue]
// 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}`);
}
// Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break)
for (let i = 0; i < 11; i++) {
if (i > 8) {
break;
}
console.log(`q2. ${i}`);
}
Thanks for 드림코딩
'Front-end > Web' 카테고리의 다른 글
[JS] 클래스와 오브젝트의 차이점, 객체지향 언어 클래스 정리 (0) | 2021.08.27 |
---|---|
[JS] Arrow Function, 함수의 선언과 표현 (0) | 2021.08.27 |
[JS] data types, let vs var, hoisting (0) | 2021.08.26 |
[JS] 콘솔에 출력, script async와 defer의 차이점 및 공부방향 (0) | 2021.08.26 |
[JS] 자바스크립트의 역사와 현재 그리고 미래 (0) | 2021.08.26 |
댓글