[JS] 자바스크립트에서 사용되는 연산자 및 표현식

'Spread', 'Optional Chaining', 그리고 'Destructuring'은 모두 자바스크립트(JavaScript)에서 사용되는 연산자 및 표현식입니다. 자바스크립트는 다양한 연산자와 구문을 제공하여 개발자가 보다 쉽고 간결하게 코드를 작성할 수 있도록 도와줍니다.

1. 삼항 연산자(Ternary Operator): 삼항 연산자는 조건에 따라 두 개의 값을 반환할 때 사용하는 연산자입니다. 문법은 조건 ? 값1 : 값2 형태로, 조건이 참(True)이면 값1을, 그렇지 않으면 값2를 반환합니다.
2. spread 연산자: ES6에 도입된 spread 연산자(...)는 배열이나 객체의 요소를 개별 요소로 확장할 때 사용합니다. 이를 통해 배열을 인자 목록으로 쉽게 전달하거나, 객체 리터럴을 조합할 수 있습니다.
3. Optional Chaining (선택적 체이닝): 선택적 체이닝 연산자(?.)는 객체의 속성을 읽을 때 해당 속성이 존재하지 않아도 에러를 발생시키지 않고 undefined를 반환하게 해주는 연산자입니다. 예를 들어, obj?.prop는 obj가 null이거나 undefined면 undefined를 반환하고, 그렇지 않으면 obj.prop을 반환합니다.
4. Destructuring (구조 분해 할당): 구조 분해 할당은 배열이나 객체의 속성을 분해하여, 그 값을 개별 변수에 할당하는 JavaScript 표현식입니다. 예를 들어, { name, age } = person는 person 객체에서 name과 age 속성을 새로운 변수 name과 age에 할당합니다.

 

Spread 연산자 (...)

배열이나 객체의 속성을 확장할 때 사용되는 연산자입니다. 예를 들어, 배열의 요소를 다른 배열로 복사하거나, 객체의 속성을 다른 객체에 병합할 때 유용하게 사용됩니다.

let parts = ['shoulders', 'knees']; 
let lyrics = ['head', ...parts, 'and', 'toes']; 
// ['head', 'shoulders', 'knees', 'and', 'toes']

 

Optional Chaining (?.)

객체의 속성을 읽을 때, 해당 속성이 존재하지 않아도 에러가 발생하지 않고 undefined를 반환하도록 하는 연산자입니다. 깊숙한 객체의 속성을 안전하게 접근할 수 있게 해줍니다.

const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; 
const dogName = adventurer.dog?.name; // undefined, 에러 없음

 

Destructuring 할당

배열이나 객체의 속성을 분해하여, 그 값을 개별 변수에 쉽게 할당할 수 있도록 하는 표현식입니다.

const user = { firstName: 'John', lastName: 'Doe' }; 
const { firstName, lastName } = user; console.log(firstName); // 'John' 
console.log(lastName); // 'Doe'

 

삼항연산자 (조건 ? 값1 : 값2)

조건에 따라 두 값을 선택하여 반환하는 연산자입니다. if 문의 간단한 대체품으로 사용됩니다.

const age = 26; 
const beverage = age >= 21 ? 'Beer' : 'Juice'; 
console.log(beverage); // 'Beer'