예제로 배우는 자바스크립트 요약 및 코드 분석 2장 - 3,4

2장 데이터 형과 연산자

 

2.3 연산자

2.3.1 산술 연산자

  산술 연산자는 숫자의 산술 연산에 사용되는 연산자이다.

산술 연산자의 종류
산술 연산자	설명
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지 계산
**	거듭제곱 계산
++	1 증가
--	1 감소

 

예제 2-21. 사칙연산 사용 예

arith.html

코드 원문

<script>
    let x = 10, y = 20;
    let z;
    z = x + y * 5 / 2;

    document.write(z);
</script>

예제 2-21. 사칙연산 사용 예

arith.html

코드 원문

<script>
    let x = 10, y = 20;
    // 변수 x, y 선언
    let z;
    // 변수 z 선언
    z = x + y * 5 / 2;
    // (x + ((y * 5) /2)) 값을 변수 z에 저장한다.

    document.write(z);
    // z에 저장된 값을 출력한다.
</script>

  일반적인 사칙연산과 마찬가지로 자바스크립트도 곱셈(*)과 나눗셈(/)이 덧셈(+)과 뺄셈(-)보다 먼저 계산된다. 따라서 변수 z에는 60이 저장되고 60이 출력되게 된다.

 

이번에는 다음 예제를 통해서 나머지 연산자 %를 알아보자.

예제 2-22. 나머지 연산자(%) 사용 예

rest.html

코드 원문

<script>
    let a = 10, b = 20;
    let c, d ,e;
    c = a % 2; // 몫:5, 나머지:0
    d = b % 3; // 몫:6, 나머지:2
    e = 3 % a; // 몫:0, 나머지:3

    document.write(c + "<br>");
    document.write(d + "<br>");
    document.write(e);
</script>

예제 2-22. 나머지 연산자(%) 사용 예

rest.html

코드 분석

<script>
    let a = 10, b = 20;
    // 변수 a 선언하고 값 10 저장, 변수 b 선언하고 값 20 저장
    let c, d ,e;
    // 변수 c, d, e 한꺼번에 선언
    c = a % 2; // 몫:5, 나머지:0
    d = b % 3; // 몫:6, 나머지:2
    e = 3 % a; // 몫:0, 나머지:3

    document.write(c + "<br>");
    document.write(d + "<br>");
    document.write(e);
</script>

 

다음은 거듭제곱 연산자 **, 증가 연산자 ++, 감소 연산자--의 사용법에 대해서 알아보자.

예제 2-23. 거듭제곱 연산자, 증가/감소 연산자 사용 예

op.html

코드 원문

<script>
    let a = 3, b = 5;
    let c,d,e;
    c = a**3;   // 27
    c++;        // 28
    c = c + 3;  // 31
    c--;        // 30
    c = a + b + c;  // 38
    
    document.write(c);
</script>

예제 2-23. 거듭제곱 연산자, 증가/감소 연산자 사용 예

op.html

코드 분석

<script>
    let a = 3, b = 5;
    let c,d,e;
    c = a**3;   // 27
    c++;        // 28
    c = c + 3;  // 31
    c--;        // 30
    c = a + b + c;  // 38
    
    document.write(c);
    // 변수 c에 저장된 값을 출력한다.
</script>

 

2.3.2 문자열 연결 연산자

  자바스크립트의 문자열 연결 연산자에서는 산술 연산자 덧셈에 사용되는 + 기호가 그대로 사용된다.

문자열 연결 연산자
문자열 연결 연산자	예	설명
+	"안녕"+"하세요"	"안녕"과 "하세요"를 하나로 연결하여 "안녕하세요"가 된다.

예제 2-24. 문자열 연결 연산자(+) 사용 예

merge.html

코드 원문

<script>
    let name = "홍길동"
    let age = 30;
    let text1, text2;

    text1 = "이름:" + name;
    text2 = "나이:" + age;
    document.write(text1 + "<br>");
    document.write(text2);
</script>

예제 2-24. 문자열 연결 연산자(+) 사용 예

merge.html

코드 분석

<script>
    let name = "홍길동"
    let age = 30;
    let text1, text2;

    text1 = "이름:" + name;
    /* 문자열 변수 text1에 문자열 "이름:"에 변수 name에 저장된 값 "홍길동"을 연결해서 저장 
    최종적으로 "이름:홍길동" 문자열이 변수 text1에 저장되게 된다. */
    text2 = "나이:" + age;
    /* 문자열 변수 text2에 문자열 "나이:"에 변수 age에 저장된 값 "30"을 연결해서 저장
    최종적으로 "나이:30" 문자열이 변수 text2에 저장되게 된다. */
    document.write(text1 + "<br>");
    // 변수 text1에 저장된 값을 출력하고 개행
    document.write(text2);
    // 변수 text2에 저장된 값을 출력
</script>

 

이번에는 위 코드에 <table> 태그를 적용해서 결과를 표로 출력하는 프로그램을 작성해보자.

예제 2-25. 예제 2-24에 <table> 태그 적용

merge_table.html

코드 원문

<script>
    let name = "홍길동";
    let age = 30;
    let text = "";

    text = text + "<table border='1'>";
    text = text + "<tr><th>이름</th><th>나이</th></tr>";
    text = text + "<tr><td>" + name + "</td><td>" + age + "</td></tr>";
    text = text + "</table>";

    document.write(text);
</script>

예제 2-25. 예제 2-24에 <table> 태그 적용

merge_table.html

코드 분석

<script>
    let name = "홍길동";
    let age = 30;
    let text = "";
    // 변수 text에 Null 값을 저장

	/* 연결 연산자를 이용해서 변수 text에 값을 순차적으로 저장
    표를 만들기 위해서 <table> 관련 태그들을 저장한다. */
    text = text + "<table border='1'>";
    text = text + "<tr><th>이름</th><th>나이</th></tr>";
    text = text + "<tr><td>" + name + "</td><td>" + age + "</td></tr>";
    text = text + "</table>";

    document.write(text);
</script>

 

2.3.3 할당 연산자

  자바 스크립트의 할당(assignment) 연산자는 데이터나 변수 값을 변수에 저장, 즉 메모리 공간에 할당하는 역활을 수행한다.

할당 연산자의 종류
할당 연산자	예	동일한 표현	설명
=	x = 2		2를 변수 x에 할당
+=	x += 2	x = x + 2	현재 x의 값에 2를 더해서 얻은 값을 다시 x에 할당
-=	x -= 2	x = x - 2	현재 x의 값에서 2를 빼서 얻은 값을 다시 x에 할당
*=	x *= 2	x = x * 2	현재 x의 값에 2를 곱해서 얻은 값을 다시 x에 할당
/=	x /= 2	x = x / 2	현재 x의 값을 2로 나누어서 얻은 값을 다시 x에 할당
%=	x %= 2	x = x % 2	현재 x의 값을 2로 나눈 나머지를 다시 x에 할당

예제 2-26. 할당 연산자 사용 예

assign.html

코드 원문

<script>
    let a = 10, b = 20, c = 30, d = 40, e = 50;
    let f = "안녕";

    a +=3;   // 13, a=a+3과 동일
    b -= 8;  // 12, b=b-8과 동일
    c *= 2;  // 60, c=c*2와 동일
    d /= 10;  // 4, d=d/10과 동일
    e %= 6;  // 2, e=e%6과 동일
    f += "하세요";      // "안녕하세요", f= f+"하세요"와 동일

    document.write(a + "<br>");
    document.write(b + "<br>");
    document.write(c + "<br>");
    document.write(d + "<br>");
    document.write(e + "<br>");
    document.write(f);
</script>

예제 2-26. 할당 연산자 사용 예

assign.html

코드 원문

<script>
    let a = 10, b = 20, c = 30, d = 40, e = 50;
    let f = "안녕";

    a +=3;   // 13, a=a+3과 동일
    b -= 8;  // 12, b=b-8과 동일
    c *= 2;  // 60, c=c*2와 동일
    d /= 10;  // 4, d=d/10과 동일
    e %= 6;  // 2, e=e%6과 동일
    f += "하세요";      // "안녕하세요", f= f+"하세요"와 동일

    document.write(a + "<br>");
    // document.write 메서드를 사용해서 a에 저장된 값을 출력
    document.write(b + "<br>");
    document.write(c + "<br>");
    document.write(d + "<br>");
    document.write(e + "<br>");
    document.write(f);
</script>

 

 

다음은 할당 연산자 +=가 문자열에 적요왼 예이다.

예제 2-27. 할당 연산자 +=의 문자열 적용 예

assign.html

코드 원문

<script>
let name = "홍길동";
let tel = "010-1234-5678";
let age = 30;

let text = "";
text += "<table border='1'>";
text += "<tr><th>이름</th><th>전화번호</th><th>나이</th></tr>";
text += "<tr><td>" + name + "</td><td>" + tel + "</td><td>" + age + "</td></tr>";
text += "</table>"

document.write(text);
</script>

예제 2-27. 할당 연산자 +=의 문자열 적용 예

assign.html

코드 분석

<script>
let name = "홍길동";
// 변수 name 선언하고 문자열 "홍길동" 저장
let tel = "010-1234-5678";
let age = 30;

let text = "";
// 변수 text 선언하고 값을 null로 선정

// 할당 연산자 +=로 변수 text에 표를 만들어주는 <table> 태그 값과 표의 내용을 저장
text += "<table border='1'>";
text += "<tr><th>이름</th><th>전화번호</th><th>나이</th></tr>";
text += "<tr><td>" + name + "</td><td>" + tel + "</td><td>" + age + "</td></tr>";
text += "</table>"

document.write(text);
</script>

 

2.3.4 비교 연산자

  비교 연산자는 두 변수(또는 데이터)의 값을 서로 비교하는데 사용된다. 자바스크립트의 비교 연산자는 다음과 같다.

비교 연산자의 종류
비교 연산자	의미	예	결과	설명
==	같다	3 == 3;	true	'3은 3과 같다', true가 됨
		"3" == 3;	true	"3"은 문자열, 3은 정수, 데이터형이 달라도 true가 된다.
===	값과 데이터 형이 같다	3 === 3	true	'3은 3과 같다(데이터형도 같다)', true가 된다.
		"3" === 3;	false	데이터 형이 다르기 때문에 false가 된다.
!=	다르다	3 != 3	false	'3은 3과 다르다', false가 된다.
		"3" != 3;	false	"3"과 3의 데이터 형을 고려하지 않기 때문에 false가 된다.
!==	값과 데이터 형이 다르다	3 !== 3;	false	'3과 3은 다르다', false가 된다.
		"3" !== 3;	true	"3"과 3은 데이터 형이 다르기 때문에 true가 된다.
>	크다	5 > 3	true	'5는 3보다 크다', true가 된다.
<	작다	5 < 3	false	'5는 3보다 작다', false가 된다.
>=	크거나 같다	5 >= 5	true	'5는 5보다 크거나 같다.' ture가 된다.
<=	작거나 같다	5 <= 5	true	'5는 5보다 작거나 같다', true가 된다.

비교 연산자는 두개의 데이터(또는 변수)의 값을 비교하여 참(true)인지 거짓(false)인지를 판별하는데 사용된다.

 

다음 코드를 통해서 비교 연산자의 사용법에 대해 알아보자.

예제 2-28. 비교 연산자 사용 예

compare.html

코드 원문

<script>
    var a = 3;
    var b = "3";
    var c = 5;
    var d = 3;

    document.write((a == b) + "<br>");   // true
    document.write((a === b) + "<br>");  // false
    document.write((a != b) + "<br>");   // false
    document.write((a !== b) + "<br>");  // true
    document.write((a > c) + "<br>");   // false
    document.write((a < c) + "<br>");   // true
    document.write((a >= c) + "<br>");  // false
    document.write(a <= d);             // true
</script>

예제 2-28. 비교 연산자 사용 예

compare.html

코드 분석

<script>
    var a = 3;
    var b = "3";
    var c = 5;
    var d = 3;

    document.write((a == b) + "<br>");   // true
    // 비교 연산자 ==로 변수 a, b의 값이 같은지 비교, 같으므로 true 출력
    document.write((a === b) + "<br>");  // false
    // 비교 연산자 ===로 변수 a, b의 값과 데이터 타입이 같은지 비교 다르므로 false 출력
    document.write((a != b) + "<br>");   // false
    // 비교 연산자 !=로 변수 a, b의 값이 다른지 비교, 같으므로 false 출력
    document.write((a !== b) + "<br>");  // true
    // 비교 연산자 !==로 변수 a, b의 값과 데이터 타입이 다른지 비교 다르므로 true 출력
    document.write((a > c) + "<br>");   // false
    document.write((a < c) + "<br>");   // true
    document.write((a >= c) + "<br>");  // false
    document.write(a <= d);             // true
</script>

 

2.3.5 논리 연산자

  논리 연산자에는 다음 표에서와 같이 &&, ||, ! 연산자가 있다. &&, ||, !는 각각 AND, OR, NOT 연산을 의미한다.

논리 연산자의 종류
논리 연산자	연산	설명
&&	AND	두 조건이 모두 true일 경우에만 최종 결과가 true가 된다.
||	OR	두 조건 중 하나만 true가 되어도 최종 결과는 true가 된다.
!	NOT	결과가 true인 경우에는 galse로 변경하고 반대로 false인 경우에는 true로 변경한다.

 

2.4 프로그래밍 맛보기

  이번에는 앞에서 배운 변수, 연산자, 데이터 형을 활용하고 숙달하기 위해서 간단한 자바스크립트 프로그램을 작성해보자.

 

2.4.1 원의 넓이 구하기

다음은 반지름이 주어졌을 때  원의 넓이를 구하는 프로그램이다.

예제 2-29. 원의 넓이 구하기

circle_area.html

코드 원문

<script>
    let r = 8, area;
    const pi = 3.14;
    area = r * r * pi;

    document.write("반지름:" + r + "<br>");
    document.write("원의 넓이:" + area);
</script>

예제 2-29. 원의 넓이 구하기

circle_area.html

코드 분석

<script>
    let r = 8, area;
    // 반지름 변수 r를 선언하고 값 8 저장, 변수 area 선언
    const pi = 3.14;
    // 변수 pi에 값 3.14를 저장
    area = r * r * pi;
    // 변수 area를 선언하고 r*r*pi 값을 저장

    document.write("반지름:" + r + "<br>");
    /* 메서드 document.write에 문자열 연결 연산자를 사용해서
    문자열 "반지름:"과 변수 r에 저장된 값 저장 */
    document.write("원의 넓이:" + area);
    // "원의 넓이:" + area 출력
</script>

 

2.4.2 거스름돈 계산하기

거스름돈을 계산하는 프로그램을 작성해보자.

예제 2-30. 거스름돈 계산하기

change.html

코드 원문

<script>
    let pay = 10000;    // 지불 금액
    let price = 1500;   // 물건 가격
    let num = 5;        // 구매 개수
    let change;         // 거스름돈

    change = pay - price*num;
    document.write("거스름돈:" + change + "원");
</script>

예제 2-30. 거스름돈 계산하기

change.html

코드 분석

<script>
    let pay = 10000;    // 지불 금액
    let price = 1500;   // 물건 가격
    let num = 5;        // 구매 개수
    let change;         // 거스름돈

    change = pay - price*num;
    // 변수 change를 선언하고 pay - price*num 값을 저장
    document.write("거스름돈:" + change + "원");
    // 문자열 연결 연산자를 사용해서 "거스름돈:" + change + "원"를 출력
</script>

 

2.4.3 섭씨/화씨 변환하기

  다음은 섭씨 기온을 화씨로 변환하는 프로그램이다. 섭씨(centigrade)는 표준 온도 측정 단위이다. 그러나 미국과 유럽에서는 온도 단위로 화씨(fahrenheit)를 사용한다. 섭씨를 화씨로 변환하는 프로그램에 대해서 알아보자

섭씨를 화씨로 변환하는 공식 : 화씨 = 섭씨 * 9/5 + 32

예제 2-31. 섭씨/화씨 환산하기

c_f.html

코드 원문

<script>
    let c = 30;     // 섭씨 온도
    let f;          // 화씨 온도

    f = c * 9/5 + 32;
    document.write("섭씨:" + c + ", 화씨:" + f);
</script>

예제 2-31. 섭씨/화씨 환산하기

c_f.html

코드 원문

<script>
    let c = 30;     // 섭씨 온도
    let f;          // 화씨 온도

    f = c * 9/5 + 32;
    // c * 9/5 + 32 연산 결과를 변수 f에 저장
    document.write("섭씨:" + c + ", 화씨:" + f);
    // 문자열 연결 연산자를 활용해서 "섭씨:" + c + ", 화씨:" + f 출력
</script>