1. 연산자
1.1 String concatenation : 문자열 연결
// 1. String concatenation
console.log('my' + ' cat'); // 'my cat'
console.log('1' + 2); // '12'
// Grave Accent(`) 사용시 홑따옴표(')는 그냥 표시됨
console.log(`string literals: ''' 1 + 2 = ${1+2}`); // 'string literals: ''' 1 + 2 = 3'
// 홑따옴표 사용(')하여 문자열 지정할 경우
// 문자열 중간에 홑따옴표는 (\')를 사용
console.log('ellie\'s book'); // 'ellie's book'
// 쌍따옴표(")도 사용할 수 있다
// 특수문자는 백슬래시(\)를 사용하여 표시
console.log("ellie\'s \nbook"); // 'ellie's
// book' (줄바꿈)
1.2 Numeric operators : 숫자 연산자
// 2. Numeric operators
console.log(1 + 1) // 2 : 덧셈 (add)
console.log(1 - 1) // 0 : 뺄셈 (substract)
console.log(1 * 1) // 1 : 곱셈 (multiply)
console.log(1 / 1) // 1 : 나눗셈 (divide)
console.log(5 % 2) // 1 : 나머지 (remainder)
console.log(2 ** 3) // 8 : 거듭제곱 (exponentiation)
1.3 Increment and decrement operators : 증감 연산자
// 3. Increment and decrement operators
let counter = 2;
PreIncrement & PostIncrement : 선행 증가, 후행 증가
// PreIncrement
// - 선행 증가 : 값을 사용하기 전 증감연산자를 먼저 처리함
// - 증감연산자를 변수 앞에 둠
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
// 'preIncrement: 3, counter: 3'
// postIncrement
// - 후행 증가 : 값을 사용하고 나서 증감연산자를 처리함
// - 증감연산자를 변수 뒤에 둠
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement: ${preIncrement}, counter: ${counter}`);
// 'postIncrement: 3, counter: 4'
PreDecrement & PostDecremnet : 선행 감소, 후행 감소
// preDecrement - 선행 감소
const preDecremnet = --counter;
console.log(`preDecremnet: ${preDecremnet}, counter: ${counter}`);
// 'preDecremnet: 3, counter: 3'
// postDecrement - 후행 감소
const postDecremnet = counter--;
console.log(`postDecremnet: ${postDecremnet}, counter: ${counter}`);
// 'postDecremnet: 3, counter: 2'
1.4 Assignment operators : 할당 연산자
// 4. Assignment operators
let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y; // x = x - y;
x *= y; // x = x * y;
x /= y; // x = x / y;
1.5 Comparison operatos : 비교 연산자
// 5. Comparison operators
console.log(10 < 6); // false : 작다
console.log(10 <= 6); // false : 작거나 같다
console.log(10 > 6); // true : 크다
console.log(10 >= 6); // true : 크거나 같다
1.6 Logical operators : 논리 연산자
// 6. logical opertors: || (or), && (and), ! (not)
const value1 = true;
const value2 = 4 > 2; // true;
|| (or)
여러 변수의 값을 비교하여 or 연산을 처리하는 경우 선행 값이 true(참)이면 나머지 값은 비교(연산) 하지 않는다.
// || (or), finds the first truthy value : 첫번째 참인 값을 찾음
// 아래 식에서 value1이 참이면 나머지 부분은 검토하지 않고 넘어감
// 따라서 함수결과와 같은 무거운 체크 함수를 논리 연산의 마지막으로 넘길 것
console.log(`or : ${value1 || value2 || check()}`);
// value1이 true이면 check 함수는 실행되지 않음
function check() {
for (let i=0; i<10; i++) {
console.log('check..');
}
return true;
}
&& (and)
여러 변수의 값을 비교하여 and 연산을 처리하는 경우 선행 값이 false(거짓)이면 나머지 값은 비교(연산) 하지 않는다.
// && (and), finds the first falsy value : 첫번째 거짓인 값을 찾음
// or와 마찬가지로 거짓이 먼저 나오면 나머지 부분 실행하지 않음
console.log(`and : ${value1 && value2 && check()}`);
function check() {
for (let i=0; i<10; i++) {
console.log('check..');
}
return true;
}
! (not)
// ! (not) : 논리 값을 반대로
console.log(!value1);
1.7 Equality operators : 동등 연산자 [ ==, === ]
// 7. Equality operators : 동등 연산자
const stringFive = '5';
const numberFive = 5;
// == losse equality, with type conversion : 타입을 변경하고 비교
console.log(stringFive == numberFive); // true
console.log(stringFive != numberFive); // false
// === strict equality, no type conversion : 타입 변경없이 비교
console.log(stringFive === numberFive); // true
console.log(stringFive !== numberFive); // false
== : loose equality, 타입을 변경하고 비교
=== : strict equality, 타입을 변경하지 않고 비교
strict equality를 사용하는 것이 좋다.
// 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);
console.log(0 === false);
console.log('' == false);
console.log('' === false);
console.log(null == undefined);
console.log(null === undefined);
2. Conditional operators : 조건 연산자
2.1 If operators : If 연산자
// 8. Conditional operators: if
// if, else if, else
const name = 'ellie'
if (name === 'ellie') {
console.log('Welcome, Ellie!');
} else if (name === 'coder') {
console.log('U are amazing coder');
} else {
console.log('unknown!');
}
2.2 Ternary operator : 삼항 연산자 [ ? ]
// 9. Ternary operator: ?
// condition ? value1 : value2;
const myname = 'ellie';
console.log(myname === 'ellie' ? 'yes' : 'no'); // 'yes'
// 간단한 비교문을 짧게 표현할 때 사용하면 좋다.
2.3 switch operators : Switch 문
// 10. Switch statement
// 다수의 if문이 사용될 때
// 열거형과 같은 값을 비교할 때
// TS(TypeScript)에서 multiple type을 비교할 때 사용
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;
}
// 같은 처리 과정을 사용할 경우 case만 나열하면 된다.
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;
}
3. 반복문
3.1 while loop
// while loop,
// 조건식이 참인 경우 블록을 실행한다.
let i = 3;
while (i > 0) {
console.log(`while: ${i}`);
i--;
}
// while: 3
// while: 2
// while: 1
3.2 do - while loop
// do while loop
// 먼저 블록을 실행하고 조건을 비교한다.
// 조건에 관계없이 1번은 블록을 실행
let i = 0;
do {
console.log(`do while: ${i}`);
i--;
} while (i > 0)
// do while: 0
3.3 for loop
// for loop,
// for (begin; condition; step)
for (i = 3; i > 0; i--) {
console.log(`for: ${i}`)
}
// for: 3
// for: 2
// for: 1
for (begin; condition; step)
- begin : 최초 한 번 실행
- condition : loop 실행 시 비교할 조건
- step : 반복문 실행 시 매 번 실행
for (let i = 3; i > 0; i=i-2) {
// inline 변수 선언 : let i=3
console.log(`inline variable for: ${i}`);
}
// inline variable for: 3
// inline variable for: 1
// nested loops
for (let i=0; i<3; i++) {
for (let j=0; j<3; j++) {
console.log(`i: ${i}, j: ${j}`);
}
}
// i: 0, j: 0
// i: 0, j: 1
// i: 0, j: 2
// i: 1, j: 0
// i: 1, j: 1
// i: 1, j: 2
// i: 2, j: 0
// i: 2, j: 1
// i: 2, j: 2
연습문제 해답
// 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, 타입이 서로 다름(object, undefined)
// 불리언 값으로 변환할 경우 0, null, undefined, NaN, '' 모두 false로 처리한다.
'Dev. Handbook > Javascript' 카테고리의 다른 글
[Javascript] ES5+ 기초강의 6 - class vs object, 객체지향언어 (0) | 2022.07.01 |
---|---|
[Javascript] ES5+ 기초강의 5 - Arrow Function? 함수의 선언과 표현 (0) | 2022.06.26 |
[Javascript] ES5+ 기초강의 3 - 데이터 타입, let vs var, hoisting (0) | 2022.06.20 |
[Javascript] ES5+ 기초강의 2 - Hello World!, Preparation, async vs defer (0) | 2022.06.16 |
[Javascript] ES5+ 기초강의 1 - 자바스크립트의 역사와 현재 그리고 미래 (0) | 2022.06.13 |
댓글