모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 07장 문

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

📌 07장 연산자

7.1 산술 연산자

산술 연산자는 숫자형 데이터를 처리하기 위해 사용됩니다.

7.1.1 이항 산술 연산자

두 개의 피연산자를 가지고 연산을 수행하는 연산자입니다. +,-,*,/,%,**,=가 있습니다.

7.1.2 단항 산술 연산자

하나의 피연산자에 대해 연산을 수행하는 연산자입니다. +는 피연산자의 부호를 유지하며 숫자형으로 변환시킵니다. -는 숫자형일 경우 음수로, boolean이라면 논리 값을 반전시킵니다. ++,--는 피연산자의 값을 1씩 증가시키거나 감소시킵니다.

7.1.3 문자열 연결 연산자

문자열을 결합하는 데 사용되는 연산자입니다. +로 사용할 수 있습니다. 해당 연산자로 다른 데이터 유형을 문자열로 변환하여 연결할 수도 있습니다.

let x = 5;
let result = "The result is: " + x;
console.log(result); // "The result is: 5"

7.2 할당 연산자

변수에 값을 저장하고 업데이트(할당)하는 데 사용되는 연산자입니다. =,+=,-=,*=,/=,%=가 있으며, 앞의 연산자로 연산을 한 후, 결과를 왼쪽 피연산자에 할당합니다. 예를 들어, x *= 4는 변수 x의 현재 값에 4를 곱한 후, 그 결과를 변수 x에 다시 할당합니다.

7.3 비교 연산자

7.3.1 동등/일치 비교 연산자

==,!=은 두 값이 동등/다른지 비교합니다. 값이 서로 다른 데이터 타입이라면, 타입 강제 변환을 수행하여 비교합니다. ===은 두 값과 데이터 타입이 동일한지 비교합니다. !==은 두 값 또는 두 데이터 타입이 다르면 true를 반환합니다.

7.3.2 대소 관계 비교 연산자

>,<,<=,>=를 통해 두 값을 비교할 수 있습니다.

7.4 삼항 조건 연산자

JavaScript의 삼항 조건 연산자는 조건식을 평가하여 참 또는 거짓에 따라 두 가지 다른 표현식 중 하나를 선택하는 연산자입니다.

let age = 20;
let message = (age >= 18) ? '성인입니다' : '미성년자입니다';

console.log(message);  // '성인입니다'

7.5 논리 연산자

두 피연산자가 모두 참일때만 true를 반환하는 &&, 둘 중 하나라도 참이면 참을 반환하는 ||, 피연산자의 값을 뒤집는 !이 있습니다.

7.6 쉼표 연산자

두 개 이상의 표현식을 연결하여 하나의 표현식으로 평가하는 역할을 하는 연산자입니다. 마지막 피연산자의 값이 전체 표현식의 값이 됩니다. 가독성을 저하시킬 수 있어 권장되지는 않는다.

function getCoordinates() {
  let x = 10, y = 20;
  return x++, y++;
}

let result = getCoordinates();
console.log(result);

7.7 그룹 연산자

소괄호로 피연산자를 감싸는 그룹 연산자는 다른 표현식보다 먼저 평가 당합니다. 10 * (2 + 3); //50

7.8 typeof 연산자

변수 또는 값의 데이터 유형을 확인하기 위해 사용하는 연산자입니다. 특이사항으로는, null은 object로 반환됩니다. 주로 특정 데이터 유형에 따라 분기를 수행하거나 변수의 타입을 확인할 때 사용합니다.

7.9 지수 연산자

ES7에서 도입된 문법이며, **으로 사용합니다. 거듭제곱을 수행할 때 사용되는 연산자입니다. let result = 2 ** 3;과 같이 사용합니다. 기존의 Math.pow() 함수보다 더 직관적인 문법을 제공합니다.

7.10 그 외의 연산자

in 연산자에 대해 설명해주세요

특정 객체가 지정된 속성을 가지고 있는지 확인하는 데 사용됩니다. 또한 객체의 속성뿐만 아니라 상속된 속성도 확인할 수 있습니다.

let person = {
  name: "John",
  age: 30,
};

console.log("name" in person); //true

상속이 뭔가요?

JS에서는 프로토타입이라는 개념을 사용하여 상속을 구현합니다. 모든 객체는 내부적으로 `[[Prototype]]이라는 속성을 가지며, 다른 객체를 참조할 수 있습니다.

상속된 속성을 확인할 수 있다는게 무슨 말인가요?

in 연산자로 객체의 속성을 확인할 때, 해당 객체가 상속 체인을 통해 상속된 속성까지 확인할 수 있습니다. JS에서 객체는 'prototype'이라는 내부 속성을 통해 다른 객체를 상속합니다.

상속 체인이 뭔가요?

상속 체인이란, 프로토타입을 통해 상속을 구현하는 매커니즘을 말합니다. 자세한 것은 '프로토타입' 섹션에서 알아보도록 하겠습니다.

옵셔널 체이닝 연산자에 대해 설명해주세요

ES11에서 도입된 기능이며, 옵셔널 체이닝 연산자는 ?. 키워드를 이용하여 사용할 수 있습니다. 객체의 프로퍼티 또는 메서드에 접근할 때 존재하지 않는다면 오류 대신 undefined를 반환하기 때문에 객체에 안전하게 접근할 수 있게 해줍니다.

const obj = {
  prop1: {
    prop2: {
      prop3: "Value"
    }
  }
};

console.log(obj.prop1.prop2.prop4); // Error
console.log(obj.prop1?.prop2?.prop4); // undefined

null 병합 연산자에 대해 설명해주세요

ES11에서 도입된 기능이며, ??키워드로 사용할 수 있습니다. 피연산자 중에서 정의된 값이 있는 변수를 반환하는 연산자입니다. 변수가 null 또는 undefined인 경우 기본값을 설정할 때 주로 사용합니다.

let x = null;
let y = 10;

let result1 = x ?? 5; // x가 null이므로 5를 반환
let result2 = y ?? 5; // y가 null이 아니므로 y의 값을 반환

// 실제 사용 예시
let username = getUserFromAPI() ?? "Guest";
console.log(username); // getUserFromAPI()가 null이면 "Guest"를 반환

new 연산자에 대해 설명해주세요

new 연산자는 객체를 생성하고 생성자 함수를 호출하는 역할을 합니다.
1. 새로운 빈 객체가 생성됩니다.
2. 생성자 함수가 호출됩니다.
3. 생성자 함수 내에서 객체의 속성과 동작을 초기화합니다.
4. 생성된 객체가 반환됩니다.

생성자 함수가 뭔가요?

7.11 연산자의 부수 효과

연산 과정에서 예상치 못한 부작용이 발생하는 것을 의미합니다. =, ++,  --, delete가 있습니다.

7.12 연산자 우선순위

연산자 끼리는 우선 순위가 있으며, 이에 따라 연산의 순서를 결정합니다. 그룹 연산자 ()가 가장 높은 우선순위를 가지며, 이를 이용해 우선 순위를 정하는 것을 권장하고 있습니다.

7.13 연산자 결합 순서

연산자가 식 내에서 결합하는 순서를 나타냅니다.

let result = 1 + 2 + 3 / 5; // 왼쪽에서 오른쪽으로 계산 ( +, -, *, / )
let a = b = c = 0; // 오른쪽에서 왼쪽으로 계산 ( =, ?:(삼항 연산자) )