오늘은 자바스크립트의 연산자(operators)에 관하여 포스팅을 하겠습니다.
연산자란, 흔희 말하는 +,-와 같이 연산을 진행하는 요소를 뜻합니다.
연산자 =는 변수에 값을 할당하는 역할을 합니다. 아래와 같이 a라는 변수에 숫자3을 할당할 수 있습니다.
var a=3;
아래와 같이 +와 *등의 연산자도 사용할 수 있습니다. html파일로 저장하여 확인 해 보실 수 있습니다.
<html>
<body>
<h2>The + Operator</h2>
<p id="demo"></p>
<script>
var a = 3;
var b = 4;
var c = a+b;
var d= a*b;
document.getElementById("demo").innerHTML = 'c='+c+'<br>'+'d='+d;
</script>
</body>
</html>
자주 사용하는 연산자들은 아래와 같습니다.
+ 더하기
- 빼기
* 곱하기
/ 나누기
% 나머지
++ 증가
-- 감소
다음은 자바스크립트에서 지정된 연산자입니다. 간략하게 단축하여 사용할 수 있는 연산자입니다.
x+=y 는 x=x+y 와 같음
x-=y 는 x=x-y 와 같음
x*=y 는 x=x*y 와 같음
x/=y 는 x=x/y 와 같음
x%=y 는 x=x%y 와 같음
아래와 같이 연산 뒤에 x의 값은 무엇일까요?
<html>
<body>
<h2>The += Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
정답은 html파일을 생성한 뒤에 돌려보시면 확인이 가능합니다.
15입니다.
+연산자는 문자들을 합치는 기능도 있습니다.
아래와 같이 작성을 하게 되면 txt3에는 "Hello friends"라는 문자가 입력됩니다.
txt1 = "Hello";
txt2 = "friends";
txt3 = txt1 + " " + txt2;
마찬가지로 +=연산자를 사용하여서 문자를 추가 할 수 도 있습니다.
아래 내용들을 보시고 마지막 txt1에 어떤 값이 들어갈지 html로 확인 해 보시기 바랍니다.
<html>
<body>
<p>The assignment operator += can concatenate strings.</p>
<p id="demo"></p>
<script>
txt1 = "My name is ";
txt1 += "John";
document.getElementById("demo").innerHTML = txt1;
</script>
</body>
</html>
마지막으로 문자와 숫자를 +연산자를 사용하면 어떻게 될까요?
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
위의 결과는 각각 10, 55, Hello5 가 출력되게 됩니다.
숫자간의 연산은 수학적으로 계산이 되지만, 문자와의 연산은 모두 문자로 그냥 붙여 버리게 됩니다.
2017/11/21 - [IT 지식정리/자바스크립트] - 자바스크립트 연산자 우선순위값 목록
'IT 지식정리 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 : 함수(functions) (0) | 2017.11.22 |
|---|---|
| 자바스크립트 : 데이타 타입 (0) | 2017.11.22 |
| 자바스크립트 연산자 우선순위값 목록 (0) | 2017.11.21 |
| 자바스크립트 : 변수(variables) (0) | 2017.11.21 |
| 자바스크립트 퀴즈 - 변수(variables) (0) | 2017.11.20 |