Javascript2(연산) feat.Ellie&velopert

min seung moon·2021년 3월 3일
0

Javascript

목록 보기
2/23
post-custom-banner

연산자(Operators)

01. String concatenation(문자열 연결 연산자)

  • 문자열의 연결
  • +를 이용하여 문자열 끼리 연결하거나 문자열 과 숫자를 연결해서 문자열로 반환할 수 있다
'my' + 'cat' => 'my cat'
'1' + 2 => '12'
String + String, concatenation return String
String + Number, concatenation return String
Number + String, concatenation return String

02. 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); // squared

03. Increment, Decrement operators(증감 연산자)

  • ++(증가), --(증감)
  • important position
    • preIncrement and preDecrement (전위 연산자)
      : Assignment after Operating (먼저 값을 증가하고 나서 할당이 된다)
    • postIncrement and postDecrement (후위 연산자)
      : Operating after Assignment (먼저 값을 할당하고 나서 값이 증가가 된다)
let count = 2;
const preIncrement = ++count;
// 먼저 값을 증가하고 나서 할당이 된다
const postIncremnet = count++;
// 먼저 값을 할당하고 나서 값이 증가가 된다
const preDecrement = --count;
// 먼저 값을 증감하고 나서 힐당이 된다
const postDecrement = count--;
// 값을 먼저 할당하고 나서 증감이 된다

04. 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

05. Comparison operators(비교 연산자)

  • >, <, >=, <=, ==, ===
console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greather than
console.log(10 >= 6); // greather than equal

06. Logical operators(논리 연산자)

  • || && !
const value1 = false;
const value2 = 4 < 2;
function check() {
	for(let i = 0; i < 10; i++){
        	///wasting time
            	console.log(i);
        }
        return true;
}

// || (or)
console.log(`or : ${value1 || value2 || check()}`);
	: or 연산자는 먼저 true가 나온 값을 반환
          연산을 할 때는 심플하고 가벼울 수록 앞에 무겁고 난해할 수록 뒤에

// && (and)
console.log(`or : ${value1 && value2 && check()}`);
	: and 연산자는 false가 먼저 나오면 그대로 끝이 난다
          heavy 할수록 뒤에

// ! (not)
console.log(!value1); //true
	: boolean 값을 반대로 해줌

07. Equality operators(동등 연산자)

  • == (lose equality, with type conversion, 동등비교연산자)
    • type 상관 없이 들어간 값이 같으면 똑 같다고 함
  • === (strict equality, no type conversion, 일치비교연산자)
    • type이 다르면 값이 같아도 다르다
const stringFive = '5';
const numberFive = 5;    

// ==, loose Equality
(stringFive == numberFive) // true
(stringFive != numberFive) // false

// ===, strict Equality
(stringFive === numberFive) // false
(stringFive !== numberFive) // true

// object Equality by reference
const ellie1 = {name :'ellie'};
const ellie2 = {name :'ellie'};
const ellie3 = ellie1;
(ellie1 == elie2); //false
(ellie1 === elie2); //false
(ellie1 === elie3); //true

// Equality - puzzler(문제)
(0 == false); // true
(0 === false); // false
('' == false); //true
('' === false); //false
(null == undefined); //true
(null == undefined); //false

08. Conditional operators(조건 연산자)

  • if, else if, else
  • 특정 조건이 만족 되면 실행 된다
  • 조건이 참이면 if문 안에 실행문이 실행 되고
  • 조건이 거짓이면 다음 조건문(else if)으로 넘어가거나 else문 또는 벗어 납니다
if(조건){
	실행문;
}
            
const name = 'ellie';
if(name === 'ellie'){
	console.log('blabla');
}else if(name === 'corder') {
	console.log('blabla');
}else {
	console.log('blabla');
}

// blabla

09. Ternary operators(삼항 연산자)

  • ? :
// 형식
condition ? value1 : value2;

name = 'ellie';
console.log( name === 'ellie' ? 'yes' : 'no' ); // yes

10. Switch statement(Switch문)

  • use for mutiple if checks (다중 검사에 사용)
  • use for enum-like(열거형) value check (열거형 값 검사에 사용)
  • use for multiple type check in TS (TS에서 다중 유형 검사에 사용)
  • 특정 값이 무엇이냐에 따라 다른 작업을 하고 싶을 때 사용
  • 조건값과 case가 같은 경우 case안에 작업이 실행
  • case와 맞는게 없다면 default 작업이 실행
  • case안에는 특정 경우가 아니면 break를 같이 작성해야 된다
  • break가 없으면 다음 case문으로 넘어가 break를 찾을 때까지 또는 default가 나올 때까지 작입이 실행 됨
  • default는 마지막이기 때문에 break문을 작서 안해도 된다
 const browser = 'IE';
switch (browser) {
	case 'IE':
		console.log(blabla)
		break;
	case 'Chrome':
		console.log(blabla)
		break;
	default:
		console.log(blabla)
}

11. Loops(반복문)

1. while loop

  • while the condition is truthy, body code is escuted
  • while문은 조건문이 없기 때문에 break문을 사용
  • break 대신에 초기값은 while문 전에 증가(증감문)을 while문의 실해문 안에 작성해준다
// 형식
while (조건문) {
      실행 문
}

let i = 3;
while( i > 0) {
	console.log(i);
	i--;
}

2. do while loop

  • body code is excuted first, then check the condition
let i = 10;
do {
	console.log(i);
	i--;
} while(i > 0);

3. for loop

  • for(begin; condition; step)
  • 초기값, 조건문, 증가(증감)문을 꼭 작성을 해줘야 한다
// 형식
for(초기값; 조건문; 증가(증감)문){
    실행 문;
}

// outline variable declaration, 외부 선언
let i;
for(i = 3; i > 0; i--) {
	console.log(i);
}

// inline variable declaration, 내부 선언
for (let i = 3; i > 0; i=i-2) {
	console.log(i);
}

4. nested loops(중첩 for 문)

  • 다중 for문, 다중 while문, 복합 for, while문
for(let i = 0; i < 10; i++){
	for(let j = 0; j < 10; j++) {
		console.log(i+j);
	}
}

5. for of 문

  • 배열과 함께 사용하는 반복 문
// 형식
for (let 변수 of 배열) {
	실행문
}

// 예제
const numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {
	console.log(number);
}

6. for in 문

  • 객체와 함께 사용하는 반복 문
// 형식
for (let 변수 in 객체) {
	실행문
}

// 예제
const doggy = {
		name : '멍멍이',
                sound : '멍멍',
                age : 2
            };
// 객체를 배열로 받아오는 방법
// Objec.entries(객체);
console.log(Objec.entries(doggy));

// 키값을 배열로 받아 오는 방법
// Obejc.keys(객체)
console.log(Objec.keys(doggy));

// 키의 값을 받아노는 방법
// Objec.values(객체)
console.log(Objec.values(doggy));

for (let key in doggy) {
	console.log(`${key}: ${doggy[key]}`);
}

12. break, continue

  • break, out of loops(반복문 종료)
  • continue, jump of loops, jump to next step(지금 실행문 건너 뛰고 다음 반복문 실행)
q1. iterate from 0 to 10 and print only even numbers(use continue)
    for(let i = 0; i < 10; i++){
        if(i%2 !== 0) continue;
        console.log(i);
    }

q2. iterate from 0 to 10 andprint number until reaching 8 (use break)
    for(let i =0; i<10; i++){
        if(i >= 8) break;
        console.log(i);
    }
profile
아직까지는 코린이!
post-custom-banner

0개의 댓글