더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)를 이용해서 연산을 할 수 있다. 자바스크립트에의 연산자는 다음과 같다. 산술 연산자, 문자 결합 연산자, 대입(복합대입) 연산자, 증감 연산자, 비교 연산자, 논리 연산자, 삼항 조건 연산자
1. 산술 연산자
산술 연산자는 사칙연산과 같다. 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 바로 산술연산자이다. 산술연산을 하기 위해서 반드시 연산 대상 데이터(=피연산자)가 반드시 두 개 있어야한다.
연산
예시
더하기 +
15 + 2 = 17
빼기 -
15 - 2 = 13
곱하기 *
15 * 2 = 30
나누기 /
15 / 2 = 7.5
나머지 %
15 % 2 = 1
연산 대상 데이터(=피연산자)란? - 15 + 2 라는 연산 내용이 있다면, 더하기는 '연산자'이고 15와 2는 '연산 대상 데이터(=피연산자)'이다.
//예시
var number1 = 15;
var number2 = 2;
var result;
result = number1 + number2;
console.log("number1 + number2 :", result);
result = number1 - number2;
console.log("number1 - number2 :", result);
result = number1 / number2;
console.log("number1 / number2 :", result);
result = number1 * number2;
console.log("number1 * number2 :", result);
result = number1 % number2;
console.log("number1 % number2 :", result);
자바스크립트에서는 숫자끼리 더하는 것 뿐만 아니라 변수끼리 더하는 것도 가능하다. 아래의 예시에서 num1 +num2; 는 1 + 10으로 계산되어 11이라는 값이 나온다. 하지만 num1+num2라고 쓰면 변수값만 있고 변수값을 담을 변수명이 없기 때문에 새로운 변수명을 지어 주어야 한다.
sum1과 sum2로 새로운 변수명을 만들어 각각 숫자로 연산한 값과 변수로 연산한 값을 넣어 보았다. sum2는 변수 안에서 연산이 다 끝났기 때문에 11이라는 값을 가질 수 밖에 없지만, sum1은 num1을 가져와서 다른 곳에서 사용하고 싶을 때 사용하거나 바꾸기에 용이하다.
// 예시
var num1 = 1;
var num2 = 10;
// 아래 sum1과 sum2의 결과값은 같지만 다르다.
var sum1 = num1 + num2;
var sum2 = 1 + 10;
2. 문자 결합 연산자
문자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터이다. 여러개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다. 기호는 더하기(+)를 사용한다.
//예시
var str1 = "안녕하세요.";
var str2 = "제이름은";
var str3 = "김땡땡 입니다.";
var str4 = "전화번호는";
var str5 = 1234;
var str6 = "입니다.";
var result2 = str1 + str2 + str3 + str4 + str5 + str6;
console.log(result2);
console.log(typeof result2);
문자 결합 연산자는 피연산자로 문자형 데이터가 포함되면 나머지 피연산자의 데이터는 자동으로 문자로 변환된다. 이러한 문자 결합이 이루어지면 하나의 문자형 데이터로 반환된다. 더하기(+) 연산기호는 앞에 있는 데이터 순서대로 더해진다. 즉, 피연산자가 숫자로 시작하다가 중간에 문자를 만나면 앞전의 수는 산술연산이 되다가 문자뒤는 문자결합으로 바뀌어 단순한 문자의 나열이 되는 것이다.
증감 연산자는 숫자형 데이터를 1씩 증가시키는 증가연산자(++)와 1씩 감소시키는 감소연산자(--)가 있다. 증감 연산자는 피연산자가 1개만 필요한 '단항연산자'이다. 즉, 증감 연산자는 스스로 연산하는 연산자로, 증감 연산자는 기호가 어디에 오느냐에 따라서 계산 방식이 달라진다.
증감 연산자는 기호의 위치에 따라 연산 방식이 두가지로 나뉜다. 기호가 변수의 앞에 오는 것을 '전위연산' 기호가 변수의 뒤에 오는 '후위연산'으로 부르는데, 보통 후위연산방식을 가장 많이 쓴다.
연산 방식
전위 연산
변수A = ++(혹은 --)변수B, 변수B의 값을 먼저 증감시키고 변수 A값에 입력한다.
후위 연산
변수A = 변수B++(혹은 --), 변수B와 변수 A의 값을 대입시키고 변수B의 값을 증감한다.
var B = 1
// 1. 전위 연산 예시
// 변수B의 값을 먼저 1 증가시킨 후 변수A에 대입한다.
var A = ++B // A=2 B=2
// 2. 후위 연산 예시
// 변수B와 변수A의 값을 먼저 대입하고 다음 변수B의 값을 증가시킨다.
var A = B++ // A=1 B=2
6. 비교 연산자
비교 연산자는 두 데이터를 '크다', '작다', '같다'와 같이 비교할 때 사용하는 연산자이다. 연산된 결과값은 true또는 false로 반환된다.
* 항상 기준은 A로 두고 말해야한다.
비교 연산자 기본형
A > B
A는 B보다 크다. (=초과)
A < B
A는 B보다 작다. (=미만)
A >= B
A는 B보다 크거나 같다. (=이상)
A <= B
A는 B보다 작거나 같다. (=이하)
비교연산자에서 '느슨한 비교'와 '엄격한 비교'는 true와 false의 범위값에서 차이가 존재한다. 숫자를 비교할 경우, 느슨한 비교는 자료형의 종류를 상관하지 않고 표기된 숫자가 일치하면 true 다르면 false 값을 반환한다. 엄격한 비교는 숫자를 비교할 경우 표기된 숫자 뿐 아니라 자료형까지 모두 일치해야 true 값이 반환되고, 하나라도 다르면 false 값이 반환된다. 보통 엄격한 비교를 많이 사용한다.
비교(느슨한 비교, 엄격한 비교) 연산자 기본형
A == B
A는 B와 같다. (느슨한 비교)
A === B
A는 B와 같다. (엄격한 비교)
A != B
A는 B와 다르다. (느슨한 비교)
A !== B
A는 B와 다르다. (엄격한 비교)
'예시1'에서 10과 '10'은 표기된 숫자는 같지만 숫자형 데이터와 문자형 데이터라는 차이를 가진다. 그렇기 때문에 느슨한 비교에서는 같은 값으로 엄격한 비교에서는 다른 값으로 인식한다.
// 예시1
var k = 10;
var m = "10";
k == 10; //true
k == "10"; //false
m === 10; //false
m === "10"; //true
7. 논리 연산자
논리연산자는 true 또는 false로 나누는 논리형 데이터를 피연산자로 사용해 논리형 데이터로 결과값을 내는 연산자이다. 논리연산자에서 사용하는 연산자는 ||(or)연산자, &&(and)연산자, !(not) 연산자가 있다.
||(or)연산자는 피연산자 중 하나라도 true값이 나오면 true로 최종값을 반환하고, &&(and)연산자는 피연산자 중 하나라도 false가 있으면 최종값을 false로 반환하기 때문에 모든 피연산자가 true 여야만 true값을 반환한다. !(not)연산자는 논리부정연산자로 '단항연산자'이며, 최종 결과가 true면 false를 반환하고, false면 true 를 반환한다.
tip. || 기호 쓰는법 : shift 를 누른 채 ￦ 기호를 누르면 | 기호가 나온다.
//예시
var a = 10;
var b = 20;
var m = 30;
var n = 40;
var result;
result = a > b || b >= m || m > n; //false
// result = false or false or false = false
result = a > b || b >= m || m <= n; //true
// result = false or false or true = true
result = a <= b && b <= m && m <= n; //true
// result = true and true and true = true
result = !(a > b); // true
// result = !(false) = true
8. 삼항 조건 연산자
삼항 조건 연산자는 조건식(=결과값이 논리형 데이터로 나오는 식)의 만족 여부에 따라 결과가 달라지는 연산자이다. 삼항 조건 연산자는 연산을 위해 3개의 피연산자가 필요하다.
//예시
var a = 10;
var b = 3;
var result = a > b ? "javascript" : "hello world";
document.write(result, "<br/>");
// 10>3값은 true이기 때문에 javascript가 출력된다.
var result = a < b ? "javascript" : "hello world";
document.write(result, "<br/>");
// 10<3 값은 false이기 때문에 hello world가 출력된다.
연산자 우선순위
연산자가 여러 개가 있을 경우 먼저 계산해야 하는 것을 연산자의 우선순위라고 한다. 예를 들어 2+(1+3)*5 라는 산술식에 괄호 내용 부터 계산하고 곱하기를 계산 후 더기를 하는 순서가 있듯이, 연산자에도 우선순위가 있다.
