Search
Duplicate

연산자(Operator)

1. 연산자, 표현식

연산자

연산의 사전적 의미
규칙에 따라 계산하여 값을 구함.
연산자(Operator)형태
+, -, *, /, %
var a = 1, b = 3 console.log(a + b);// 4 덧셈 console.log(b - a);// 2 뺄셈 console.log(b * 2);// 6 곱셈 console.log(6 / b);// 2 나눗셈 console.log(10 % b);//1 나머지 계산
JavaScript
복사
>, >=, < , <=
console.log(1 > 2);// false console.log(1 >= 1);//true console.log(1 < 2); //true console.log(1 <= 2);//true
JavaScript
복사
==, !=, ===, !==
console.log(1 == "1");//true console.log(1 === "1");//false console.log(1 != "1");// false console.log(1 !== "1");//true
JavaScript
복사
콤마(,), typeof, delete, void
var list = [1,2,3]; console.log( "이", "한솔");//이한솔 console.log(typeof 123);// number console.log(delete list[1]);// true console.log(list);//[1, empty, 3];
JavaScript
복사
instanceof, in, new 등

표현식

표현식(Expression)형태
1 + 2
var total = 1 + 2;
var value = total / (2 +3);
"표현식을 평가" 한다고 합니다.
표현식을 평가하면 결과가 반환되며 이를 평가 결과라고 합니다.
자바스크립트는 표현식의 연결이다.

2. 할당 연산자, 해석/실행 순서

할당 연산자

단일 할당 연산자
= 하나만 사용
var result = 1+2;
var result = 1 + 2; console.log(result);//3
JavaScript
복사
복합 할당 연산자
=앞에 연산자 작성
+=, -=, *=, /=, %=
<<=, >>=
>>>=, &=, ^=, |=
먼저 = 앞을 연산한 후, 할당
var point = 7; point += 3;
JavaScript
복사

해석, 실행 순서

해석이란?
JS 코드를 기계어로 바꾸는 것. Compile
"엔진(Engine)이 해석하고 실행한다" 라고 합니다.
실행 순서
var result = 1 + 2 + 6;
=왼쪽의 표현식 평가
=오른쪽의 표현식 평가 왼쪽에서 오른쪽으로 평가(1 + 2, 3 + 6);

3. 산술 연산자(+ 연산자)

더하기 연산자

+ 양쪽의 표현식을 평가
평과 결과를 더함
var a=1, b=2; var c = a + b; console.log(c);//3
JavaScript
복사
평과 결과 연결
한 쪽이라도 숫자가 아니면 연결 합니다.
var two = "2"; var value = 1 + two; console.log(value);// 12 console.log(typeof value);//string
JavaScript
복사
⇒ 일반적으로는 1 + two부분에서 에러가 나야하지만, 에러가 발생하는것이아닌 연결이 되었습니다.
⇒ JS에서는 특정 부분에서 에러가 발생해서 전체 웹 페이지를 멈춰버리는 현상이 최대한 없도록 하려 합니다.
왼쪽에서 오른쪽으로 연산
1 + 5 + "ABC"
var value = 1 + 5 + "ABC"; console.log(value);//6ABC
JavaScript
복사

4. 숫자로 변환

연산하기 전에 우선 숫자로 변환
변환된 값으로 연산.
Undefined: NaN
Null : +0
Boolean : true: 1, false: 0
Number : 변환 전/후 같음
String: 값이 숫자이면 숫자로 연산 단, 더하기(+)는 연결
var value; console.log(10 + value);// NaN ---(1) console.log(10 + null);//10 console.log(10 + true);//11 console.log(10 + false);//10 console.log(10 + "123");//10123 ---(2) console.log(123 - "23");//100 ---(3)
JavaScript
복사
⇒ (1): value를 우선 숫자로 변환하지만, value는 undefined 이기에 NaN이 되고 10 + NaN은 NaN입니다.
⇒ (2): 산술 더하기 연산자의 경우 값이 숫자라도 타입이 String이면 문자열로 연결합니다.
⇒ (3): 산술더하기를 제외한 나머지 산술연산자는 숫자로 변환하여 연산합니다.

5. 산술 연산자(-, *, /, % 연산자)

1. - 연산자

왼쪽 표현식 평과 결과에서 오른쪽 표현식 평과 결과를 뺍니다.
String 타입이지만, 값이 숫자이면 Number 타입으로 변환하여 계산합니다.
console.log(123 - "23"); // 100 console.log("123" - 100);// 23
JavaScript
복사

2. * 연산자

왼쪽 표현식 평과 결과와 오른쪽 표현식 평가 결과를 곱합니다.
숫자 값으로 변환할 수 있으면 변환하여 곱합니다.
NaN반환
양쪽의 평과 결과가 하나라도 숫자가 아닐 때 NaN을 반환합니다.
console.log(10 * "20");//200 console.log(10 * true);//10 console.log(10 * false);//0 console.log("책" * 3);//NaN
JavaScript
복사
소수 값이 생기는 경우 처리
console.log(2.3 * 3); // 6.899999999995
JavaScript
복사
6.9출력되지 않는 것은 정상이며 IEEE754 유동 소수점 처리 때문입니다.
6.9를 출력하고 싶으면 실수를 정수로 변환하여 계산 후 다시 실수로 변환하면 됩니다.
console.log(2.3 * 10 * 3 /10);/6.9
JavaScript
복사

3. / 연산자

왼쪽 표현식 평과 결과를 오른쪽 표현식 평과 결과로 나눕니다.
NaN반환
양쪽의 평과 결과가 하나라도 숫자가 아닐 때 NaN을 반환합니다.
분모, 분자가 모두 0일 때 NaN을 반환합니다.
분모 혹은 분자가 0일 때
분모가 0 이면 Infinity 반환
분자가 0 이면 0 반환
console.log("A" / 3); //NaN console.log(0/0);//NaN console.log(3/0);//Infinity console.log(0/3);//0
JavaScript
복사

4. % 연산자

왼쪽 표현식 평과 결과를 오른쪽 표현식 평가 결과로 나누어 나머지를 구합니다.
console.log(5 % 2.5);//0 console.log(5 % 2.3);//0.40000000000000036 console.log(((5 *10) - (Math.floor(5/2) * 2.3 * 10))/10); //0.4 실수를 정수로 만들어 계산한다.
JavaScript
복사

6. 단항 연산자

단항 + 연산자

형태 : + value
값을 Number 타입으로 변환
코드 가독성
+ 를 더하기로 착각할 수 있다.
Number()도 기능은 같다.
var value = "7"; console.log(typeof value);//string console.log(typeof +value);//number console.log(typeof Number(value));//number
JavaScript
복사

단항 - 연산자

형태: - value
값의 부호를 바꿈
+ 는 - 로, -는 +로 바꿈
연산할 때만 바꿈
원래 값은 바뀌지 않는다.
var value = 7; console.log(-value); // -7 console.log(8 + -value);// 1 console.log(value);//7
JavaScript
복사

7. 후치, 전치, 논리 NOT연산자

1. 후치 ++ 연산자

형태: value ++
값을 자동으로 1 증가시킨다.
문장을 수행한 후에 1증가
즉, 세미콜론(;) 다음에서 증가
var one = 1; var value = one++ + 3; console.log(value);//4 console.log(one);//2
JavaScript
복사

2. 전치 ++연산자

형태: ++ value
값을 자동으로 1 증가시킨다
문장 안에서 1 증가
표현식을 평가하기 전에 1 증가하여 표현식에서는 증가된 값을 사용한다.
var one = 1; var value = ++one + 3; console.log(value);//5 console.log(one);//2
JavaScript
복사

3.후치 - - 연산자

형태: value - -
값을 자동으로 1 감소시킴
문장을 수행한 후에 1 감소
즉, 세미콜론(;) 다음에 감소
var two = 2; var value = two-- + 1; console.log(value);//1 console.log(two);//1
JavaScript
복사

4. 전치 - - 연산자

형태: - -value
값을 자동으로 1 감소시킴
문장안에서 1 감소
표현식을 평가하기 전에 1감소하여 표현식에서는 감소된 값을 사용한다.
var two = 2; var value = --two + 1; console.log(value);//0 console.log(two);//1
JavaScript
복사

5. ! 연산자

논리(Logical) NOT 연산자
형태: !value
표현식 평가 결과를 true, false로 변환한 후 true면 false를, false이면 true를 반환합니다.
원래 값은 바뀌지 않으며 사용할 때만 변환합니다.
var trust = true; console.log(!trust);// false; console.log(trust);// true console.log(!!trust);//true
JavaScript
복사

8. 유니코드, UTF

1. 유니코드(Unicode)

세계의 모든 문자를 통합하여 코드화 한 것입니다.
언어, 이모지 ,
코드 값을 코드 포인트(code point)라고 부릅니다.
0000 ~ FFFF, 10000 ~ 1FFFF 값에 문자 매핑
유니코드 컨소시엄
표기방법
u와 숫자 형태: u0031은 숫자 1
JS는 u앞에 역슬래시(\) 작성
역슬래시(\)를 문자로 표시하려면 역슬래시(\\)2개 작성
ES6에서 표기방법 추가됌(5자리 unicode도 지원)
console.log("\u0031");//1 console.log("\u0041");//A console.log("\u1100");//ㄱ console.log("\uac01");//각 console.log("\\uac01");//\uac01
JavaScript
복사

2. UTF

Unicode Transformation Format
유니코드의 코드 포인트를 매핑하는 방법
UTF-8, UTF-16, UTF-32 로 표기
<meta charset="utf-8">
UTF-8은 8비트로 코드포인트 매핑
8비트 인코딩(Encoding)이라고 부름

9. 관계 연산자

관계(Relational)연산자
<, > , <=, >= 연산자
양쪽이 Number타입이면 평가를 진행한 뒤 부등호에 맞는 비교를 한 뒤 Boolean데이터 타입의 값 반환(true or false)
console.log(1 < 2); //true console.log(1 > 2); //false console.log(1+3 > 2);//true console.log(3 >= 3);//true
JavaScript
복사
한쪽이 String타입이면 false를 반환합니다.
console.log(1 > "A"); // false
JavaScript
복사
양쪽이 모두 String 타입이면 유니코드 사전 순서로 비교합니다.
console.log("\u0031"> "\u0041");//false console.log("A" > "1");//=> \u0041 > \0031과 동일합니다. 그렇기에 true console.log("A07" > "A21");//false
JavaScript
복사
한글자가 아닌 단어에서는 문자 하나씩 비교를 하는데, 비교값이 결정되는 순간 다음 것은 비교하지 않습니다.
A07과 A21은 문자 하나씩 비교하면 서로 맨 앞자리 A는 동일하기에 넘어가고, 다음 값은 0과 2이기에 0 > 2 는 false이기 때문에 false를 반환합니다.
instanceof 연산자
in 연산자

10. 동등(==), 부등(!=), 일치(===), 불일치(!==) 연산자

1. == 연산자

동등 연산자
왼쪽과 오른쪽 값이 같으면 true 다르면 false
값 타입은 비교하지 않습니다.
console.log( 1 == "1");//true console.log(undefined == null);//true
JavaScript
복사

2. != 연산자

부등 연산자
왼쪽과 오른쪽 값이 다르면 true, 같으면 false를 반환
a != b와 !(a == b)가 동일하다.

3. ===연산자

일치 연산자
양쪽의 값과 타입이 모두 같으면 true, 값 또는 타입이 다르면 false
console.log(1 === 1);//true console.log(1 === "1");//false console.log(undefined === null);//false
JavaScript
복사

4. !== 연산자

불일치 연산자
값 또는 타입이 다르면 true이고 true가 아니라면 false

11. 콤마, 그룹핑, 논리 연산자

1. 콤마 연산자

기호: , (Comma)
콤마로 표현식을 분리할 수 있습니다.
var a = 1, b = 2;
JavaScript
복사

2. 그룹핑

그룹핑 연산자
소괄호 () 안의 표현식을 먼저 평가
console.log(5/2+3); //5.5 console.log(5/(2+3));//1
JavaScript
복사

3. 논리 || 연산자

논리 OR 연산자
표현식의 평과 결과가 하나라도 true이면 true 아니면 false
왼쪽 결과가 true이면 오른쪽과 비교하지 않음.
var value zero = 0, two = 2; console.log(true || false || false);//true console.log(false || false || true);//true console.log(false || false || false);//false console.log(value || zero || two); console.log(value || zero);
JavaScript
복사

4. 논리 && 연산자

논리 AND 연산자
표현식의 평가 결과가 모두 true이면 true 아니면 false
왼쪽 결과가 false이면 오른쪽은 비교하지 않습니다.
모든 평가결과가 true이면 마지막 평가결과를 반환합니다.
var one = 1, two = 2; console.log(one && two);//2 console.log(one && 0);//false
JavaScript
복사

12. 조건 연산자, 연산자 우선순위

1. 조건 연산자

기호: exp ? exp-1: exp-2
3항 연산자 라고도 합니다.
exp위치의 표현식을 평가.
true이면 exp-1의 결과 반환
false이면 exp-2의 결과 반환
log( 1 === 1 ? "같음" : "다름");//같음 log( 1 === "1" ? "같음" : "다름");//다름
JavaScript
복사

2. 연산자 우선순위

연산자의 실행 우선순위
ECMA-262스펙에 없음
우선순위가 가장 높은것은 ()