연산자

연산자

삼항 연산자 (Ternary Operator)

앞의 표현식이 truty 이면 첫번째 조건이, falsy이면 두번재 조건이 반환

console.log(true ? 1 : 2); // 1
console.log(false ? 1 : 2); // 2

증가/감소 연산자 (Increment/Decrement Operator)

1 단위로 정수의 증가/감소 연산을 할 수 있음

 

• ++ 혹은 -- 연산자를 앞에 쓰면, 값을 증가 시키고 뒤의 결과값을 반환
• ++ 혹은 -- 연산자를 뒤에 쓰면, 값을 증가시키기 전의 피연산자를 그대로 반환

 

let num = 10;

num++;
console.log(num)//11

num--;
console.log(num)//9

할당 연산자 (Assignment Operator)

결과값은 왼쪽 피연산자에 실제로 할당된 값이 됨

// = 연산자
let x;
console.log(x=5); // 5

// 할당 연산자 
let x = 5;
console.log(x += 5); // 10

let y = 6;
console.log(x -= 3); // 3

연산자 우선 순위 (Operator Precedence) 

연산자 우선 순위에 따라 어떤 연산자를 먼저 계산할 지 결정
같은 연산자가 아니라면, 괄호를 둘러싸는 것이 좋음 연산자 우선 순위보기.

typeof ('hello' === ('hello'+'world')); // boolean

 

연산자 결합 순서 (Operator Associativity)

듭제곱 연산자, 할당 연산자, 삼항 연산자가 우결합성을 가짐

 

• == , !==
• === , !==
• Object.is

 

추상적 동일성 (Abstract Equality)

== 연산자는 두 피연산자의 타입이 다를 때는 타입을 변환한 후 비교, 주로 null check 할 때 사용

null == undefined; // true

null == 0; // false
null == ''; // false
undefined == false; // false
undefined == NaN; // false

엄격한 동일성 (Strict Equality)

===, !== 연산자는 두 피연산자의 타입이 다른 경우 무조건 false를 반환

'1' === 1; // false
true === 1; // false

Object.is

Object.is 정적 메소드는 두 인수가 정말로 같은 값인지 검사
하단의 예시 제외하고 ===과 동일

Object.is(NaN, NaN); // true
Object.is(0, -0); // false

 

Spread Syntax

배열 혹은 객체를 다른 배열 혹은 객체에 쉽게 삽입

배열

... 을 이용하여 배열과 배열을 합쳐줌 얕은 복사

const arr1 = [3,4];
const arr2 = [1,2,...arr1,5];

[1, 2].concat(arr1).concat([5]) // [1,2,3,4,5]

객체

자기 자신의 열거 가능한 속성만을 복사

const obj1 = {prop:1};
cosnt obj2 = {...obj1};

Object.assign({}, obj1);

 

분해대입 (Destructuring Assignment)

ES2015에서 배열과 객체 안에 들어있는 값을 쉽게 추출할 수 있는 문법 추가

배열의 분해 대입

// 변수 선언과 동시에 배열의 요소를 변수에 대입
const [a, b, c] = [1, 2, 3];
console.log(a,b,c); // 123

// 이미 선언된 변수에 분해대입
let a, b;
[a, b] = [1, 2];
console.log(a, b); // 1 2

// 배열이 중첩된 것을 분해대입
const [a, b, [c, d]] = [1, 2, [3, 4]];
console.log(a, b, c, d); // 1 2 3 4

객체의 분해대입

// 변수의 선언과 동시에 객체의 속성을 해당 변수에 대입
const {a: prop1, b: prop2} = {a: 1, b:2};
console.log(prop1, prop2) // 1 2

// 좌측 객체 표기에서 속성값 부분 생략하면, 속성 이름이 곧 새 변수의 이름
const {a, b} = {a: 1, b: 2};
console.log(a, b); // 1 2

// 속성의 이름과 같은 이름을 갖는 변수가 좌측에 들어있지 않으면, 해당 속성 무시
// 여기서 `b`는 무시
const {a} = {a: 1, b: 2};
console.log(a); // 1

// 객체가 중첩된걸 분해대입
const {a, b: {c}} = {a: 1, b: {c: 2}};
console.log(a, c); // 1 2

객체의 나머지 속성

분해대입 시 무시된 속성을 가지고 새로운 객체를 만들고 싶다면, ... 붙이기

const {a, b, ...rest} = {a:1, b:2, c:3, d:4};
console.log(reset); // {c:3, d:4}

매개변수에서의 분해대입

function func({prop, array: [item1, item2, item3 = 4]}) {
  console.log(prop);
  console.log(item1);
  console.log(item2);
  console.log(item3);
}

// 1, 2, 3, 4가 차례대로 출력
func({prop: 1, array: [2, 3]});