연산자

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

연산자

1. 연산자란?

프로그램에서 특정한 동작을 하도록 지시하는 기호. 프로그래밍에서 연산이란 사칙연산은 물론 문자열을 연결해서 새로운 문자열을 만들고 값의 크기를비교하는 등의 여러가지 동작을 의미한다. 이런 연산을 지시하는 기호가 연산자이다. 산술,관계,할당,논리,부정,삼항,비트,단항,등이 있다.

1.1. 연산자의 종류

연산자 유형	연산자	설명
산술 연산자	`+`	덧셈
	`-`	뺄셈
	`*`	곱셈
	`/`	나눗셈
	`%`	나머지 계산
	`++`	증가 (값에 1을 더함)
	`--`	감소 (값에서 1을 뺌)
대입 연산자	`=`	값을 변수에 할당함
	`+=`	기존 값에 값을 더하고 결과를 변수에 할당함
	`-=`	기존 값에서 값을 빼고 결과를 변수에 할당함
	`*=`	기존 값에 값을 곱하고 결과를 변수에 할당함
	`/=`	기존 값으로 값을 나누고 결과를 변수에 할당함
	`%=`	기존 값으로 나머지 계산 후 결과를 변수에 할당함
비교 연산자	`==`	동등 비교 (값이 같은지 확인)
	`!=`	부등 비교 (값이 다른지 확인)
	`===`	일치 비교 (값과 타입이 모두 같은지 확인)
	`!==`	부일치 비교 (값과 타입이 모두 다른지 확인)
	`<`, `<=_`, `>`, `>=`	크기/같음을 비교하는 관계 연산자들
논리 연산자	`&&`,`	`,` !`

1.1. 추가연산자(병합연산자 nullish)

변수나 표현식이 null 또는 undefined인 경우에만 대체 값을 반환하는 연산자

//nullish 병합 연산자 '??'
const a = null;
const b = "1";
console.log(a ?? b);

2. 산술연산자

2.1. 산술연산자의 기본활용

예제 [05]

console.log(100 + 200); // 300
console.log(200 - 80); // 120
console.log(100 * 3); // 300
console.log(400 / 5); // 80 나누기 연산자
console.log(402 % 5); // 2  나머지 연산자
console.log(2 ** 3); // 8 **은 제곱!!

2.2. 산술연산자의 자료형 활용

+ 연산자는 자료형에 따라 연산결과가 달라질 수 있다.

표현식	결과
문자형+문자형	문자형
문자형+숫자형	문자형

예제 [06]

let t1 = '망고는';
let t2 = 5;
let t3 = '살';
let t6 = true;
let t4 = t1 + t2 + t3 + t6;
console.log(typeof t4); //string
alert(t4); //'망고는5살true'

문자형과 + 연산자를 사용하면 모든 자료형이 문자형으로 변환된다.

Info: 자바스크립트는 변수가 가지는 값에 따라 그 타입이 동적으로 결정되는 동적 타이핑(dynamic typing) 언어이다.

동적 타이핑의 장점은 유연성이다. 변수의 타입이 자유롭기 때문에 언제든지 동적인 값에 따라 변수의 타입이 자동으로 바뀔 수 있으므로 유연하고 생산적인 코딩이 가능하다. 하지만 동적 타이핑으로 인해 변수의 타입을 예측하기 어려우므로, 이에 따라 예상하지 않은 에러가 발생할 수도 있다. 이를 보완한 것이 타입스크립트 이다.

2. 산술연산자의 자료형 활용예제

[07] 코드

const x = 75;
const y = 87;
const add = x + y;
document.write("국어 점수 :" + x + "<br>");
document.write("수학 점수 :" + y + "<br>");
document.write("합계 :" + add + "<br>");
document.write("평균은 :");
document.write(add / 2);
document.write(`국어점수: ${x}<br>수학점수: ${y}<br>합계: ${add}<br> `);

Info:

const add = x + y;
- + 는 숫자 자료형으로 연산하였다.
document.write('국어 점수 :' + x + '<br>');
- + 는 문자 자료형으로 연산하였다.
document.write(국어점수: ${x}수학점수: ${y}합계: ${add} );
- 백틱을 사용하면 표현식과 문자를 쉽게 연결할수 있다. (Template literals)

증가연산자

변수에 붙이면 1씩 증가/감소 시키는 연산자 앞에 붙이면 전위연산, 뒤에 붙이면 후위 연산이라고 하며 위치에 따라 결과가 다르다

종류	설명
A = ++A	A에 A에 1을 더한값을 재할당 전위연산
A = A++	A에 A에 1을 더한값을 재할당 후위연산
A = –A	A에 A에 1을 뺀값을 재할당 전위연산
A = A–	A에 A에 1을 뺀값을 재할당 후위연산

코드[08]

let x = 1;
document.write(x++); //1(2)
document.write(x++); //2(3)
document.write(x++); //3(4)
document.write(x++); //4(5)
document.write('<br>');x = 1;
document.write(++x); //2
document.write(++x); //3
document.write(++x); //4
document.write(++x); //5

Info: 후위 연산은 결과를 다음 호출시 반환하고 전위 연산은 결과를 즉시 반환한다.

4. 할당연산자

종류	설명
=	우항을 좌항에 할당
+=	좌항에 우항을 더한후 좌항에 재할당

<!DOCTYPE html>
<html>
  <head>
    <title>노드 추가</title>
  </head>
  <body>
    <div id="container"><p>첫 번째 단락</p></div>
    <script>
      // 기존의 요소 선택           
      const container = document.getElementById('container');
      // 새로운 노드 생성 및 추가
      container.innerHTML += '<p>두 번째 단락</p>';
    </script>
  </body>
</html>

Info: container.innerHTML += '
두 번째 단락
'; 의 연산자를 + 로 변경하면 두번째 p 태그는 교체된다. += 연산자는 가산후 재할당 한다.

5. 비교연산자

비교연산자는 우항과 좌항의 값은 비교후 참이나 거짓을 반환한다. 주로 조건문에 사용한다.

종류	설명
A==B	A와 B가 같다
A!=B	A와 B가 같지 않다
A===B	A와 B가 자료형까지 같다
A!==B	A와 B가 자료형까지 같지 않다
A<B	A가 B보다 작다
A<=B	A가 B보다 작거나 같다
A>B	A가 B보다 크다
A>=B	A가 B보다 크거나 같다

코드[09]

let x = 10;
let y = 20;
document.write(x + ">=" + y + ": ");
document.write(x >= y);
document.write("<br>");
document.write(x + "<=" + y + ": ");
document.write(x <= y);
document.write("<br>");
document.write(x + "!=" + y + ": ");
document.write(x != y);
document.write("<br>");
document.write(x + "==" + y + ": ");
document.write(x == y);
document.write("<br>");
document.write(x + "===" + y + ": ");
document.write(x === y);
document.write("<br>");
document.write(x + "!==" + y + ": ");
document.write(x !== y);
document.write("<br>");

Info: x=10, y=20 이며

document.write(x >= y); 10은 20보다 크거나 같다는 false 이다 document.write(x <= y); 10은 20보다 작거나 같다는 true 이다 document.write(x != y); 10은 20과 같지 않다는 true 이다 document.write(x == y); 10은 20과 같다 는 false 이다 document.write(x !== y); 10은 20과 자료형까지 같지 않다는 true 이다 document.write(x === y); 10은 20과 자료형까지 같다 는 false 이다

6. 논리연산자

불리언(boolean) 연산자 라고도 하며 결괏값이 true, false 를 반환하는 연산자

종류	설명
A&&B	A와 B가 모두 True일 경우에만 True
A ∣∣ B	A또는 B가 True일 경우 True
!A	A가 True이면 False, False이면 True

코드

let x = 7 > 6 && 1 > 8;
let y = 7 > 6 || 1 > 8;
let z = !(7 > 6);
document.write("7이 6보다 크고 1이 8보다 크면 논리값은?");
document.write(x + "<br>");
document.write("7이 6보다 크거나 1이 8보다 크면 논리값은?");
document.write(y + "<br>");
document.write("7이 6보다 크지 않으면 논리값은?");
document.write(z + "<br>");

Info: 결과

t/f => false
t/f => true
t => false

7. 문제

7.1-마무리문제

실행

Info: 20대 여성이라면 결과값이 true로, 아니라면 결과 값으로 false로 출력하게 하시오.

20대 대상의 소개팅을 준비 중입니다. 남성은 모집이 완료 되었지만 여성은 아직 모집이 다 되지 않았네요. prompt메서드를 활용하여 참가 희망자의 성별과 나이를 확인합니다. 20대 여성이라면 결과값이 true로, 아니라면 결과 값으로 false가 나오게 만드세요

힌트 : 참가희망자의 성별과 나이를 입력받아야 합니다. prompt(message, default);

7.2. 마무리문제

실행

Info: prompt 메서드를 활용하여 국어, 영어, 수학 점수를 입력 받으세요.

평균이 70점 이상이고 각 과목별 점수가 60점 이상이면 true를 아니라면 false를 출력하시오.

8. 조건부연산자

자바스크립트에서 항을 3개 가지는 연산자는 이것 밖에 없어서 삼항연산자라고도 불리우며 조건문을 간단히 작성할때 많이 사용됨

문법	설명
(조건) ? A : B	조건 ? 참이면 A실행 : 거짓이면 B실행

코드

//your="어려워요"
your = '재밌어요';
let study = your == '어려워요' ? ' 천재이시군요' : '복습하세요';
document.write(`자바스크립트가 ${your} <h1>${study}</h1>`);

9.문제

9.1.문제1

실행

Info: 삼항 연산자 사용

경아는 오늘 교통비 3,000원 식비 7,000원, 음료비 2,000원을 사용했습니다. 하루 용돈인 10,000원을 초과했을 경우 “000원 초과”라고 출력시키고 아닐 경우 “돈 관리 참 잘했어요!”라고 출력하세요

9.2.문제2

실행

Info: 삼항 연산자 사용

방문자에게 질의응답 창(prompt)을 이용하여 신장과 몸무게를 입력받아 옵니다. 방문자의 몸무게가 적정 몸무게보다 이상일 경우 “적정 몸무게 이상”, 미만일 경우에는 “적정 몸무게 미달”로 출력되도록 하세요. *힌트: 적정 몸무게 공식은 ’몸무게=(신장-100)0.9’입니다

10. 연산자의 우선순위

자바스크립트에서 연산자 우선순위는 표현식 내에서 연산자가 어떤 순서로 평가되는지를 결정하는 규칙입니다. 이 규칙에 따라 표현식의 평가 순서와 결과가 달라질 수 있습니다. 아래 표에서는 대략적으로 정리 하였습니다. 구체적인 사항은 아래 MDN 링크를 참조하세요. MDN

우선순위	연산자
1	`( )`	그룹연산자
2	`--,++,!`	단항/증가연산자
3	`_,/,%,+,-`	산술연산자
4	`>,>=,<,<=,==,===,!==`	비교연산자
5	`&&,
6	`=,+=,-+,_=,/=,%=`	할당연산자

연산자

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

연산자

mdn

1. 연산자란?

1.1. 연산자의 종류

연산자 유형	연산자	설명
산술 연산자	`+`	덧셈
	`-`	뺄셈
	`*`	곱셈
	`/`	나눗셈
	`%`	나머지 계산
	`++`	증가 (값에 1을 더함)
	`--`	감소 (값에서 1을 뺌)
대입 연산자	`=`	값을 변수에 할당함
	`+=`	기존 값에 값을 더하고 결과를 변수에 할당함
	`-=`	기존 값에서 값을 빼고 결과를 변수에 할당함
	`*=`	기존 값에 값을 곱하고 결과를 변수에 할당함
	`/=`	기존 값으로 값을 나누고 결과를 변수에 할당함
	`%=`	기존 값으로 나머지 계산 후 결과를 변수에 할당함
비교 연산자	`==`	동등 비교 (값이 같은지 확인)
	`!=`	부등 비교 (값이 다른지 확인)
	`===`	일치 비교 (값과 타입이 모두 같은지 확인)
	`!==`	부일치 비교 (값과 타입이 모두 다른지 확인)
	`<`, `<=_`, `>`, `>=`	크기/같음을 비교하는 관계 연산자들
논리 연산자	`&&`,`	`,` !`

1.1. 추가연산자(병합연산자 nullish)

변수나 표현식이 null 또는 undefined인 경우에만 대체 값을 반환하는 연산자

//nullish 병합 연산자 '??'
const a = null;
const b = "1";
console.log(a ?? b);

2. 산술연산자

2.1. 산술연산자의 기본활용

예제 [05]

console.log(100 + 200); // 300
console.log(200 - 80); // 120
console.log(100 * 3); // 300
console.log(400 / 5); // 80 나누기 연산자
console.log(402 % 5); // 2  나머지 연산자
console.log(2 ** 3); // 8 **은 제곱!!

2.2. 산술연산자의 자료형 활용

+ 연산자는 자료형에 따라 연산결과가 달라질 수 있다.

표현식	결과
문자형+문자형	문자형
문자형+숫자형	문자형

예제 [06]

let t1 = '망고는';
let t2 = 5;
let t3 = '살';
let t6 = true;
let t4 = t1 + t2 + t3 + t6;
console.log(typeof t4); //string
alert(t4); //'망고는5살true'

문자형과 + 연산자를 사용하면 모든 자료형이 문자형으로 변환된다.

Info: 자바스크립트는 변수가 가지는 값에 따라 그 타입이 동적으로 결정되는 동적 타이핑(dynamic typing) 언어이다.

2. 산술연산자의 자료형 활용예제

[07] 코드

const x = 75;
const y = 87;
const add = x + y;
document.write("국어 점수 :" + x + "<br>");
document.write("수학 점수 :" + y + "<br>");
document.write("합계 :" + add + "<br>");
document.write("평균은 :");
document.write(add / 2);
document.write(`국어점수: ${x}<br>수학점수: ${y}<br>합계: ${add}<br> `);

Info:

const add = x + y;
- + 는 숫자 자료형으로 연산하였다.
document.write('국어 점수 :' + x + '<br>');
- + 는 문자 자료형으로 연산하였다.
document.write(국어점수: ${x}수학점수: ${y}합계: ${add} );
- 백틱을 사용하면 표현식과 문자를 쉽게 연결할수 있다. (Template literals)

증가연산자

변수에 붙이면 1씩 증가/감소 시키는 연산자 앞에 붙이면 전위연산, 뒤에 붙이면 후위 연산이라고 하며 위치에 따라 결과가 다르다

종류	설명
A = ++A	A에 A에 1을 더한값을 재할당 전위연산
A = A++	A에 A에 1을 더한값을 재할당 후위연산
A = –A	A에 A에 1을 뺀값을 재할당 전위연산
A = A–	A에 A에 1을 뺀값을 재할당 후위연산

코드[08]

let x = 1;
document.write(x++); //1(2)
document.write(x++); //2(3)
document.write(x++); //3(4)
document.write(x++); //4(5)
document.write('<br>');x = 1;
document.write(++x); //2
document.write(++x); //3
document.write(++x); //4
document.write(++x); //5

Info: 후위 연산은 결과를 다음 호출시 반환하고 전위 연산은 결과를 즉시 반환한다.

4. 할당연산자

종류	설명
=	우항을 좌항에 할당
+=	좌항에 우항을 더한후 좌항에 재할당

<!DOCTYPE html>
<html>
  <head>
    <title>노드 추가</title>
  </head>
  <body>
    <div id="container"><p>첫 번째 단락</p></div>
    <script>
      // 기존의 요소 선택           
      const container = document.getElementById('container');
      // 새로운 노드 생성 및 추가
      container.innerHTML += '<p>두 번째 단락</p>';
    </script>
  </body>
</html>

Info: container.innerHTML += '
두 번째 단락
'; 의 연산자를 + 로 변경하면 두번째 p 태그는 교체된다. += 연산자는 가산후 재할당 한다.

5. 비교연산자

비교연산자는 우항과 좌항의 값은 비교후 참이나 거짓을 반환한다. 주로 조건문에 사용한다.

종류	설명
A==B	A와 B가 같다
A!=B	A와 B가 같지 않다
A===B	A와 B가 자료형까지 같다
A!==B	A와 B가 자료형까지 같지 않다
A<B	A가 B보다 작다
A<=B	A가 B보다 작거나 같다
A>B	A가 B보다 크다
A>=B	A가 B보다 크거나 같다

코드[09]

let x = 10;
let y = 20;
document.write(x + ">=" + y + ": ");
document.write(x >= y);
document.write("<br>");
document.write(x + "<=" + y + ": ");
document.write(x <= y);
document.write("<br>");
document.write(x + "!=" + y + ": ");
document.write(x != y);
document.write("<br>");
document.write(x + "==" + y + ": ");
document.write(x == y);
document.write("<br>");
document.write(x + "===" + y + ": ");
document.write(x === y);
document.write("<br>");
document.write(x + "!==" + y + ": ");
document.write(x !== y);
document.write("<br>");

Info: x=10, y=20 이며

6. 논리연산자

불리언(boolean) 연산자 라고도 하며 결괏값이 true, false 를 반환하는 연산자

종류	설명
A&&B	A와 B가 모두 True일 경우에만 True
A ∣∣ B	A또는 B가 True일 경우 True
!A	A가 True이면 False, False이면 True

코드

let x = 7 > 6 && 1 > 8;
let y = 7 > 6 || 1 > 8;
let z = !(7 > 6);
document.write("7이 6보다 크고 1이 8보다 크면 논리값은?");
document.write(x + "<br>");
document.write("7이 6보다 크거나 1이 8보다 크면 논리값은?");
document.write(y + "<br>");
document.write("7이 6보다 크지 않으면 논리값은?");
document.write(z + "<br>");

Info: 결과

t/f => false
t/f => true
t => false

7. 문제

7.1-마무리문제

실행

Info: 20대 여성이라면 결과값이 true로, 아니라면 결과 값으로 false로 출력하게 하시오.

힌트 : 참가희망자의 성별과 나이를 입력받아야 합니다. prompt(message, default);

7.2. 마무리문제

실행

Info: prompt 메서드를 활용하여 국어, 영어, 수학 점수를 입력 받으세요.

평균이 70점 이상이고 각 과목별 점수가 60점 이상이면 true를 아니라면 false를 출력하시오.

8. 조건부연산자

자바스크립트에서 항을 3개 가지는 연산자는 이것 밖에 없어서 삼항연산자라고도 불리우며 조건문을 간단히 작성할때 많이 사용됨

문법	설명
(조건) ? A : B	조건 ? 참이면 A실행 : 거짓이면 B실행

코드

//your="어려워요"
your = '재밌어요';
let study = your == '어려워요' ? ' 천재이시군요' : '복습하세요';
document.write(`자바스크립트가 ${your} <h1>${study}</h1>`);

9.문제

9.1.문제1

실행

Info: 삼항 연산자 사용

9.2.문제2

실행

Info: 삼항 연산자 사용

10. 연산자의 우선순위

우선순위	연산자
1	`( )`	그룹연산자
2	`--,++,!`	단항/증가연산자
3	`_,/,%,+,-`	산술연산자
4	`>,>=,<,<=,==,===,!==`	비교연산자
5	`&&,
6	`=,+=,-+,_=,/=,%=`	할당연산자