[Javascript] 4. 연산자, 제어구문

🏃Dekay (JuniorDeveloper)·2021년 9월 11일
0

Javascript

목록 보기
4/8
post-thumbnail

연산자 부분과 제어구문 같은 경우는 Python과 크게 다르지 않았다. 제어구문에서 살짝 다르게 사용하는 부분 정도?

1. 연산자

  • 연산자(Operator)란 정의된 변수/리터럴에 대하여 미리 결정된 특정 행위를 처리하기 위한 기호다.
    * 예를들어, =, -, , 등 모두 연산자다.
    * 추가적으로 연산자에 의해 처리되는 변수/리터럴오퍼랜드(Operand)라고 한다.

1.1 가산 연산자(+)

  • 가산 연산자(+)의 동작은 오퍼랜드의 데이터형에 따라 다르기 때문에 조심해야 한다.
console.log(10 + 1); // 👉 결과: 11
console.log('10' + 1); // 👉 결과: 101
var date = new Date(); // 👉 결과: (대한민국 표준시간)
console.log(1234 + date); // 👉 결과: 1234(대한민국 표준시간)

1.2 증감(++), 감소(--) 연산자

  • 증가/감소 연산자오퍼랜드에 대해서 아래와 코드같이 1을 가산/감산한다.
var x = 1;
var y = x++; // 후치 연산
console.log(x); // 👉 결과: 2
console.log(y); // 👉 결과: 1

var x = 1;
var y = ++x; // 전치 연산
console.log(x); // 👉 결과: 2
console.log(y); // 👉 결과: 2

1.3 소수점을 포함한 계산에서의 주의사항

  • Javascript가 내부적으로 계산을 2진수로 하기 때문에 소수점을 포함한 계산은 아래와 같이 진행해야 한다.
    • 값을 정수로 바꾼 뒤에 연산을 진행한다.
    • 위의 결과를 다시 소수로 바꾼다.

1.4 상수는 재대입할 수 없다

  • 상수'다시 대입할 수 없는 변수'이지만, '변경할 수 없다'는 의미가 아니다.
const x = [1, 2, 3];
x = [3, 2, 1]; // 배열 자체를 재대입 하기 때문에 오류
x[0] = 3; // 배열은 그대로이고 내용만 고치기 때문에 가능

1.5 분할 대입

  • 분할 대입(destructuring assignment)이란 배열/객체를 분해하여 안의 요소를 개별 변수로 분해하는 구문이다.
기존의 사용방법
var data = [1, 2, 3, 4, 5];
var x0 = data[0];
var x1 = data[1];
var x2 = data[2];

분할 대입 사용방법
let data = [1, 2, 3, 4, 5];
let [x0, x1, x2, x3, x4] = data;

1.6 조건 연산자(?:)

  • 조건 연산자는 3항 연산자라고 불리기도 한다.
  • 나중에 기술할 if 명령을 사용해도 같은 처리를 할 수 있짐만, '단순히 출력할 값을 조건에 따라 배분하고 싶은 경우'는 조건 연산자를 이용하여 간단하게 사용할 수 있다.
var x = 10;
console.log((x > 5) ? '5 이상' : ' 5 이하"); // 👉 결과: 5 이상

1.7 typeof 연산자

  • typeof 연산자오퍼랜드에 지정한 변수/리터럴의 데이터형을 나타내는 문자열을 반환한다.
var x = 1;
console.log(typeof x); // 👉 결과: number

var str = 'test';
console.log(typeof str); // 👉 결과: string

2. 제어구문

  • 순차/선택/반복을 조합해서 프로그램을 조립하는 방식을 구조화 프로그래밍이라고 한다.

2.1 조건에 따라 분기 처리-if

  • if는 '만일 ~라면, 아니면 ~'라는 구조로, 조건식이 true/false 중 어느 쪽인지에 따라 결과를 도출한다.
if (조건식) {
  조건식이 true인 경우 실행
} else {
  조건식이 false인 경우에 실행
}
  • else 블록은 생략해도 상관없다.

2.2 else if에 의한 다중 분기

  • else if를 사용하여 복수 분기를 표시하는 것도 가능하다.
if (조건식1) {
  조건식1이 true인 경우 실행
} else if (조건식2) {
  조건식2가 true인 경우에 실행
}
...
} else {
  모든 조건식이 false인 경우에 실행
}

2.3 식의 값에 따라 분기 처리-switch

  • switch는 '동치 연산자에 의한 다중 분기'에 특화된 조건 분기다.
switch (식) {
  case 값1:
    '식 = 값1'인 경우에 실행
    case 값2:
    '식 = 값2'인 경우에 실행
  ...
  default:
    식의 값이 모든 조건에 일치하지 않을 경우 실행
}
  • case 구문을 처리하고 break;를 사용하지 않으면 무한 루프에 빠진다.

2.4 조건식에 따라 루프 제어-while/do while

  • while/do while은 미리 정의된 조건식이 true인 동안 루프를 반복한다.
while(조건식) {
  조건식이 true일 때 실행
}

do {
  조건식이 true일 때 실행
} while(조건식);
  • do while은 끝부분에 문장 종료를 나타내야 한다.
  • while은 루프를 시작할 때 조건식을 확인하고, do while한번 실행 후 마지막에서 조건식을 확인한다.

2.5 지정 횟수만큼 루프 처리-for

  • 미리 지정된 횟수 만큼만 반복처리한다.
for(초기화 식; 루프 조건식; 증감식) {
  루프 내에서 실행
}

2.6 연상 배열의 요소를 순서대로 처리-for in

  • for in은 지정된 연상 배열(객체)의 요소를 추출하여 첫 번째 부터 처리한다.
for(가변수 in 연상 배열){
  루프 내에서 실행
}

2.7 배열 등을 순서대로 처리-for of

  • ES2015에서 추가된 for of는 배열 뿐만 아니라 Array와 같은 객체, 반복자/생성자 등도 모두 처리할 수 있다.
for(가변수 of 열거 가능한 객체) {
  루프 내에서 실행
}
  • 주로 for in은 연상 배열(객체)을 조작할 경우에 사용하고, for of는 배열 등을 조회할 때 사용한다.

2.8 예외 처리-try catch finally

  • 외부 요인에 의존하는 처리인 경우 예외의 발생완전히 막을 수 없기 때문에 예외 상황에 스크립트 전체가 멈추는 일이 없도록 하는 역할을 한다.
try {
  에외가 발생할지 모르는 명령
} catch (예외정보를 취할 변수) {
  예외가 발생했을 시의 명령
} finally {
  예외의 유무에 상관 없이 최종적으로 실행
}

end

profile
Believe you can & you're half way there 🙏

0개의 댓글