[자바스크립트 비기너] 2. 연산자(Operator)

Speedwell🍀·2021년 12월 17일
0

할당 연산자

1. 단일 할당 연산자

  • = 하나만 사용

  • var result = 1 + 2;


2. 복합 할당 연산자

  • = 앞에 연산자 작성
+=, -=, *=, /=, %=

<<=, >>=

>>>=, &=, ^=, |=

3. 먼저 = 앞을 연산한 후 할당

var point = 7;

point += 3;


해석, 실행 순서

해석이란?

  • JS 코드를 기계어로 바꾸는 것. Compile

  • 엔진이 해석하고 실행

실행 순서

  • = 왼쪽의 표현식 평가

  • = 오른쪽의 표현식 평가, 왼쪽에서 오른쪽으로 평가

  • = 오른쪽 표현식의 평가 결과를 왼쪽 표현식 평가 결과에 할당



산술 연산자

+ 연산자

  1. "+" 양쪽의 표현식을 평가
  • 평가 결과를 더함
  1. 평가 결과 연결
  • 한 쪽이라도 숫자가 아니면 연결

- 연산자

String 타입이지만, 값이 숫자이면 Number 타입으로 변환하여 계산

log("135" - 2); // 133

* 연산자

숫자 값으로 변환할 수 있으면 변환하여 곱함

NaN 반환

  • 양쪽의 평과 결과가 하나라도 숫자가 아닐 때


소수 값이 생기는 경우 처리

log(2.3 * 3); // 6.8999999999999995  IEEE 754 유동 소수점 처리

log(2.3 * 10 * 3 / 10); // 6.9

 

log(10 * "20"); // 200

log(10 * true); // 10

log(10 * false); // 0

log(10 * null); // 0

log(10 * "A"); // NaN

/ 연산자

NaN 반환

  • 양쪽의 평가 결과가 하나라도 숫자가 아닐 때

  • 분모, 분자 모두 0일 때

분모, 분자가 0일 때

  • 분모가 0이면 Infinity 반환

  • 분자가 0이면 0 반환


% 연산자

log(5 % 2.5); // 0

log(5 % 2.3); // 0.40000000000000036

log(5 * 10 - (2 * 2.3 * 10)) / 10); // 0.4

숫자로 변환

  1. 연산하기 전에 우선 숫자로 변환

  2. 변환된 값으로 연산

Undefined => NaN

Null => +0

Boolean => true : 1, false : 0

Number => 변환 전/후 같음

String => 값이 숫자이면 숫자로 연산 단, 더하기는 연결
var value;

log(10 + value);

// NaN

 

log(10 + null); // 10

log(10 + true); // 11

log(10 + false); // 10


log(10 + "123"); // 10123

log(123 - "23"); // 100


단항 연산자

단항 +연산자

형태 : + value

값을 Number 타입으로 변환

  • +를 더하기로 착각 가능

  • Number()와 기능 같음


단항 -연산자

형태 : -value

값의 부호를 바꿈

연산할 때만 바꿈

  • 원래 값은 바뀌지 않음



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

후치 ++연산자

형태 : value++

값을 자동으로 1 증가시킴

  • 문장을 수행한 후 1 증가

  • 즉, 세미콜론 다음에서 증가


전치 ++연산자

형태 : ++value

값을 자동으로 1 증가시킴

  • 문장 안에서 1 증가

  • 표현식을 평가하기 전에 1 증가, 표현식에서 증가된 값을 사용


후치 --연산자

위에 후치 ++연산자 증가를 감소로 바꾸기

전치 --연산자

마찬가지


!연산자

  • 논리 NOT 연산자

  • 형태 : !value

  • 표현식 평가 결과가 true이면 false, fale이면 true를 반환

  • 원래 값은 바뀌지 않으며 사용할 때만 반환



유니코드, UTF

Unicode

  • 세계의 모든 문자를 통합하여 코드화

  • 언어, 이모지 등

  • 코드 값을 코드 포인트(code point)라고 부름

  • 0000~FFFF, 10000~1FFFF 값에 문자 매핑

  • 유니코드 컨소시엄 http://www.unicode.org/


표기방법

  • u와 숫자 형태 : u0031은 숫자 1

  • JS는 u 앞에 역슬래시() 작성

  • 역슬래시를 문자로 표시하려면 역슬래시 2개(\) 작성

  • ES6에서 표기 방법 추가됨


UTF(Unicode Transformation Format)

  • 유니코드의 코드 포인트를 매핑하는 방법

  • UTF-8, UTF-16, UTF-32로 표기

  • <meta charset="utf-8">

  • UTF-8은 8비트로 코드 포인트 매핑

  • 8비트 인코딩이라고 부름



관계 연산자

1) <, >, <=, >= 연산자

2) instanceof 연산자

3) in 연산자

instanceof와 in 연산자는 후에 다룸

>연산자

  • 부등호 : Greater-than

  • 양쪽이 Number 타입일 때, 왼쪽이 오른쪽보다 크면 true 반환 아니면 false 반환

  • String 타입 비교

    한 쪽이 String 타입이면 false(숫자와 문자 비교)

    양쪽이 모두 String 타입이면 유니코드 사전 순서로 비교

    문자 하나씩 비교

  • <, <=, >=는 비교 기준만 다름



동등, 부등, 일치, 불일치 연산자

== 연산자

  • 동등 연산자

  • 왼쪽과 오른쪽 값이 같으면 true 다르면 false

  • 값 타입은 비교하지 않음(1과 "1"이 같음) - 값 타입이 다르면(문자, 숫자) 문자 타입을 숫자 타입으로 변환하여 비교

(undefined == null은 true)


!= 연산자

  • 부등 연산자

  • 왼쪽과 오른쪽 값이 다르면 true 같으면 false

  • a != b와 !(a==b)가 같음


===연산자

  • 일치 연산자

  • 왼쪽과 오른쪽의 값과 타입이 모두 같으면 true, 값 또는 타입이 다르면 false

  • 1 === 1 true, 1 === "1" false, undefined === null false


!==연산자

  • 불일치 연산자

  • 값 또는 타입이 다르면 true, true가 아니면 false



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

콤마 연산자

  • 기호: ,(Comma)

  • 콤마로 표현식을 분리 (var a = 1, b = 2;)


( )연산자

  • 그룹핑 연산자

  • 소괄호 안의 표현식을 먼저 평가, 평가한 값을 반환


|| 연산자

  • 논리 OR 연산자

  • 표현식의 평가 결과가 하나라도 true이면 true, 아니면 false

  • 왼쪽 결과가 true이면 오른쪽은 비교하지 않음

var value, zero = 0, two = 2;

log(value || zero || two);

 
/*
1. value 변수값이 undefined이므로 false

2. zero 변수값이 0이므로 false

3. two 변수값이 2이므로 true가 되며 two 변수값을 반환

4. true가 아니라 true가 되는 변수값을 반환. 2가 true이므로 전체 비교는 true

==> 실행 결과 : 2
*/

var value, zero = 0;

log(zero || value);

 
/*
1. 마지막까지 비교하였는데 모두가 false이면 false가 아니라 마지막 변수값 반환
==> 실행 결과 : undefined
*/

var one = 1;

log(one === 1 || two === 2);

 
/*
1. 왼쪽의 (one === 1) 결과가 true이므로 true 반환
2. 왼쪽 비교 결과가 true이면 오른쪽은 비교하지 않음
3. 오른쪽을 비교하면 two 변수가 없으므로 에러 발생
===> 실행 결과 : true
*/


&& 연산자

  • 논리 AND 연산자

  • 표현식의 평가 결과가 모두 true이면 true, 아니면 false

  • 왼쪽 결과가 false이면 오른쪽은 비교하지 않음

var one = 1, two = 2;

log(one && two);

 
/*
1. one 변수값이 1이므로 true, true이므로 오른쪽을 비교
2. two 변수값이 2이므로 true, 모두가 true이므로 마지막의 2를 반환
==> 실행 결과 : 2
*/

var one = 1, zero = 0;

log(one && zero && nine);

 
/*
1. one 변수값이 1이므로 true, true이므로 오른쪽 비교
2. zero 변수값이 0이므로 false, false이므로 오른쪽을 비교하지 않고 zero 변수값인 0 반환
3. nine을 비교하면 nine 변수가 없으므로 에러 발생
==> 실행 결과 : 0
*/


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

조건 연산자(3항 연산자)

  • 기호 : exp ? exp-1 : exp-2

  • exp 위치의 표현식을 먼저 평가

    true이면 exp-1의 결과 반환, false이면 exp-2의 결과 반환

  • if문 써서 하는 것보다 가독성이 좋음


연산자 우선순위

  • 연산자의 실행 우선순위는 ECMA-262 스펙에 없고 MDN에 있음

  • 우선순위가 가장 높은 것은 ( )

0개의 댓글