Javascript 연산자
연산자
연산자란?
피연산자에게 연산 명령을 내리기 위해 사용하는 기호
1. 문자열 연산자(연결 연산자)
-
+ 기호를 사용하여 문자열을 연결하는 기능을 함
var str = "Hello "+"Javascript"; //연산 결과 "Hello Javascript" 출력 -
산술 연산자의 + 기호와 똑같기 때문의 주의해야 한다.
var a = "100" + "10"; //문자열 연산 결과 "10010" 출력 var b = 100 + 10; //산술 연산 결과 110 출력 var c = 100 + "10"; //숫자+문자열 = 문자 10010 출력 -
문자열 길이 확인 length 속성
- 공백 문자까지 포함하여 문자열의 길이를 수치 데이터로 반환
var str = "Hello "+"Javascript"; console.log(st.length); //결과 16출력
2. 산술 연산자
-
사칙 연산을 기본적으로 수행하는 연산자
const a=33, b=44, c=55; //선언과 동시에 대입 /* 왼쪽에서 오른쪽으로 순차적 연산 */ console.log(a-b+c); //결과 33-44+55 -> 44 console.log(a*b/c); //결과 33*44/55 -> 26.4 /* 곱하기, 나누기 연산자 먼저 연산되고 더하기,빼기 연산자는 나중에 연산 */ console.log(a-b*c); //결과 (44*55)-33 -> 2387 /* 괄호 안을 먼저 연산 후 나머지 연산 */ console.log((a-b)*c)); //결과 (33-44)*55 -> -605 - 기호
- =(대입)
- +(덧셈)
- -(뺄셈)
- *(곱셈)
- /(나눗셈)
- %(나머지 값)
- ++(증가 연산)
- –(감소 연산)
- 더하기 연산자를 제외한 다른 연산자는 문자열 데이터를 연산할 수 없음
- 더하기 연산자를 제외한 다른 연산자는 숫자형 문자열의 경우 숫자로 자동 변환하여 연산
-
복합 연산의 경우, 더하기가 우선되면 문자열 데이터로 연산
/****** 문자와 연산자 ******/ let num; //더하기 연산자 num = 11+22; //숫자+숫자 = 숫자(33) num = "11"+22; //문자열+숫자 = 문자(1122) num = "오늘은 "+"즐거운 "+"일요일입니다."; //문자열+문자열+문자열 = 문자(오늘은 즐거운 일요일입니다.) num = 11+"22"; //숫자+문자열 = 문자(1122) //더하기 연산자 제외 다른 연산자들은 문자열데이터 인식X //숫자형 문자열은 숫자로 자동 변환 //빼기 연산자 num = 11-22; //숫자-숫자 = 숫자(-11) num = "11"-22; //문자열*숫자 = 숫자(-11) num = "11"-"22"; //문자열*문자열 = 숫자(-11) num = "오늘은 "-"즐거운 "-"일요일입니다"; //NaN(Not a Number) //곱하기 연산자 num = 11*22; //숫자*숫자=숫자(242) num = "11"*22; //문자열*숫자=숫자(242) num = "11"*"22"; //문자열*문자열=숫자(242) num = "오늘은 "*"즐거운 "*"일요일입니다."; //NaN(Not a Number) //나누기 연산자 num = 11/22; //숫자/숫자=숫자(0.5) num = "11"/22; //문자열/숫자=숫자(0.5) num = "11"/"22"; //문자열/문자열 =숫자(0.5) //숫자 + 문자열 const a = 11 + 22 + '의 합은?'; console.log(a); //숫자+숫자+문자열 -> 33의 합은? const b = "다음 수의 합은?"+11+22; console.log(b); //문자열+숫자+숫자 = 문자열 다음 수의 합은? 1122 -
산술 연산 특이
console.log(0/0); //NaN console.log(true+true-false); //true(1)+true(1)-false(0) -> 2 console.log(1+null); //1+null(0) -> 1, null은 연산에서 0 console.log(1+""); //빈 문자열의 경우에도 0으로 자동 변환-> 1 console.log(1+undefined); //NaN (undefined는 변환되지 않음) - 증감 연산자는 변수의 앞 혹은 뒤에 붙어서 전위 증가/감수 또는 후위 증가/감소로 사용, 결과값은 같음
- 증감 연산자 : 변수 값 1씩 증가 시키거나 감소 시킴.
- 기호
- ++ (증가 연산자)
- – (감소 연산자)
-
증감 연산자에서 ‘전위’는 연산 과정에서 변수를 먼저 사용한 후 연산하는 것을 말하고, ‘후위’는 연산 먼저 하고 변수를 사용하는 것
ex ) ++aa : 전위 증가 연산자(변수를 불러오기 전에 1 증가 후 출력)
aa++ : 후위 증가 연산자(변수를 먼저 출력 후 1 증가)
let a = 10, b = 20; console.log(a); //10 console.log(a++); //10(11) 변수 a를 출력 후 증가. 출력값은 10이지만 실제 값은 11 console.log(a); //11 console.log(b); //20 console.log(++b); //21, 변수 b를 불러오기 전에 1 증가 시킨 후 출력 console.log(b); //21
3. (산술)대입 연산자
-
=를 기준으로 우변의 숫자만큼 연산하여 좌변의 변수에 ‘새로운 값으로 갱신’
ex ) a += b; // == a = a + b; a와 b를 더한 후 a에 새로운 값으로 갱신 - 기호
- +=(더하기 대입)
- -=(빼기 대입)
- *=(곱하기 대입)
- /=(나누기 대입)
- %=(나머지값 대입)
-
예시
let a = 4; a += 3; //기존 선언된 변수 a값(4)에 더하기 3을 한 후 좌변의 변수 a에 갱신. a(4)+3 = a(7) a += 3; //a(7)+3 = a(10) a += 10; //a(10)+10 = a(20) a += 5; //a(20)+5 = a(25) a-=3; //a(25)-3 = a(22) a*=2; //a(22)*2 = a(44) a/=4; //a(44)/4 = a(11) a%=3; //a(11)%3 = a(2) let b = 10 b+=5; //10+5=15 b+=4; //15+4=19 b*=5; //19*5=95 b%=5; //95%5=0 -
대입 연산자 연습
window.onload = function(){//문서 준비 이벤트 let list = "";//변수를 빈 문자열로 초기화 list += "<ul>";//"" + <ul> -> <ul> list += " <li>html5</li>";//<ul> + <li>html5</li> -> <ul><li>html5</li></ul> list += " <li>css3</li>";//<ul><li>html5</li></ul> + <li>css3</li> -> <ul><li>html5</li><li>css3</li></ul> list += " <li>js</li>";//<ul><li>html5</li><li>css3</li></ul> + <li>js</li> -> <ul><li>html5</li><li>css3</li><li>js</li></ul> list += "</ul>" //문서노드 안의 바디 노드 안에 html 구조를 작성. document.body.innerHTML = list; }-
결과값
html 요소 안에
<ul><li>html5</li><li>css3</li><li>js</li></ul>가 생기며,화면에는 아래와 같이 보인다.
- html5
- css3
- js
-
4. 비교 연산자
- 두 피 연산자의 값을 비교하여 참(true==1) 또는 거짓(false==0) 값을 반환
- 기호
- < : 좌항이 우항보다 작다.
- <= : 좌항이 우항보다 작거나 같다.
>: 좌항이 우항보다 크다.- ≥ : 좌항이 우항보다 크거나 같다.
- == : 값이 같다.
- != : 값이 다르다
- === : 값과 타입 모두 같다.
- !== : 값 또는 타입이 다르다.
-
예시
let i; //좌변 = 우변(좌항<우항) i = 5<4; //거짓 == false == 0 i = 5>4; //참 == true == 1 i = 5==4; //거짓 == flase == 0 i = 5!=4; //참 == true == 1 i = 5<=4; //false == 0 i = 5>=4; //true == 1 console.log(i); //여러 개의 경우 좌항 기준 차례대로 비교 console.log(40>25>10); //false, (40>25) 먼저 비교한 값 -> true //true(1)>10 -> false console.log(1==true); //true console.log('345' == 345); //true, 숫자형 문자열을 숫자로 자동 변환해서 비교 -
비교 연산 특이
console.log(0 == false); //true console.log("" == false); //true, 빈문자열의 경우 "" = 0으로 자동 변환 console.log("" == 0); //true console.log("" == null); //false //null은 변수에 데이터로 null이 저장되어 있는 경우나, 변수에 저장된 데이터를 비우고자 할 때 사용. console.log("" == undefined); //false //undefined는 변수에 아무 값도 등록되어 있지 않은 경우로, 변수 초기값. console.log(null == undefined); //trueconsole.log('15'>'12');//숫자형 문자열은 자동 변환되어 비교 true console.log(15>'12');//숫자형 문자열은 자동 변환되어 비교 true console.log('015'>'10');//false console.log('korea' > 'america');//true 11(k) > 1(a) console.log('한글'>'영어');//true 14 > 8 console.log('한글' > 'zoo');//true console.log('1234' == 1234);//true '문자열' == 숫자 데이터 // === 데이터형태까지 완전히 같다(엄격한 비교) console.log('1234' === 1234);//false console.log('' === 0);//false console.log('' !== 0);//true // !== 데이터형태까지 완전히 같지 않다.
5. 논리 연산자(中 일반 논리 연산자)
- 두 개 이상의 변수 값을 비교하여 참(true) 또는 거짓(false) 반환, 주로 조건문에서 사용
- 기호
-
&&(논리곱 연산자) : 모든 조건 다 만족 true
const a = 10, b = 20; console.log(a>=10 && b==20); //true console.log(a>10 && b==20); //false -
** (논리합 연산자) : 모든 조건 중 **하나만 만족 true const a = 10, b = 20; console.log(a > 10 || b == 20); //true -
!A(논리 부정 연산자) : A가 아닐 때 true
const a = 10, b = 20; console.log(b==10); //false console.log(!(b==10));//true. 상수b는 10과 같지 않다 -> 참 console.log(!(a==10));//false. 상수a는 10과 같지 않다 -> 거짓
-
- 일반 논리 연산자와 비트 논리 연산자 2가지가 있다.
6. 조건 연산자
- 조건식을 판별하여 참이냐 거짓이냐에 따라 다음 문장을 선택적으로 실행하는 연산자
- 예시
- 변수 a와 b의 값을 비교하여 a>b가 참이면 a를, 거짓이면 b를 변수 c에 대입하는 수식
c = (a>b) ? a:b; //a(참) : b(거짓) //조건 연산자 활용 var x = 5; var y = 7; var result; result = (x>y) ? x:y; //(5>7)? -> false -> y값을 result에 대입 document.write("큰 값 : "+result+"<br"); //"큰 값 : 7" result = (x>y) ? x-y : y-x; //(5>7)? -> false -> y-x값을 result 대입 document.write("큰 값 - 작은 값 : "+ result); //"큰 값 - 작은 값 : 2"