[연산자]
초등학교 때 배웠던 +, -, *(곱하기), /(나누기), %(나머지)를 이용해서 연산을 할 수 있다.
자바스크립트에서는 여러 연산자가 있는데 산술, 문자결합, 대입(복합대입), 증감, 비교, 논리, 상황 조건 연산자가 있다.
산술 연산자
산술 연산자는 사칙연산과 같다. +, -, *(곱하기), /(나누기), %(나머지)가 바로 산술 연산자이다.
산술 연산을 하기 위해서는 반드시 연산 대상 데이터(=피연산자) 반드시 두 개 있어야 한다.
<script>
var num1 = 15;
var num2 = 2;
var result;
result = num1 + num2;
console.log("num1 + num2 :", result); //17
result = num1 - num2;
console.log("num1 - num2 :", result); //13
result = num1 * num2;
console.log("num1 * num2 :", result); //30
result = num1 / num2;
console.log("num1 / num2 :", result); //7.5
result = num1 % num2;
console.log("num1 % num2 :", result); //1
</script>
문자결합연산자
문자 결합 연산자는 피연산자(연산대상데이터)가 문자형 데이터이다.
여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다.
기호는 +(더하기)를 사용한다.
문자 결합 연산자는 피연산자로 문자형 데이터가 한 개라도 포함되면 다른 피연산자의 데이터는 자동으로 문자형 데이터로
변환되고 문자 결합이 이루어지면서 하나의 문자형 데이터로 반환된다.
+연산기호는 앞에 있는 데이터 순서대로 더해진다.
즉, 피연산자가 숫자이고 숫자가 여러 개 있으면 숫자끼리 먼저 더해진 후 문자를 만나면 그 다음부터 문자결합이 이루어진다.
<script>
var str1 = "안녕하세요.";
var str2 = "제 이름은";
var str3 = "김땡땡 입니다.";
var str4 = "전화번호는 ";
var str5 = 1234;
var str6 = "입니다.";
var result = str1 + str2 + str3 + str4 + str5 + str6;
console.log(result);
//안녕하세요.제 이름은김땡땡 입니다.전화번호는 1234입니다.
var str7 = "하이";
var num1 = 10;
var num2 = 20;
result = str7 + num1 + num2; //하이1020
result = num1 + num2 + str7; //30하이
result = num1 + num2 + str7 + str5 + num1; //30하이123410
console.log(result);
</script>
대입연산자(=)
대입 연산자는 연산된 데이터를 변수에 저장할 때 사용한다.
'오른쪽에 있는 값을 변수에 넣는다.'라는 의미이다.
[기본형]
A = B
복합대입연산자
산술연산자와 대입연산자가 복합적으로 적용된 것을 말한다.
[기본형]
1. A + = B => A = A + B (A는 A와 B를 더한 값이다.)
2. A - = B => A = A - B (A는 A에서 B를 뺀 값이다.)
3. A * = B => A = A * B (A는 A와B를 곱한 값이다.)
4. A / = B => A = A / B (A는 A에서 B를 나눈 값이다.)
5. A % = B => A = A % B (A는 A에서 B를 나눈 나머지 값이다.)
<script>
var num1 = 10;
var num2 = 3;
num1 += num2; //num1=10 + 3 => 13;
num1 -= num2; //num1=13 - 3 => 10;
num1 *= num2; //num1=10 * 3 => 30;
num1 %= num2; //num1=30 % 3 => 0;
console.log(num1);
</script>
증감 연산자
증감 연산자는 숫자형 데이터를 1씩 증가시키는 증가연산자(++), 1씩 감소시키는 감소연산자(--)가 있다.
증감 연산자는 앞에서 배웠던 다른 연산자와 다르게 피연산자가 1개만 필요한 '단항연산자'이다.
즉, 증감 연산자는 스스로 연산하는 연산자이다.
증감 연산자는 기호가 어디에 오느냐에 따라서 계산 방식이 달라진다.
[기본형]
1. --변수; 또는 변수--; (전위연산 또는 후위연산★)
2. ++변수; 또는 변수++; (전위연산 또는 후위연산★)
전위 연산과 후위 연산
----------------------------------------------------------
증감 연산자에서 기호가 변수의 앞에 오면 '전위 연산'
변수의 뒤에 오면 '후위 연산'이라고 부른다.
보통 후위 연산 방식을 가장 많이 쓴다.
1. 전위 연산
-------------------------------------------
var A = ++B;
=> 변수 B의 값을 먼저 1 증가시킨 후 A에 대입된다.
2. 후위 연산
-------------------------------------------
var A = B++;
=> 변수 B의 값을 먼저 A에 대입시킨 후, B가 1 증가한다.
<script>
var num1 = 10;
var num2 = 20;
num1--; //9
document.write("num1은? ", num1, "<br/>");
num1++; //10
document.write("num1은? ", num1, "<br/>");
var result = num2++;
document.write("num2는? ", result, "<br/>"); //20
document.write("num2는? ", num2, "<br/>"); //21
result = ++num2;
document.write("num2는? ", result, "<br/>"); //22
</script>
비교 연산자
두 데이터를 '크다', '작다', '같다'와 같이 비교할 때 사용한다.
연산된 결과값은 true(참) 또는 false(거짓)으로 반환된다.
[기본형]
1. A > B : A는 B보다 크다. (=초과)
2. A < B : A는 B보다 작다. (=미만)
3. A >= B : A는 B보다 크거나 같다. (=이상)
4. A <= B : A는 B보다 작거나 같다. (=이하)
5. A == B : A는 B와 같다. => ==은 느슨한 비교이다. 숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기 된 숫자만 일치하면 true를 반환한다.
예를 들어 "10"과 10은 표기된 숫자가 같으므로 true를 반환한다.
6. A === B : A는 B와 같다. => ===은 엄격한 비교이다. 숫자를 비교할 경우 표기된 숫자와 자료형까지 모두 일치해야만 true를 반환한다.
예를 들어 "10"과 10은 표기된 숫자가 같지만 자료형이 다르므로 false를 반환한다.
7. A != B : A는 B와 다르다. => !=은 느슨한 비교이다. 숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기된
숫자만 다르면 true를 반환한다.
예를 들어 "10"와 10은 표기된 숫자가 같으므로 false를 반환한다.
8. A !== B : A는 B와 다르다. => !==은 엄격한 비교이다. 숫자를 비교할 경우 반드시 표기된 숫자 또는 자료형이
일치하지 않을 때 true가 반환된다.
예를 들어 "10"와 10은 표기된 숫자는 같지만 자료형이 다르므로 true를 반환한다.
<script>
var k = 10;
var m = "10";
k == 10; //true
k == "10"; //true
m === 10; //false
m === "10"; //true
var a = 10;
var b = 20;
var c = 10;
var d = "20";
var result;
result = a > b; //false
document.write(result, "<br />");
result = a < b; //true
document.write(result, "<br />");
result = a <= b; //true
document.write(result, "<br />");
result = b == d; //true
document.write(result, "<br />");
result = b !== d; //true : 쓰여진 문자는 같지만 자료형이 다르므로 true
document.write(result, "<br />");
</script>
논리 연산자
논리연산자에는 ||(or), $$(and), !(not) 연산자가 있다.
논리연산자는 논리형 데이터인 true 또는 false로 나눠지는 데이터를 피연산자로 사용하고, 결과값은 논리형 데이터가
최종 반환된다.
||(or)연산자는 피연산자 중 하나라도 true가 있으면 true로 최종값을 반환하고, &&연산자는 피연산자 중 하나라도 false가 있으면 최종값을 false로 반환한다.
즉, &&는 모든 피연산자가 true여야만 true값을 최종 반환한다.
!(not)은 논리부정연산자로 단항 연산자이며, 최종결과가 true면 false를 반환하고 false면 true를 반환한다.
[연산자 우선순위]
연산자가 여러 개 있을 경우 먼저 계산해야 하는 것을 연산자의 우선순위라고 한다. 예를 들어 2+(1+3)*5 이런 식이 있다고 할 때 ()다음 *를 계산하고, 마지막으로 +를 계산하듯, 연산자에도 우선순위가 있다.
1. ()
2. 단항연산자(++, --, !)
3. 산술연산자(+,-,*,/,%)
4. 비교연산자(<,>,>=,==,!=,===,!==)
5. 논리연산자(||,&&)
6. 대입(복합대입)연산자(=,+=,-=,*=, /=, %=)
<script>
var a = 10;
var b = 20;
var m = 30;
var n = 40;
var result;
result = a > b || b >= m || m > n; //false
document.write(result, "<br/ >");
result = a > b || b >= m || m <= n; //true
document.write(result, "<br/ >");
result = a <= b && b <= m && m <= n; //true
document.write(result, "<br/ >");
result = !(a > b); //!(false) => false를 부정하여 true를 반환함.
document.write(result, "<br/ >");
</script>
삼항조건연산자
삼항조건연산자는 조건식의 만족 여부(true 또는 false)에 따라 실행 결과가 달라지는 삼항 연산자로 연산을 위해
피연산자가 3개 필요하다.
삼항 조건 연산자는 먼저 조건식이 true인지 false인지 먼저 계산한다.
이후 true면 자바스크립트 코드1을 실행하고 종료한다.
만약 false면 자바스크립트 코드2를 실행하고 종료한다.
[기본형]
1. 조건식 ? 자바스크립트 코드1 : 자바스크립트 코드2;
2. 조건식1 ? 자바스크립트 코드1 : 조건식2 ? 자바스크립트 코드2 : 자바스크립트 코드3;
=> 1. 조건식1 검사.
2. 조건식1이 true면 자바스크립트 코드1을 실행 후 종료.
3. 조건식1이 false면 조건식2를 검사하고, true면 자바스크립트 코드 2를 실행 후 종료.
4. 조건식2가 false면 자바스크립트 코드3을 실행 후 종료.
<script>
var a = 10;
var b = 3;
var result = a > b ? "javascript" : "hello world";
document.write(result + "세계에 오신 것을 환영합니다."); //javascript세계에 오신 것을 환영합니다.
</script>
'Web > JS' 카테고리의 다른 글
| if문, else문 (0) | 2024.09.02 |
|---|---|
| 연산자 활용 테스트 (0) | 2024.09.02 |
| 연산자 활용 ( 평균 체중 구하기) (0) | 2024.09.02 |
| Java Script 변수 (0) | 2024.08.30 |
| JavaScript 기초 (1) | 2024.07.24 |
