• Q&A
  • 회원가입
  • 로그인

[Basic] JS - Operator - JS연산자 ★★★★★

2,392  
목차
  1. 산수연산자 (= 산술연산자)
  2. 할당연산자
  3. 문자열 연산자 (= 연관연산자)
  4. 문자열 연산자 예제1 - 문자열끼리
  5. 문자열 연산자 예제2 - 문자열과 숫자
  6. 비교연산자
  7. 논리연산자
  8. 연산자 우선 순위

 

산수연산자 (= 산술연산자) 

기호  의미
+
 더하기
-
 빼기
* 
 곱하기
/
 나누기
% 
 나머지  (즉, % 기준으로 앞숫자를 뒤숫자로 나눈 나머지값)  예: 5 % 2 경우, 5를 2로 나눈 나머지 1
++
  1 증가
--
  1 감소

 

(예졔)

더하기 (+)

 

<p id="homzzang"></p>

<script>
var x = 3;
var y = 4;
var z = x + y;
document.getElementById("homzzang").innerHTML = z; // 7
</script>

 


빼기 (-)
 
<p id="homzzang"></p>

<script>
var x = 3;
var y = 4;
var z = x - y;
document.getElementById("homzzang").innerHTML = z; // -1
</script>

 


곱하기 (*)

 

<p id="homzzang"></p>

<script>
var x = 3;
var y = 4;
var z = x * y; 
document.getElementById("homzzang").innerHTML = z; // 12
</script>

 


나누기 (/)

 

<p id="homzzang"></p>

<script>
var x = 3;
var y = 4;
var z = x / y; 

document.getElementById("homzzang").innerHTML = z; // 0.75

</script>

 


나머지 (%)

 

<p id="homzzang"></p>

<script>
var x = 3;
var y = 4;
var z = x % y;
document.getElementById("homzzang").innerHTML = z; // 3
</script>

 


1증가 (++)

 

<p id="homzzang"></p>

<script>
var x = 3;
x++
var z = x; 
document.getElementById("homzzang").innerHTML = z; // 4
</script>

 


1 감소 (--)


<p id="homzzang"></p>

<script>
var x = 3;
x--
var z = x; 
document.getElementById("homzzang").innerHTML = z; // 2
</script>

 

 

할당연산자

 
 연산자

 사용 예  의미
=
 x = y  x = y (변수 y를 변수 x에 할당)
+=
 x += y  x = x + y (변수 x와 변수 y 더한 값을 변수 x에 할당)
-=
 x -= y  x = x - y (변수 x에서 변수 y 뺀 값을 변수 x에 할당)
*=
 x *= y  x = x * y (변수 x와 변수 y 곱한 결과를 변수 x에 할당)
/=
 x /= y  x = x / y (변수 x를 변수 y로 나눈 값을 변수 x에 할당)
%=
 x %= y  x = x % y (변수 x를 변수 y로 나눈 나머지 값을 변수 x에 할당)

= (할당 or 지정)

 

<p id="homzzang"></p>
<script>
var x = 3;
document.getElementById("homzzang").innerHTML = x; // 3
</script>

 


+=  (앞에 선언한 변수에 할당된 값을 더해서 할당)

 

<p id="homzzang"></p>
 
<script>
var x = 3;
x += 4
document.getElementById("homzzang").innerHTML = x; // 7
</script>

 


-= (앞에 선언한 변수에 할당된 값에서 뺀 값을 할당)

 

<p id="homzzang"></p>
 
<script>
var x = 3;
x -= 4
document.getElementById("homzzang").innerHTML = x; // -1
</script>

 


*= (앞서 선언한 변수의 값에 곱한 값을 할당)

 

<p id="homzzang"></p>
 
<script>
var x = 3;
x *= 4; .
document.getElementById("homzzang").innerHTML = x; // 12
</script>

 


/= (앞서 선언한 변수값을 나눈 값을 할당)

 

<p id="homzzang"></p>

<script>
var x = 3;
x /= 4
document.getElementById("homzzang").innerHTML = x; // 0.75
</script>

 


%= (앞서 선언한 변수값 나눈 나머지 할당. 나눌 수 없는 경우엔 앞서 선언한 변수값을 할당)

 

<p id="homzzang"></p>

<script>
var x = 3;
x %= 4
document.getElementById("homzzang").innerHTML = x; // 3
</script>

 

 

문자열 연산자 (= 연관연산자)


+

문자열과 문자열을 연결할 때 사용하는 연산자. 

[참고]  +는 문자열에 사용될 경우 연관연산자라 함.


+= 

앞서 선언한 변수에 할당된 문자열에 새 문자열을 더해서 할당


 

문자열 연산자 예제1 - 문자열끼리

1. + 연산자를 이용해 문자열을 연결 시, 두 문자열이 딱 달라붙음. 

※ 공백을 주기 위해선 어느 하나의 문자열에 공백을 주면 됨.

 

<p id="homzzang"></p>

<script>
var site = "홈짱닷컴";
var url = "homzzang.com";
document.getElementById("homzzang").innerHTML = site + url// 홈짱닷컴homzzang.com
</script>



2. 문자열과 문자열 사이에 공백을 주려면, 

첫 번째 문자열의 마지막이나 두 번째 문자열의 처음에 공백을 주면 됨. (노란색)

 

<p id="homzzang"></p>

<script>
var site = "홈짱닷컴 "; 
var url = "homzzang.com";
document.getElementById("homzzang").innerHTML = site + url// 홈짱닷컴 homzzang.com
</script>



3. 두 문자열 사이에 공백을 주는 방법으로 공백을 따옴표로 묶어 추가하는 방법도 있음. 

 

<p id="homzzang"></p>

<script>
var site = "홈짱닷컴"; 
var url = "homzzang.com";
document.getElementById("homzzang").innerHTML = site + " " + url// 홈짱닷컴 homzzang.com
</script>

 


4. +=  (앞서 선언한 변수에 할당된 문자열에 새로 추가한 문자열을 더해서 변수에 다시 할당)

 

<p id="homzzang"></p>

<script>
site = "홈짱닷컴";
site += "homzzang.com"; // 홈짱닷컴 homzang.com
document.getElementById("homzzang").innerHTML = site; // 홈짱닷컴 homzzang.com
</script>

 

 

문자열 연산자 예제2 - 문자열과 숫자

JS 변수에 문자열과 숫자가 함께 할당되면, JS는 숫자 역시 문자열로 인식.


<p id="homzzang"></p>


<script>

var x = 3 + 4 + 5; // 12 :  (number) 모두 숫자로 덧셈 연산 진행.

var y = "3" + 4 + 5; // 345 : (string) 문자열로 시작 시, 각각을 모두 문자로 인식. 

var z = 3 + 4 + "5"; // 75 : (string) 숫자로 시작 시, 숫자와 문자 결합으로 인식.

var res1 = x + " / " + y + " / " + z + "<br>";// 12 / 345 / 75

  

var x_type = typeof(x); // number

var y_type = typeof(y); // 345

var z_type = typeof(z); // 75

var res2 = x_type + " / " + y_type + " / " + z_type;// number / string / string

  

document.getElementById("homzzang").innerHTML = res1 + res2;

</script>

 

결과보기


비교연산자 

https://homzzang.com/b/js-163

 

논리연산자

 

연산자 우선 순위

 

1. 

* (곱셈), / (나눗셈) 연산자가 + (덧셈), - (뺄셈) 연산자보다 우선.

(예) 5 * 4 + 20 / 5 경우, 20 + 4 = 24

 

2.

사칙연산 연산자가 비교연산자보다 우선.

(예) 5 + 4 > 8 경우, 9 > 8

 

3.

= 기호 (대입연산자)가 가장 후순위.

(예) x += 3 경우, x = x + 3

 



찾아주셔서 감사합니다. Since 2012