연산과 반복문

ME2DESIGNER.COM·2022년 2월 12일
0

JavaScript

목록 보기
4/16
post-thumbnail

1. 문자열 연결

백틱(`) 기호를 사용한 string literals에 경우 $기호를 이용하여 변수값을 계산하여 문자을 마들 수 있으며, 또한 싱글쿼터[``] 이용 시 특수문자열를 사용하지 않고도 줄바꿈시 그 형태로 문자에 적용이 되어진다.

// 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); // 2
console.log(1 - 1); // 0
console.log(1 / 1); // 1
console.log(1 * 1); // 1
console.log(5 % 2); // 1 (나누고 나머지 값)
console.log(2 ** 3); // 8 (거듭제곱)

3. 증감 연산자

// Increment and decrement operators
let counter = 0;
const preIncrement = ++counter;
console.log('preIncrement: ${preIncrement}, counter: ${counter});
// preIncrement: 1, counter: 1}

const postIncrement = counter++;
console.log('postIncrement: ${preIncrement}, counter: ${counter});
// preIncrement: 1, counter: 2}
            
const preIncrement = --counter;
console.log('preIncrement: ${preIncrement}, counter: ${counter});
// preIncrement: 1, counter: 1}

const postIncrement = counter--;
console.log('postIncrement: ${preIncrement}, counter: ${counter});
// preIncrement: 1, counter: 0}

4. 산술(산수) 연산자

// Arithmetic 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;

5. 비교 연산자

// Comparison operator
console.log(10 < 6); 
console.log(10 <= 6); 
console.log(10 > 6); 
console.log(10 >= 6); 

6. 논리 연산자

||, && 연산 과정에서 ture 또는 false가 나오면 이후 연산 작업을 진행하지고 멈추게 된다.
그러므로 ||, && 사용시 연산 많은 함수에 경우 가장 마지막에 선언하는 것이 효율적인 코드 방식이다.

// Logical operators
// || (or), && (and), ! (not)
const value1 = false;
const value2 = 4 < 2;

// || (or)
console.log(`or: ${value1 || value2 || check()}`);

// && (and)
console.log(`and: ${value1 && value2 && check()}`);

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

// ! (not)
console.log(!value1); // false → true

7. 동등 연산자

==, !=는 value값만 비교하지만 ===, !== 는 type과 value 모두 비교한다.
그러므로 ===, !== 사용하는 것을 권장한다.

// Equality
const stringFive = '5';
const numberFive = 5;

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

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

// object equality by reference
const test1 = {name: 'test'};
const test2 = {name: 'test'};
const test3 = test2;

console.log(test1 == test2) // false
console.log(test1 === test2) // false
console.log(test1 === test3) // 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

8. 조건부 연산자

// Conditional operators
// if, else if, else
if () {
{
  // run
} else if () {
  // run
} else {
  // run
}

9. 삼항 조건 연산자

삼항 조건식을 반복적으로 사용해야되는 경우 if 또는 swich를 사용하는 것이 가독성에 좋다.

// Ternary operator 
console.log(name === 'test' ? 'yes' : 'no') // no

10. Switch 문

// Switch statement
const browser = 'IE';
switch (browser) {
  case 'IE':
    console.log('IE');
    brake;
  case 'Chrome':
  case 'Firefox':
    console.log('Chrome or Firefox');    
    brake;
  default:
    console.log('default);
    brake;
}

11. 반복문

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

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

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

break, continue
반복문 끝내고 싶을때는 break 또는 continue를 사용하여 끝낼 수 있습니다.

  • brake가 발생되는 지점에서 종료하고 반복문 블록을 벗어납니다.
  • continue가 발생되는 지점만 실행하지 않고, 처음으로 돌아가 반복문을 계속 실행합니다.
// 숫자 10 ~ 0까지 짝수인 경우만 출력
for (let i = 11; i >= 0; i--) {
  if (i % 2 !=== 0) {
    continue;
  }
  console.log(`${i}`);
}
// 10, 8, 6, 4, 2, 0

// 숫자 0~10까지 실행 중 숫자 8을 만나면 반복문 정지
for (let i = 0; i < 11; i++) {
  console.log(i);
  if (i === 8) {
    break;
  }
}
profile
UI 마크업 개발자 장지훈입니다.

0개의 댓글