[JS] operator, if, for loop

박영준·2020년 9월 19일
0

Javascript 기초

목록 보기
2/7

operator(연산자)

1. String concatenation

console.log('my' + 'cat'); // my cat
console.log('1' + 2); // 12
console.log(`string literals: 1 + 2 = ${1 + 2}`); 
//string literals: 1 + 2 = 3

string literals의 장점은 줄바꿈을 하거나 특수기호를 써도 그대로 문자열로 변환되어 나온다는것.

2. Numeric operators(숫자 연산자)

console.log(1 + 1); // 1 덧셈
console.log(1 - 1); // 0 뻴셈
console.log(1 / 1); // 1 나눗셈
console.log(1 * 1); // 1 곱셈
console.log(5 % 2); // 1 나머지
console.log(2 ** 2); // 8 제곱 2의 2제곱

3. Increment and decrement operators (증가,감소 연산자)

let counter = 2;
const preIncrement = ++counter; // 전위형
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`); //(3,3)
// counter = counter + 1;
// preIncrement = counter;
const postIncrement = counter++; // 후위형
// postIncrement = counter;
// counter = counter+1;

decrement operator도 같은 원리이다.

4. Assignment operator (복합 할당 연산자)

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;

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

6. Logical operators(논리 연산자): ||(or), &&(and), !(not)

||(or)

||(or)에서는 제일 먼저 나오는 truthy 값을 출력하고 멈춘다.
truthy값이 없으면 마지막을 출력한다.
연산을 많이 하는 함수를 호출하거나 표현식을 넣을 때 제일 앞에 호출하면 안된다.

표현식이나 함수를 호출하는건 제일 마지막에 배치하는게 좋은 코드이다.

const value1 = true;
const value2 = 4 < 2;

// ||(or), finds the first trithy value
console.log(`or: ${value1 || value2 || check()}`); // or: true

function check () {
  for (let i = 0; i < 10; i++) {
	//wasting time
    console.log(':)')
  }
  return true;
}

&&(and)

&&(and)에서는 제일 먼저 나오는 falsy 값을 출력하고 멈춘다.
falsy값이 없으면 마지막을 출력한다.

&&(and)도 마찬가지이다. 표현식이나 함수를 호출하는건 제일 마지막에 할것!

간편하게 null 체크 하는 것도 가능하다.

// often used to compress long if-statement (if문 압축)
// nullableObject && nullableObject.something
if (nullableObject != null) {
	nullableObject.something;
}

!(not)

!(not) 연산자는 값을 반대로 바꿔준다.

const value = true;
console.log (!value); // false

7.Equality (일치연산자)

const stringFive = '5';
const numberFiver = 5;

// == loose equality, with type conversion
console.log(stringFive == numberFive); // true
console.log(stringFive != numberFive); // false

// === strict equality, with no type conversion
console.log(stringFive === numberFive); // false
console.log(stringFive !== numberFive); // true

==, !=

타입을 변경해서 검사를 한다.
string '5'와 number 5를 같다고 표현한다.

===, !==

타입을 변경하지 않고 검사를 한다.
string '5'와 number 5를 다르다고 표현한다.
따라서 웬만해선 strict equality를 사용하는게 좋다.

object equality by reference

const a1 = { name: 'a' };
const a2 = { name: 'a' };
const a3 = a1;
console.log(a1 == a2); //false (1)
console.log(a1 === a2); //false (2)
console.log(a1 === a3); //true (3)

a1 -> ref1 -> name -> 'a'
-> age -> 20
a3 -> ref1

a2 -> ref2 -> name -> 'a'
-> age -> 20

1번 문제는 각각 ref가 다르기 때문에 false
2번도 마찬가지이다. false
3번은 ref가 같기때문에 true

null, undefined

null == undefined //true
null === undefined // false

if, ?, switch

if, else if, else operator

if statement(문)안의 값이 true면 그 안에 있는 블록을 실행한다.
false면 밑에 else if statement 안의 값을 확인하고 true면 실행한다.
전부 false면 마지막 else statement안의 값을 실행한다.

const name = 'yj';

if (name === 'yj') {
  console.log('hello yj!');
} else if (name === 'coder') {
  console.log('You are amazing coder');
} else {
  console.log('unknown');
}

? operator (ternary operator)

if를 좀더 간단하게 사용할 수 있는 ?operator
name === 'yj'statement에 ?를 붙이면 statement가 true면 'yes'를 실행하고 false면 다음에 나오는걸 실행한다.

// (condition ? value1 : value2);
const name = 'yj';
console.log (name === 'yj' ? 'yes' : 'name'); // yes

간혹 ?operator를 nesting해서 묶어서 쓰는 경우가 있는데 그런 경우에는 코드 가독성이 떨어지기 때문에 ?operator는 간단할 때만 사용하는게 맞다.

switch operator

switch()안의 값이 true면 : 다음에 오는 값을 실행하고 멈추고
false면 다음으로 넘어가서 똑같이 실행한다.
같은 메시지를 사용한다면 반복할 필요 없이 밑에 예시처럼 case를 연달아서 붙여놔도 된다.
else if를 많이 써야 하는 상황이면 switch 사용을 추천!!!!
어떤 넓은 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 좀 더 효과적이고
특정한 값에 일치하는 조건을 만들 때는 switch문이 좀 더 효과적이다.

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 loop

while()안의 값이 false가 나올때까지 무한대로 실행되는것을 말한다.

//while loop, while the condition is truthy,
//body code is executed
let i = 3;
while (i > 0) {
  console.log(`while: ${i}`);
  i--;
}

i가 0보다 큰가? 그렇다. 3이다. 그래서 출력이 한번되고 1감소 시켜서 2
i가 0보다 큰가? 그렇다. 2이다. 그래서 출력이 또 되고 1감소 시켜서 1
i가 0보다 큰가? 그렇다. 1이다. 그래서 출력이 또 되고 1 감소 시켜서 0
i가 0보다 큰가? 아니다. 0이다. 여기서 멈추게 된다.

do while loop

먼저 블록을 실행한 다음에 조건이 맞는지 안맞는지 검사한다.
블록을 먼저 실행하고 싶으면 do while을 쓰고
조건문이 맞을 때만 블록을 실행하고 싶다면 while을 쓰면 된다.

//do while loop, body code is execited first
// then check the condition
let i = 3;

do {
  console.log(`do.while ${i}`);
  i--;
} while (i > 0);

for loop

//for loop, for(begin; condition; step)
let i = 3;

for (i =3; i > 0; i--) {
  console.log(`for: ${i}`);
}

begin은 딱 한번만 호출하게 되고 그 다음에 블록을 실행하기전에 condition을 검사한 다음에 블록이 실행이 되면 step을 실행하게 된다.

for (let i=3; i > 0; i = i -2) {
  //inline variable declaration
  console.log(`inline variable for: ${i}`);
}

for 안에서 지역변수를 선언해서 작성하는 것도 가능하다.

break, continue

break는 반복을 완전히 끝내는 것이다.
continue는 지금 것만 건너뛰고 다음걸 실행하는 것이다.

// 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}`);
}
//break
//Q2. iterate from 0 to 10 print numbers until reaching 8 (use break)
let i = 0;
for (i = 0; i < 10; i++) {
  if (i > 8) {
    break;
  }
  console.log(`q2. ${i}`);
}
profile
React, React-Native Developer

0개의 댓글