[모던자바스크립트]03 연산자와 제어문

03-1. 프로그램 동작을 가리키는 기호, 연산자

산술연산자

• A+B → A, B는 피연산자, +는 연산자

연산자	기능	사용 예
+	2개의 피연산자 값을 더함	c = a + b
-	첫번째 피연산자 값에서 두번째 피연산자 값을 뺌	c = a – b
*	2개의 피연산자 값을 곱함	c = a * b
/	첫번째 피연산자 값에서 두번째 피연산자 값을 나눔	c = a / b
%	첫번째 피연산자 값을 두번째 피연산자 값으로 나눈 나머지	c = a % b
++	피연산자 값을 1 증가	a++
--	피연산자 값을 1 감소	B++

• 증가 연산자(++)와 감소 연산자(--)는 위치에 따라 처리 결과가 달라짐

후위연산자 / 전위연산자

• 후위연산자: x + y 계산 후 y가 1 감소함
• 전위연산자: y가 1 감소한 후 x + y 계산함

x = x + 1보다 x++을 쓰는 이유는 무엇일까? → 증감 연산자(또는 감소 연산자)가 대입 연산자(=)보다 빠르기 때문

 

할당연산자

• 연산자 오른쪽의 실행 결과를 연산자 왼쪽에 할당하는 연산자, ‘대입 연산자’ 라고도 함
• 기본적으로 = 기호를 사용함
• 할당 연산자와 산술 연산자를 합쳐 하나의 할당 연산자로 표시할 수 있음
  예) y = y + x → y += x

연산자	기능	사용 예
=	연산자 오른쪽의 값을 왼쪽 변수에 할당	y = x + 3
+=	y = y + x	y += x
-=	y = y – x	y -= x
*=	y = y * x	y *= x
/=	y = y / x	y /= x
%=	y = y % x	y %= x

 

비교 연산자

• 2개의 값을 비교해서 참이나 거짓으로 결과값을 반환하는 연산자
• 값이 같은지, 같지 않은지, 또는 큰지, 작은지 비교함

연산자	기능	사용 예
==	피연산자 값이 같으면 true	3 == “3”	true
===	피연산자 값과 데이터 유형이 모두 같으면 true	3 === “3”	false
!=	피연산자 값이 같지 않으면 true	3 != “3”	false
!==	피연산자 값과 데이터 유형이 모두 같지 않으면 true	3 !== “3”	true
<	왼쪽 피연산자 값이 오른쪽 피연산자 값보다 작으면 true	3 < 4	true
<=	왼쪽 피연산자 값이 오른쪽 피연산자 값보다 작거나 같으면 true	3 <= 4	true
>	왼쪽 피연산자 값이 오른쪽 피연산자 값보다 크면 true	3 > 4	false
>=	왼쪽 피연산자 값이 오른쪽 피연산자 값보다 크거나 같으면 true	3 >= 4	false

 

== 와 ===, != 와 !==

• == 연산자와 != 연산자는 비교하는 피연산자의 자료형을 자동으로 변환해서 비교함
• === 연산자와 !=== 연산자는 값뿐만 아니라 데이터 유형까지 비교함
  
  
• == : 동등 연산자
  === : 일치 연산자
  != : 부등 연산자
  !== : 불일치 연산자

→ 프로그램에서는 값을 비교할 때 ===, !== 연산자를 사용하는 것이 좋음

 

문자열끼리 비교하기

• 피연산자가 문자열일 경우, 문자열에 있는 문자들의 아스키코드 값을 비교해서 결정
• 숫자보다는 문자, 영문자의 대문자보다 소문자 아스키코드 값이 더 큼
• 문자열 안의 문자가 여러 개일 경우, 맨 앞부터 하나씩 문자를 비교
• 양쪽 문자열이 같으면 그 다음 문자를 비교하는 순으로 진행

 

※ 참고 - 아스키코드

https://developer-p.tistory.com/72

 

논리 연산자

• 참(true)과 거짓(false)을 피연산자로 하는 연산자
• 논리 연산자는 ‘불리언(Boolean) 연산자’라고도 함

연산자		기능
!	NOT 연산자	피연산자 값과 반대의 값을 가짐
&&	AND 연산자	피연산자 값이 모두 true일 경우에만 true가 됨
||	OR 연산자	피연산자 값 중 하나만 true여도 true가 됨

 

 

03-2. 프로그램 흐름을 자유롭게 조절하는 조건문

if 문, if...else 문

if 문

• 기본형

if (조건) {
    조건이 true일 때 실행할 명령(들)
}

• if 문의 조건이 true가 아닐 경우 if문을 건너뛰고 다음 명령을 실행함

let y = 10
if(y < 5){
    console.log(“y는 5보다 작습니다.“)
}
y -= 5

 

if…else 문

• 조건을 체크한 후 true일 때 처리할 명령과 false일 때 처리할 명령이 따로 있을 때 사용
• if…else 문 안에 또 다른 if…else문을 사용할 수 있음
• 기본형

// 1
if (조건) {
    조건이 true일 때 실행할 명령(들)
} 
else{
 조건이 true일 때 실행할 명령(들)
} 

// 2 
if (조건) {
    조건이 true일 때 실행할 명령(들)
} else{
 조건이 true일 때 실행할 명령(들)
}

 

예제) 프롬프트 창에 사용자 이름을 입력한 후 해당 이름을 알림 창에 표시해보자

 

조건문에서 중괄호({ })의 생략

• if 문이나 else 문에서 명령이 한 줄이면 중괄호({})를 생략해서 좀 더 간단하게 작성할 수 있음

// 1
if (userInput !== null) {
    alert(userInput);
} 

// 2
if (userInput !== null)
    alert(userInput);

// 3
if (userInput !== null)  alert(userInput);

 

조건 연산자

• 조건이 복잡하지 않고 true와 false가 명확할 경우 if 문을 사용하지 않고 조건 연산자만으로도 조건 체크를 할 수 있음

(조건) ? true 일 때 실행할 명령 : false일 때 실행할 명령


if (num1 < num2) {
    small = num1;
} else {
    small = num2;
} 
// 위의 코드, 조건 연산자를 사용하여 변환
small = (num1 < num2) ? Num1 : num2;

 

switch 문

• 체크해야 할 조건 값이 많을 경우 if…else 문 보다 switch 문이 유용
• switch 문에 있는 조건은 case 중 하나만 일치하고, case 실행 후에는 완전히 switch 문을 빠져나옴
• 지정해 놓은 switch 문이 맞지 않으면 default 문에 있는 문장을 실행

switch (조건)
{
    case 값: 문장
        break;
    case 값: 문장
        break;



    default : 문장
}

 

2개 이상의 조건 체크하기

• 2개 이상의 조건을 체크해야 할 경우 논리 연산자를 사용해 조건식을 만들어야 함

연산자		기능
!	NOT 연산자	피연산자 값과 반대의 값을 가짐
&&	AND 연산자	피연산자 값이 모두 true일 경우에만 true가 됨
||	OR 연산자	피연산자 값 중 하나만 true여도 true가 됨

op1	op2	op1 || op2	op1 && op2	!op1
false	false	false	false	true
false	true	true	false	true
true	false	true	false	false
true	true	true	true	false

단축 평갓값 활용하기

• 조건식은 왼쪽에서 오른쪽으로 진행하면서 처리하므로 첫번째 조건만 보고 판단하면 좀 더 빠른 조건식을 처리할 수 있음
• 2가지 이상의 조건을 체크하는 조건식을 만들 때는 첫번째 조건을 보고 빠르게 판단할 수 있도록 작성하는 것이 좋음
• AND 연산자(&&)
   → 하나만 false여도 최종 결과값이 false이므로 결과값이 false가 될 확률이 높은 조건식을 첫번째 조건식으로 사용하는 것이 좋음
• OR 연산자(||)
   → 두가지 이상의 조건식 중 하나만 true여도 최종 결과값이 true이므로 결과값이 true가 될 확률이 높은 조건식을 첫번째 조건식으로 사용하는 것이 좋음

 

 

03-3. 같은 동작을 손쉽게 반복하는 반복문

for 문

• 자바스크립트에서 가장 많이 사용하는 반복문

for (초기값; 조건; 증가식) { … }

• ① 초기값: 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화함
• ② 조건: 문장을 반복하기 위해 체크할 조건 부분이다. 이 조건을 만족해야 for 문에 있는 명령을 반복할 수 있음
• ③ 증가식: 문장 실행 후 카운터 변수를 증가시키는 부분이다. 보통 카운터 값을 하나 더 증가시키는 용도로 사용

for문을 사용해 배열값 가져오기(아래 이미지)

forEach 문

• 배열에서는 forEach 문을 사용해서 좀 더 편리하게 반복할 수 있음

배열명.forEach(콜백 함수) { … }

※ 콜백 함수 (04-3절에서 자세히 다룰 예정): 다른 함수의 인수로 사용할 수 있는 함수를 가리킨다.

forEach 문으로 배열값 가져오기(아래 이미지)

 

for ··· in 문

• 반복해서 객체의 값을 가져와 처리할 수 있게 한다. (배열도 객체이므로 배열에서도 사용할 수 있음
• for…in 문은 객체의 키만 가져올 수 있으므로 해당 키 값에 접근하려면 대괄호([ ])를 사용

for (변수 in 객체) { … }

for ··· in 문으로 키와 값 가져오기

 

for ··· of 문

• 문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문

for (변수 of 객체) { … }

for ··· of 문으로 배열값 가져오기

 

while 문과 do ··· while 문

while 문

• 조건이 참(true)인 동안 문장을 반복
• 조건부터 체크한 후 true일 경우에만 문장을 반복 (조건이 false라면 문장을 실행되지 않을 수 있음)

while (조건) {
    실행할 명령
}

 

do ··· while 문

• while문과 달리 조건이 맨 뒤에 붙음
• 일단 문장을 한번 실행한 후 조건을 체크함 (조건이 false라고 해도 최소 한 번은 실행됨)

do {
    실행할 명령
} while (조건)

 

예제) 지정한 횟수만큼 화면에 * 기호를 표시해보자

→ start 값이 0일 경우 while 문에서는 아무것도 표시되지 않지만, do…while 문에서는 일단 *를 표시하므로 화면에 나타남

 

break 문과 continue 문

break 문

• 조건이 끝나기 전에 반복문을 빠져나와야 하는 경우에 사용

	break

 

continue 문

• 조건에 해당되는 값을 만났을 때 실행하던 반복 문장을 건너뛰고 반복문의 맨 앞으로 되돌아가
  다음 반복 과정으로 넘어가도록 함 (→ 반복 과정을 한 차례 건너뛴다!)

	continue

 

 

 

 

교재: Do it! 모던 자바스크립트 프로그래밍의 정석