러닝자바스크립트
12 minutes read (About 1726 words)

chapter5. 표현식과 연산자

5.1 연산자

값을 만드는 행동 반드시 피연산자가 있어야 한다.

5.2 산술 연산자

표 5-1 산술 연산자

전위 연산자(–i , ++i) : 먼저 변수의 값을 바꾼 다음 평가
후위 연산자(i– , i++) : 값을 바꾸기 전에 평가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//전위 연산자 후의 연산자
let x = 2;
const r1 = x++ + x++;
console.log(r1); //5
const r2 = ++x + ++x;
console.log(r2); //11
const r3 = x++ + ++x;
console.log(r3); //14
const r4 = ++x + x++;
console.log(r4); //18
let y = 10;
const r5 = y-- + y--;
console.log(r5); //19
const r6 = --y + --y;
console.log(r6); //13
const r7 = y-- + --y;
console.log(r7); //10
const r8 = --y + y--;
console.log(r8); //6

5.3 연산자 우선순위

그림 5-2 연산자 우선순위

5.4 비교 연산자

두 개의 값을 비교
일치연산자 (===) : 같은 객체를 가리키거나 , 같은 타입이면서 값도 같음 / !== : 일치하지 않음
동등연산자 (==) : 같은 객체를 가리키거나, 값이 같음 ex) “33” == 33
대소관계

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//일치연산자와 동등연산차 차이
//비교 연산자
const n = 5;
const s = "5";
n === s; //false
n !== s; //true
n === Number(s); //true
n == s; //true 권장 x

const a = { name: "an" };
const b = { name: "an" };

a === b; //false 객체는 항상 다름
a == b; //false 객체는 항상 다름

관계연산자 : 관계가 있는 값을 비교 작다(<),작거나 같다(<=),크다(>),크거나 같다(>=)

5.5 숫자비교

NaN : 그 자신을 포함하여 무엇과되 같지 않음 NaN === NaN / NaN ==NaN 모두 false
isNaN을 사용하여 NaN 값을 알아낼수 있다.

정수비교
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//정수비교
let n = 0;
while (true) {
  n += 0.1;
  if (n === 0.3) break;
}
console.log(`stop at${n}`); //실행 안됌

/* EPSILON */
let n = 0;
while (true) {
  n += 0.1;
  if (Math.abs(n - 0.3) < Number.EPSILON) break;
}
console.log(`stop at${n}`); //결과 stop at0.30000000000000004

5.6 문자열 병합

문자열 병합은 피연산자중 하나라도 문자열이면 문자열 병합을 수행

1
2
3 + 5 + "8"; // "88"
"3" + 5 + 8; //"358"

5.7 논리 연산자

오직 불리언 값만 다룰수 있다. true or false
boolean이 아닌 값도 다룰 수 있고, boolean이 아닌 값을 반환하기도 한다.

5.7.1 참 같은 값과 거짓 같은 값

자바스크립트에서는 모든 데이터를 참 같은 값과 거짓 같은 값으로 나눌 수 있다.

거짓 같은 값

  • undefined
  • null
  • false
  • 0
  • NaN
  • ‘’ (빈 문자열)

이들 외에는 모드 참 같은 값

참 같은 값

  • 모든 객체 valueOf() 메서드를 호출 했을때 false를 반환하는 객체도 참 같은 값
  • 배열, 빈 배열도 참 같은 값
  • 공백만 있는 문자열 “ “
  • 문자열 “false”

5.8 AND, OR, NOT

자바스크립트가 지원하는 논리연산자는 AND(&&) OR(||) NOT(!)
&& : 교집합,
|| : 합집합
! : 부정

표 5-2 연산의 진위표

5.8.1 단축평가

x = true, y = false
x&&y =false //x의 값만 알면 y의 값을 평가할 필요도 없이 false
x||y =true //x의 값만 알면 y의 값을 평가할 필요도 없이 true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//단축평가
const skipIt = true;
let x = 0; //false
const result = skipIt || x++; //1==true || 0 false 의 합집합 ==true 1
console.log(result); //true
//skipIt 가 true이고 true 값의 합집합은 true 이므로 뒤 표현식 실행 안됌 x = 0

//부수효과
const skipIt = false;
let x = 0; //false
const result = skipIt || x++; //0과 1의 합집합
console.log(result); //0
// skipIt가 false라고 해서 합집합이 항상 false가 아니므로 x++ 실행 x = 1 부수효과 실행

const doIt = false;
let x = 0; //false
const result = doIt && x++; //0과 0의 교집합
console.log(result); //false
// skipIt 가 false이고 false의 교집합은 false이므로  두 번째 피연산자를 실행하지 않는다. x = 0

const doIt = true;
let x = 0; //false
const result = doIt && x++; //0과 0의 교집합
console.log(result); //0
// skipIt 가 true라고 해서 교집합이항상 true를 반환하는 것이 아니므로  x++ 실행 x = 1 부수효과 실행

5.8.2 피연산자가 불리언이 아닐때 논리 연산자가 동작하는 방법

1
const options = suppliedOptions || { name: "Default" };

5.8.3 조건 연산자

유일한 3항 연산자

조건 연산자
1
2
3
const doIt = false;
const result = doIt ? "Did it" : "Didn't do it";
console.log(result);

5.8.4 쉼표 연산자

표현식을 결합하여 두 표현식을 평가한 후, 두번째 표현식의 결과를 반환=> 마지막 표현식의 결과를 반환
for 문에서 표현식을 결합할 때 사용하거나, 함수에서 빠져나오기 전 여러 작업을 한데 묶을 때 사용합니다

1
2
3
4
5
let x = 0,
  y = 10,
  z;
z = (x++, y++);
console.log(z); //10

5.9 연산자 그룹

(괄호)에는 아무 효과도 없지만, 연산자 우선순위를 높이거나 명확히 표현하는데 사용

5.9.1 비트 연산자

별로 사용안함

5.9.2 typeOf 연산자

피연산자의 타입을 나타내는 문자열을 반환, 자바스크립트의 7가지 데이터타입(undefined, null, boolean, 숫자, 문자, 심볼, 객체)를 정확히 나타내지 못함 .
typeOf x : 권장
typeOf(x): 유효하긴 하지만 권장하진 않음

표 5-3 연산의 진위표

5.9.3 void 연산자

피연산자를 평가한후 undefined를 반환
링크 이동을 막아줍니다.

5.9.4 할당 연산자

변수에 값을 할당

표 5-4 할당 연산자

5.10 헤체할당

객체나 배열을 변수로 해체할 수 있다. es6에서 새로 도입됨

1
2
3
4
5
6
7
8
9
//객체 선언
const obj = { b: 2, c: 3, d: 4 };

//객체할당
const { a, b, c } = obj;
a; //undefined "a"가 없습니다.
b; //2
c; //3
d; //ReferenceError "d"는 정의되지 않았습니다.
 객체를 해체할 때는 반드시 변수명과 프로퍼티 이름이 일치해야 합니다.
obj에 a 프로퍼티가 없으므로 a는 undefined
해체 할당에 d라는 프로퍼티가 없으므로 d는 선언조차 되지 않음
  • 배열 해체
1
2
3
4
5
6
7
8
9
10
11
12
13
//배열 선언
const arr = [1, 2, 3];
let [x, y] = arr;
x;
y;
z; //ReferenceError "z"는  정의되지 않았습니다.

//확산 연산자를 사용하면 남은 요소를 새 배열에 할당할수 있다.
const arr = [1, 2, 3, 4, 5];
let [x, y, ...rest] = arr;
x; // 1
y; //2
rest; //[3,4,5]
배열을 해체할 때는 변수 이름을 마음대로 써도 됨 , 배열 순서에 대응한다.

5.11 객체와 배열 연산자

표 5-5 객체와 배열 연산자

5.12 탬플릿 문자열과 표현식

어떤 표현식이든 그 값을 문자열에 넣을 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
const roomTempC = 21.5;
const currentTempC = 19.5;
const message =
  `The current temperature is` +
  `${currentTempC - roomTempC}\u00b0C dirrenet than room temperature`;
const fahrenheit = `the current temperature is ${(currentTempC * 9) / 5 +
  32}\u00b0F`;
console.log(message);
console.log(fahrenheit);

//The current temperature is-2°C dirrenet than room temperature
//the current temperature is 67.1°F

5.13.1 if…else 문을 3항 연산자로 바꾸기

1
2
3
4
5
6
7
8
//if else문을 3항 연산자로 변경
if (isPrime(n)) {
  label = "prime";
} else {
  label = "non-prime";
}

label = isPrime(n) ? "prime" : "non-prime";

5.13.2 if문을 단축 평가하는 OR 표현식으로 바꾸기

1
2
3
if (!options) options = {};

options = options || {};
chapter6. 함수
chapter4. 제어문

Comentarios

Categorias

Nube de etiquetas

const for git세팅 if let map set var 배열 스코프 이터레이터 인스턴스 제너레이터 제어문 클래스 클로저 프로퍼티
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×