[JS] 02-operator (연산, 반복문, for, while, swich 등)

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

 

 

---

2. Numeric operators (숫자 연산자)

 

 

console.log(1 + 1);
console.log(1 - 1);
console.log(1 / 1);
console.log(1 * 1);
console.log(1 % 1); -> 나누고 나머지값
console.log(2 ** 3); -> 2의 3승

 

---

3. Increment and decrement operators( ++ / -- )

 

let counter = 2;

//preIncrement: 변수의 값을 먼저 증가시킨후 그 변수를 사용한다.
const preIncrement = ++counter; 
//(아래코드와 동일)
//counter = counter + 1 ->변수의 값이 먼저 증가
//preIncrement = counter; ->그 변수의 값이 출력
//즉 preIncrement : 3, counter:3 이 나옴
//(감소할땐)const preDecrement = --counter;


//postIncrement: 변수의 값을 먼저 사용하고 나중에 값을 증가시킨다.
const postIncrement = counter++;
//(아래코드와 동일)
//postIncrement = counter; -> 위에서 증가된 3을 사용
//counter = counter + 1; ->증가된 3에 +1을 더하니 4가나옴 
//(감소할땐)const postDecrement = counter--;
//즉 postIncrement : 3, counter:4 가 나옴

 

---

4. Assignment operators ( = )

 

let x = 3;
let y = 6;
x += y; // x = x + y;와 같은 뜻. 중복되는 x를 생략한것
x -= y;
x *= y;
x /= y;

 

---

5. comparison operators (< / > / <= / >= )

 

console.log(10<6)
console.log(10>6)
console.log(10<=6)
console.log(10>=6)

 

---

6. Logical operators: ||(or) / &&(and) / !(not)

 

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

 

• || (or) : 처음으로 true가 나오면 연산을 멈춤. 

console.log(`or: ${value1 || value2 || check() }`);
-> value1이 true이므로 value1에서 연산을 멈춤.
//check()같은 복잡한 함수형은 맨 마지막에 배치하는게 좋음. 심플한게 앞으로!

 

• && (and): 모두 true가 나와야지 연산을 멈춤.

console.log(`and: ${value1 && value2 && check() }`);
->value2 가 false이므로 value2뒤부터는 true여도 실행이 안됨.

//tip : null체크할때도 많이 쓰임 nullObject && nullObject.something
예시)
if(nullableObject !=null){
nullableObject.something;
}


function check(){
for (let i = 0 ; i<10 ; i++){
console.log('거짓!');
}
return true;
}

 

• ! (not): 값을 반대로 바꿔줌

console.log(!value1); 
-> 기존의 true에서 false로 바꿔줌

 

---

7. Equality ( == / === )

 

const stringFive = '5';
const numFive = 5;

 

• (==) loose equality : 문자와 숫자가 같다고 여김. 

console.log(stringFive == numFive) -> true
console.log(stringFive != numFive) -> false

 

• (===) strick equality : 문자와 숫자가 다르다고 여김.

console.log(stringFive === numFive) -> false
console.log(stringFive !== numFive) -> true

 

• 퀴즈! 맞춰보세요~

console.log(0 == false) -> 맞음
console.log(0 === false) -> 틀림(Boolean 타입이 아니기 떄문)
console.log('' == false) -> 맞음
console.log('' === false) -> 틀림(Boolean 타입이 아니기 떄문)
console.log(null == false) -> 맞음
console.log(null === false) -> 틀림 (서로 다른 타입이기 때문)

 

---

8. Conditional operators : if / else if / else

 

const name = 'red';


if(name === 'red'){
console.log('빨간색은 red');
} else if (name === 'yellow'){
console.log('노란색은 yellow');
}else{
console.log('그런색은 없습니다.');
}

 

---

9. Ternary operator(삼항 연산자) :간단한 출력할때 많이 쓰임

 

condition ? true : false

const name = 'Tom';

console.log(name === 'Tom' ? 'yes' : 'no'); -> ture면 왼쪽에 있는 'yes'가 출력됨

 

---

10. Switch

 

if문에서 esle/if를 반복해서 많이 사용한다면 스위치문을 고려해보는것도 좋음

나중에 타입스크립트에서 정해저있는 타입을 검사하거나 enum 비슷한 아이들을 검사할때는 스위치를 쓰는것이 가독성에 좋다.

 

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;
}

 

---

 

11. Loop 반복문 (while / do while / for)

• while : 값이 false로 나오기전까지 무한대로 돈다.

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

 

• do while : 먼저 블럭을 실행한 다음에 조건이 맞는지 안맞는지 검사한다.

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

 

정리: 블럭을 먼저 실행하고 싶다면 do while을 , 조건문이 맞을때만 실행하고 싶다면 while을 사용.

•  for 

for(begin 딱 한번만 호출을 하게됨 ; condition 맞는지 안맞는지 검사 ; step)

-> condition 과 step만 false 나올때까지 반복실행

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

 

for (let i = 3 ; i>0 ; i--){ //let을 안에써서 지역변수를 설정하기도 함.(inline variable declaration)
	console.log(`for: ${i}`);
}

 

 

• nasted loops (중첩 반복문) : while과 for을 중첩해서도 쓸수 있음.

for (let i=0 ; i<10 ; i++){
  for(let j=0 ; j<10 ; j++){
   console.log(`i: ${i}, j:${j}`)
  }
}

•  break / continue

-break : loop를 완전히 끝내는것

-continue : 지금것만 스킵하고 다음스텝으로 넘어가는것

 

 

Q1 : continue를 이용해서 0-10 을 짝수만 나오게 하기

정답:

for(let i=0 ; i<11 ; i++){
 if(i%2 !== 0){
  continue;
 } console.log(i);
}

Q2 : break를 이용해서 0-10 입력중 8이 나오면 멈추게 하기

정답:

for(let i=0 ; i<11 ; i++){
  if(i>8){
    break;
  }console.log(i);
}

---

이 글은 유튜브 드림코딩 by 엘리님의 JS 입문강의를 보면서 정리한것 입니다.