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스펙에 없음
•
우선순위가 가장 높은것은 ()
