• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

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

 

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

기호  의미
+
 더하기
-
 빼기
* 
 곱하기
/
 나누기
% 
 나머지  (즉, % 기준으로 앞숫자를 뒤숫자로 나눈 나머지값)
++
  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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/3
목록
찾아주셔서 감사합니다. Since 2012