자바스크립트는 여러 종류의 연산을 위한 다양한 연산자(operator)를 제공하고 있습니다.
산술 연산자는 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자입니다.
산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.
산술 연산자 | 설명 |
---|---|
+ | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함. |
- | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌. |
* | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함. |
/ | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔. |
% | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환함. |
var x = 10, y = 4;
document.write(x + y + "<br>"); // 14
document.write(x - y + "<br>"); // 6
document.write(x * y + "<br>"); // 40
document.write(x / y + "<br>"); // 2.5
document.write(x % y); // 2
대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽입니다.
또한, 앞서 살펴본 산술 연산자와 결합한 다양한 복합 대입 연산자가 존재합니다.
대입 연산자 | 설명 |
---|---|
= | 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입함. |
+= | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입함. |
-= | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입함. |
*= | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입함. |
/= | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입함. |
%= | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입함. |
var x = 10, y = 10, z = 10;
x = x - 5;
y -= 5; // y = y - 5 와 같은 표현임.
z =- 5; // z = -5 와 같은 표현임.
증감 연산자는 피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자입니다.
이 연산자는 피연산자가 단 하나뿐인 단항 연산자입니다.
증감 연산자는 해당 연산자가 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서 및 결과가 달라집니다.
증감 연산자 | 설명 |
---|---|
++x | 먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행함. |
x++ | 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴. |
--x | 먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행함. |
x-- | 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴. |
var x = 10, y = 10;
document.write((++x - 3) + "<br>"); // x의 값을 우선 1 증가시킨 후에 3을 뺌.
document.write(x + "<br>"); // 11
document.write((y++ - 3) + "<br>"); // 먼저 y에서 3을 뺀 후에 y의 값을 1 증가시킴.
document.write(y); // 11
비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환합니다.
비교 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.
비교 연산자 | 설명 |
---|---|
== | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함. |
=== | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함. |
!= | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함. |
!== | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함. |
> | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환함. |
>= | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환함. |
< | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함. |
<= | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함. |
자바스크립트에서 비교 연산자는 피연산자의 타입에 따라 두 가지 기준으로 비교를 진행합니다.
논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환합니다.
&& 연산자와 || 연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.
! 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽입니다.
논리 | 연산자 |
---|---|
&& | 논리식이 모두 참이면 참을 반환함. (논리 AND 연산) |
∥ | 논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산) |
! | 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산) |
다음은 논리 연산자의 모든 동작의 결과를 보여주는 진리표(truth table)입니다.
A | B | A && B | A ∥ B | !A |
---|---|---|---|---|
true | true | true | true | false |
true | false | false | true | false |
false | true | false | true | true |
false | false | false | false | true |
var x = true, y = false;
document.write((x && y) + "<br>"); // false (논리 AND 연산)
document.write((x || y) + "<br>"); // true (논리 OR 연산)
document.write(!x); // false (논리 NOT 연산)
비트 연산자는 논리 연산자와 비슷하지만, 비트(bit) 단위로 논리 연산을 수행합니다.
또한, 비트 단위로 전체 비트를 왼쪽이나 오른쪽으로 이동시킬 때도 사용합니다.
비트 연산자 | 설명 |
---|---|
& | 대응되는 비트가 모두 1이면 1을 반환함. (비트 AND 연산) |
ㅣ | 대응되는 비트 중에서 하나라도 1이면 1을 반환함. (비트 OR 연산) |
^ | 대응되는 비트가 서로 다르면 1을 반환함. (비트 XOR 연산) |
~ | 비트를 1이면 0으로, 0이면 1로 반전시킴. (비트 NOT 연산) |
<< | 지정한 수만큼 비트를 전부 왼쪽으로 이동시킴. (left shift 연산) |
>> | 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴. (right shift 연산) |
>>> | 지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨. |
var x = 15, y = 8, z = 15;
document.write((x << 1) + "<br>"); // 곱하기 2와 같으므로 15 * 2 = 30
document.write((y >> 1) + "<br>"); // 나누기 2와 같으므로 8 / 2 = 4
document.write(~z); // 1의 보수와 같으므로 -(15+1) = -16
위의 예제에서 첫 번째 연산은 비트를 전부 왼쪽으로 1비트씩 이동시키는 연산입니다.
따라서 그 결괏값은 처음 값에 2를 곱한 것과 같게 됩니다.
반대로 두 번째 연산은 비트를 전부 오른쪽으로 1비트씩 이동시키는 연산입니다.
따라서 그 결괏값은 처음 값에 2를 나눈 것과 같게 됩니다.
프로그램의 순차적인 흐름을 제어해야할 때 사용하는 실행문을 제어문이라고 합니다.
이러한 제어문에는 조건문, 반복문 등이 포함됩니다.
자바스크립트에서 사용하는 조건문의 형태는 다음과 같습니다.
1. if문
-문법
if (표현식) {
표현식의 결과가 참일 때 실행하고자 하는 실행문;
}
-예제
var x = 10, y = 20;
if (x == y) {
document.write("x와 y는 같습니다.");
}
if (x < y) {
document.write("x가 y보다 작습니다.");
}
if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
document.write("x가 y보다 큽니다.");
-잘못된 예제
if (x = y) {
document.write("두 변수 x와 y는 같습니다.");
} //'=='를 사용해야 할 곳에 '='를 사용했습니다.
2. if / else 문
-문법
if (표현식) {
표현식의 결과가 참일 때 실행하고자 하는 실행문;
} else {
표현식의 결과가 거짓일 때 실행하고자 하는 실행문;
}
-예제
var x = 10, y = 20;
if (x == y) {
document.write("x와 y는 같습니다.");
} else {
if (x < y)
document.write("x가 y보다 작습니다.");
else // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
document.write("x가 y보다 큽니다.");
}
3. if / else if / else 문
-문법
if (표현식1) {
표현식1의 결과가 참일 때 실행하고자 하는 실행문;
} else if (표현식2) {
표현식2의 결과가 참일 때 실행하고자 하는 실행문;
} else {
표현식1의 결과도 거짓이고, 표현식2의 결과도 거짓일 때 실행하고자 하는 실행문;
}
-예제
var x = 10, y = 20;
if (x == y) {
document.write("x와 y는 같습니다.");
} else if (x < y) {
document.write("x가 y보다 작습니다.");
} else { // x > y인 경우
document.write("x가 y보다 큽니다.");
}
4. switch 문
-문법
switch (조건 값) {
case 값1:
조건 값이 값1일 때 실행하고자 하는 실행문;
break;
case 값2:
조건 값이 값2일 때 실행하고자 하는 실행문;
break;
...
default:
조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
break;
}
-예제 1
var x = 10;
switch (typeof x) {
case "number":
document.write("변수 x의 타입은 숫자입니다.");
break;
case "string":
document.write("변수 x의 타입은 문자열입니다.");
break;
case "object":
document.write("변수 x의 타입은 객체입니다.");
break;
default:
document.write("변수 x의 타입을 잘 모르겠네요...");
break;
}
-예제 2
var day = new Date().getDay(); // 오늘의 요일을 반환함. (일요일: 0 ~ 토요일: 6)
switch (day) {
case 1: // 월요일인 경우
case 2: // 화요일인 경우
case 3: // 수요일인 경우
case 4: // 목요일인 경우
default: // 0부터 6까지의 값이 아닌 경우
document.write("아직도 주말은 멀었네요... 힘내자구요!!");
break;
case 5: // 금요일인 경우
document.write("오늘은 불금이네요!!");
break;
case 6: // 토요일인 경우
case 0: // 일요일인 경우
document.write("즐거운 주말에도 열심히 공부하는 당신~ 최고예요!!");
break;
}
자바스크립트에서 사용할 수 있는 반복문의 형태는 다음과 같습니다.
1. while 문
-문법
while (표현식) {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}
-예제
var i = 1;
while (i < 10) { // 변수 i가 10보다 작을 때만 while 문을 반복함.
document.write(i + "<br>");
i++; // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.
}
2. do / while 문
-문법
do {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
} while (표현식);
-예제
var i = 1, j = 1;
while (i > 3) { // 변수 i의 초깃값은 1이기 때문에 이 while 문은 한 번도 실행되지 않음.
document.write("i : " + (i++) + "<br>");
}
do { // 변수 j의 초깃값은 1이기 때문에 이 do / while 문은 단 한 번만 실행됨.
document.write("j : " + (j++) + "<br>");
} while (j > 3);
3. for 문
-문법
for (초기식; 표현식; 증감식) {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}
-예제
for (var i = 1; i < 10; i++) {
document.write(i + "<br>");
}
4. for / in 문
-문법
for (변수 in 객체) {
객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}
-예제 1
var arr = [3, 4, 5];
for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함.
document.write(i + " ");
}
for (var i in arr) { // 위와 같은 동작을 하는 for / in 문
document.write(i + " ");
}
-예제 2
var obj = { name : "이순신", age : 20 };
for (var i in obj) {
document.write(i + "<br>");
}
5. for / of 문
-문법
for (변수 of 객체) {
객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}
-예제 1
var arr = [3, 4, 5];
for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함.
document.write(arr[i] + " ");
}
for (var value of arr) { // 위와 같은 동작을 하는 for / of 문
document.write(value + " ");
}
-예제 2
var arr = new Set([1, 1, 2, 2, 3, 3]);
for (var value of arr) {
document.write(value + " ");
}
-문법
label:
식별하고자 하는 특정 영역
-예제
arrIndex:
for (var i in arr) {
document.write(i);
}
-문법
1. continue;
2. continue 라벨이름;
-예제
var exceptNum = 3;
for (var i = 0; i <= 100; i++) {
if (i % exceptNum == 0) // exceptNum의 배수는 출력하지 않음.
continue;
document.write(i + " ");
}
-예제
gugudan:
for (var i = 2; i <= 9; i++) {
dan:
for (var j = 1; j <= 9; j++) {
if ((i*j) % 2 == 0)
continue dan;
document.write(i + " * " + j + " = " + (i*j) + "<br>");
}
}
-문법
1. break;
2. break 라벨이름;
-예제
var lectures = ["html", "css", "자바스크립트", "php"];
var topic = "자바스크립트";
for (var i = 0; i < lectures.length; i++) {
if (lectures[i] == topic) {
document.write(topic + " 과목은 " + (i + 1) + "번째 과목입니다.");
break; // 원하는 값을 찾은 후에는 더 이상 for 문을 반복하지 않고 빠져나감.
}
}
-예제 2
gugudan:
for (var i = 2; i <= 9; i++) {
dan:
for (var j = 1; j <= 9; j++) {
if (i > 3)
break gugudan;
document.write(i + " * " + j + " = " + (i*j) + "<br>");
}
}
자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의됩니다.
배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.
배열 요소의 타입이 고정되어 있지 않기 때문에, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.
또한 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어있을 수 있습니다.
자바스크립트에서 배열을 Array 객체로 다뤄집니다.
자바스크립트에서 배열을 만드는 방법은 다음과 같습니다.
//문법 :
1. var arr = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법
2. var arr = Array(배열요소1, 배열요소2,...); // Array 객체의 생성자를 이용하는 방법
3. var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법
-예제
var arrLit = [1, true, "JavaScript"]; // 배열 리터럴을 이용하는 방법
var arrObj = Array(1, true, "JavaScript"); // Array 객체의 생성자를 이용하는 방법
var arrNewObj = new Array(1, true, "JavaScript"); // new 연산자를 이용한 Array 객체 생성 방법
document.write(arrLit + "<br>"); // 1,true,JavaScript
document.write(arrObj + "<br>"); // 1,true,JavaScript
document.write(arrNewObj); // 1,true,JavaScript
자바스크립트에서 배열의 각 요소를 참조하고 싶을 때는 [] 연산자를 사용합니다.
-예제
// 문법 : 배열이름[인덱스]
var arr = ["JavaScript"]; // 요소가 하나뿐인 배열을 생성함.
var element = arr[0]; // 배열의 첫 번째 요소를 읽어서 대입함.
arr[1] = 10; // 배열의 두 번째 요소에 숫자 10을 대입함. 배열의 길이는 1에서 2로 늘어남.
arr[2] = element; // 배열의 세 번째 요소에 변수 element의 값을 대입함. 배열의 길이는 2에서 3으로 늘어남.
document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.
document.write("배열 arr의 길이는 " + arr.length + "입니다.<br>"); // 배열의 길이를 출력함.
delete arr[2]; // 배열의 세 번째 요소를 삭제함. 하지만 배열의 길이는 변하지 않음.
document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.
document.write("배열 arr의 길이는 " + arr.length + "입니다."); // 배열의 길이를 출력함.
자바스크립트에서 배열에 새로운 배열 요소를 추가하는 방법은 다음과 같습니다.
// 문법 :
1. arr.push(추가할 요소); // push() 메소드를 이용하는 방법
2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법
-예제
var arr = [1, true, "Java"];
arr.push("Script"); // push() 메소드를 이용하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script
arr[arr.length] = 100; // length 프로퍼티를 이용하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script,100
arr[10] = "자바스크립트"; // 특정 인덱스를 지정하여 추가하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script,100,,,,,,자바스크립트
document.write(arr[7]); // undefined
배열의 모든 요소에 차례대로 접근하고 싶을 때는 for 문과 같은 반복문을 사용하여 접근할 수 있습니다.
-예제
var arr = [1, true, "JavaScript"];
var result = "<table><tr>";
for (var idx in arr) {
result += "<td>" + arr[idx] + "</td>";
}
result += "</tr></table>";
document.write(result);
자바스크립트에서 배열(array)은 정렬된 값들의 집합으로 정의되며, Array 객체로 다뤄집니다.
또한, 자바스크립트는 사용자가 배열과 관련된 작업을 손쉽게 할 수 있도록 다양한 메소드도 제공하고 있습니다.
다음 예제는 배열과 각 배열 요소의 typeof 연산 결과를 보여주는 예제입니다.
var arr = new Array(10, "문자열", false);
document.write((typeof arr) + "<br>"); // object
document.write((typeof arr[0]) + "<br>"); // number
document.write((typeof arr[1]) + "<br>"); // string
document.write(typeof arr[2]); // boolean