코린이의 기록

[ES6] 표현식 & 연산자 본문

javascript,HTML,CSS

[ES6] 표현식 & 연산자

코린이예요 2019. 6. 17. 17:20
반응형

단항부정 & 단항 플러스

* javascript에서는 modulo 연산자의 결과가 피제수의 부호를 따른다. 

ex. x % y 에서 x는 피제수, y는 제수이다. 

10 % 3을 예로들면 ,

10 % 3 = 1이다. 

이것을 음수에 적용하면 

-10 % 3 = -1 이다.

let p = -10;
let q = 3;
let r = 10;
let t = -3 

console.log("-10 % 3 = " + p % q);
console.log("10 % 3 = " + r % q);
console.log("10 % -3 = " + r % t);
console.log("-10 % -3 = " + p % t);

Result 

-10 % 3 = -1
10 % 3 = 1
10 % -3 = 1
-10 % -3 = -1

mod의 결과가 피제수의 부호를 따라간다는건 확인할 수 있었다.

참고로 -10 mod 3은 -1가 아니라 2이다. 그이유는 아래 글을 참고한다. 따라서 javascript에서의 % 연산자는 진정한 모듈로 연산자라 할 수는 없다.

모듈로 연산 참고 : https://ko.khanacademy.org/computing/computer-science/cryptography/modarithmetic/a/what-is-modular-arithmetic

 

전위 증가/감소 & 전후 증가/감소

let x = 2
const r1 = x++ + x++; // 2 + 3 = 5
const r2 = ++x + ++x; // 5 + 6 = 11
const r3 = x++ + ++x; // 6 + 8 = 14
const r4 = ++x + x++; // 9 + 9 = 18

let y = 10
const r5 = y-- + y--; // 10 + 9 = 19
const r6 = --y + --y; // 7 + 6 = 13
const r7 = y-- + --y; // 6 + 4 = 10
const r8 = --y + y--; // 3 + 3 = 6

console.log("r1 : " + r1);
console.log("r2 : " + r2);
console.log("r3 : " + r3);
console.log("r4 : " + r4);
console.log("r5 : " + r5);
console.log("r6 : " + r6);
console.log("r7 : " + r7);
console.log("r8 : " + r8);

 

비교 연산자 ("---" 와 "--")

--- : 일치

-- : 동등 

의 개념 으로 이해하면 된다. 

ex1. "33" 과 33은 동등하지만 일치하지 않음.

ex2. 33과 Number("33")은 동일함. 

즉 "==="은 type과 값이 모두 일치해야함. 

 

Q. const a = {name : "an object"}와 

    const b = {name : "an object"} 는 일치(===)할까요?

...더보기

A. false!

why ? 객체는 항상 다르다. 

 

숫자 비교

javascript에서 숫자의 타입은 모두 더블 형식이다.

아래 예제와 같이 더블 형식의 숫자를 비교할때에는 "관계연산자"라는것을 써서 "충분히 가까운지"를 확인하는 것이 좋다. 

let n = 0;
while(true) {
    n += 0.1;
    if(n === 0.3) break;
}
console.log(`Stopped at ${n}`)

n이 딱 정확하게 0.1 씩증가하여 n=3일때 break 할거라고 예상되지만, javascript에서 0.1이진 표현으로 나타낼 수 있는 숫자들 사이에 걸쳐있다. 따라서 n=3th일때 n의 값을 0.30000000000000004이므로 테스트는 무한 루프에 빠지게 되는것이다 .

 

그래서 "충분히 가까운지"를 확인하는 방법은 ?

Number.EPSLION 이라는 "관계연산자"를 사용하여야 한다.

 Number.EPSILON 속성(property)은 Number 형으로 표현될 수 있는 1과 1보다 큰 값 중에서 가장 작은 값의, 차입니다.
let n = 0;
while(true) {
    n += 0.1;
    if(Math.abs(n-0.3) < Number.EPSILON) break;
}
console.log(`Stopped at ${n}`)

Math.abs는 인자의 절대값을 반환하는 함수이다. 

n과 0.3이 거의 같다고 할 정도로 가까운 수인지를 판단 하는 방법이다. 

 

 

논리 연산자

참같은 값과 거짓 같은 값

거짓 같은 값 

  • undefiend
  • null
  • false
  • 0
  • NaN (Not a Number)
  • '' (빈 문자열)

참 같은 값

위 를 제외한 모든 값 이지만 헷갈리는 것들이 있어 나열해본다

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

뭔 Dog소리인지 모르겠다.

 

 

해체 할당

ES6에서 새로 도입한 기능

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)'

객체 해체 

let blog = {
   name : "lemonandy",
   content : "it"
};

let { name, content} = blog;
console.log(name); // lemoncandy
console.log(content); // it

객체 할당

const obj = {b:2, c:3, d:4};
let a, b, c;
//{a,b,c} = obj;   // error

({a, b, c} = obj);
console.log(a); // undefined
console.log(b); // 2
console.log(c); // 4

선언과 할당을 같이 해주면 상관이 없는데, 할당만으로 객체를 해체하려면 반드시 () 괄호를 써주어야 한다. 

 

var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
 
[a, b, ...rest] = [1, 2, 3, 4, 5]; 
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
 
({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); //

 

 

if문 단축하기

할당이 주 목적인 if문은 or 표현식을 써서 간단하게 줄일 수 있다.

from

if(!options) optsions = {};

to

options = options || {};

 

 

Reference : Learning JavaScript 이선 브라운 지음

반응형

'javascript,HTML,CSS' 카테고리의 다른 글

[ES6] 객체와 객체지향 프로그래밍  (0) 2019.06.30
[ES6] 스코프  (0) 2019.06.20
[HTML] 한자 넣기  (0) 2019.06.14
[ES6] 객체  (0) 2019.06.14
[ES6] 심볼  (0) 2019.06.13
Comments