Javascript 코드를 간결하게 만들어주는 연산자들을 소개해 드립니다.
이러한 연산자들은 코드를 간소화 시켜주며, 한 페이지에 볼 수 있는 코드의 양을 늘려주어 마우스 스크롤 횟수를 줄여주며, 한 눈에 알아보기 쉽게 되어 가독성과 효율성을 높여 주게 됩니다.
그러며, 이제 연산자들을 소개시켜 드리겠습니다.
1. 삼항 연산자 (Ternary Operator) '? :'
삼항 연산자는 간단한 if-else구문을 한 줄로 표현할 수 있습니다.
일반 if-else구문
let x = 10;
let result;
if (x > 5) {
result = "x is greater than 5";
} else {
result = "x is not greater than 5";
}
console.log(result);
삼항 연산자 사용
let x = 10;
let result = x > 5 ? "x is greater than 5" : "x is not greater than 5";
console.log(result);
2. 화살표 함수 (Arrow Function) '=>'
화살표 함수를 사용하면, 함수를 좀 더 간결하게 표현할 수 있습니다.
일반 함수 선언
const add = function add(a, b) {
return a + b;
};
console.log(add(3, 4));
화살표 함수 사용
const add = (a, b) => a + b;
console.log(add(3, 4));
3. 논리 연산자 (Logical Operators) '&&', '||', '!'
논리 연산자는 조건문을 더 간결하게 작성하고, 변수의 기본값을 설정할 때 유용합니다.
일반 if-else문
let x = null;
let y = "Hello";
if (x) {
console.log(x);
} else {
console.log(y);
}
논리 연산자 사용
let x = null;
let y = "Hello";
console.log(x || y);
4. 할당 연산자 (Assignment Operators) '+=', '-=', '*=', '/=', '%='
할당 연산자를 사용하면 변수의 값을 간단히 수정할 수 있습니다.
일반적인 연산 후 할당
let x = 10;
x = x + 5;
console.log(x);
할당 연산자
let x = 10;
x += 5;
console.log(x);
5. 널 병합 연산자 (Nullish Coalescing Operator) '??'
널 병합 연산자는 좌측 피연산자가 null 또는 undefined일 때 우측 피연산자를 반환합니다.
일반적인 if-else구문으로 null 또는 undefined 검사
let x = null;
let y = "Default value";
let result;
if (x === null || x === undefined) {
result = y;
} else {
result = x;
}
console.log(result);
널 병합 연산자 사용
let x = null;
let y = "Default value";
let result = x ?? y;
console.log(result);
6. 선택적 연결 연산자 (Optional Chaining Operator) '?.'
선택적 연결 연산자를 사용하면 객체의 속성에 접근할 때 해당 속성이 없거나 undefined일 경우, 오류를 발생시키지 않고 undefined를 반환합니다.
일반적인 경우
const user = {
name: "John",
// address 속성이 없음
};
let street;
if (user && user.address && user.address.street) {
street = user.address.street;
} else {
street = "Unknown";
}
console.log(street);
선택적 연결 연산자 사용
const user = {
name: "John",
// address 속성이 없음
};
let street = user.address?.street ?? "Unknown";
console.log(street);
7. 지수 연산자 (Exponentiation Operator) '**'
지수 연산자를 사용하면 숫자의 거듭제곱을 쉽게 계산할 수 있습니다.
Math.pow()함수 사용하는 경우
const x = Math.pow(2, 3);
console.log(x);
지수 연산자를 사용하는 경우
const x = 2 ** 3;
console.log(x);
8. 배열 Destructuring
배열 Destructuring은 배열의 요소를 개별 변수에 할당하는 간편한 방법을 제공합니다.
일반적인 경우
const numbers = [1, 2, 3];
const a = numbers[0];
const b = numbers[1];
const c = numbers[2];
console.log(a, b, c);
배열 Destructuring을 사용하는 경우
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c);
9. 객체 Destructuring
객체 디스트럭처링은 객체의 속성을 개별 변수에 할당하는 간편한 방법을 제공합니다.
일반적인 경우
const person = {
name: "John",
age: 30,
};
const name = person.name;
const age = person.age;
console.log(name, age);
객체 Destructuring을 사용하는 경우
const person = {
name: "John",
age: 30,
};
const { name, age } = person;
console.log(name, age);
10. Template Literals ``
템플릿 리터럴은 문자열 내에 변수 또는 표현식을 쉽게 삽입할 수 있도록 해줍니다.
일반적인 문자열 결합하는 경우
const name = "John";
const age = 30;
const text = "Hello, my name is " + name + " and I am " + age + " years old.";
console.log(text);
Template Literals (``)를 사용하는 경우
const name = "John";
const age = 30;
const text = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(text);
11. 확산 연산자 (Spread Operator) `...`
스프레드 연산자는 배열이나 객체의 요소를 확장하거나 쉽게 병합할 때 사용됩니다.
일반적인 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = arr1.concat(arr2);
console.log(combined);
Spreead Operator를 사용해서 배열을 합치는 경우
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);
일반적인 객체 합치기
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combined = Object.assign({}, obj1, obj2);
console.log(combined);
Spread Operator를 사용해서 객체를 합치는 경우
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combined = { ...obj1, ...obj2 };
console.log(combined);
12. 기본 매개변수 (Default Parameters)
함수에서 기본 매개변수를 사용하면 매개변수에 전달되지 않은 인수를 기본값으로 처리할 수 있습니다.
일반함수
function greet(name) {
if (name === undefined) {
name = "John Doe";
}
console.log("Hello, " + name);
}
greet(); // Hello, John Doe
기본 매개변수를 사용하는 경우
function greet(name = "John Doe") {
console.log("Hello, " + name);
}
greet(); // Hello, John Doe
13. Shorthand Property Names
객체 리터럴에서 속성 이름과 변수 이름이 동일한 경우, 축약된 구문을 사용할 수 있습니다.
일반적인 경우
const x = 10;
const y = 20;
const obj = {
x: x,
y: y,
};
console.log(obj);
Shorthand Property Names를 사용하는 경우
const x = 10;
const y = 20;
const obj = {
x,
y,
};
console.log(obj);
14. Computed Property Names
객체 리터럴에서 계산된 속성 이름을 사용하면 동적으로 속성 이름을 할당할 수 있습니다.
일반적인 경우
const key = "dynamicKey";
const obj = {};
obj[key] = "value";
console.log(obj);
Computed Property Names를 사용하는 경우
const key = "dynamicKey";
const obj = {
[key]: "value",
};
console.log(obj);
15. Method Shorthand
객체 리터럴에서 메서드를 정의할 때 축약된 구문을 사용할 수 있습니다.
일반적인 경우
const obj = {
sayHello: function () {
console.log("Hello!");
},
};
obj.sayHello();
Method Shorthand를 사용하는 경우
const obj = {
sayHello() {
console.log("Hello!");
},
};
obj.sayHello();
16. Async/Await
Async/Await를 사용하면 비동기 코드를 좀 더 간결하고 알아보기 쉽게 만들어 줍니다.
then()을 사용하는 경우
function asyncTask() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Task completed");
}, 1000);
});
}
asyncTask().then((result) => {
console.log(result);
return asyncTask();
}).then((result) => {
console.log(result);
return asyncTask();
}).then((result) => {
console.log(result);
});
Async/Await을 사용하는 경우
async function asyncTask() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Task completed");
}, 1000);
});
}
(async () => {
const result1 = await asyncTask();
console.log(result1);
const result2 = await asyncTask();
console.log(result2);
const result3 = await asyncTask();
console.log(result3);
})();
17. Chained Array Methods
배열 메서드를 체이닝하면 배열 처리를 더 간결하게 작성할 수 있습니다.
일반적인 배열처리
const numbers = [1, 2, 3, 4, 5];
const doubled = [];
for (const number of numbers) {
doubled.push(number * 2);
}
const filtered = [];
for (const number of doubled) {
if (number > 5) {
filtered.push(number);
}
}
console.log(filtered);
Chained Array Method방식으로 처리하는 경우
const numbers = [1, 2, 3, 4, 5];
const result = numbers
.map((number) => number * 2)
.filter((number) => number > 5);
console.log(result);
18. Tagged Template Literals
태그된 템플릿 리터럴을 사용하면 템플릿 리터럴의 처리 방식을 사용자 정의할 수 있습니다.
일반적인 경우
function formatCurrency(value, currency) {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: currency,
}).format(value);
}
const price = 1234.56;
const formattedPrice = formatCurrency(price, "USD");
console.log(formattedPrice);
Tagged Template Literals 방식으로 처리하는 경우
function formatCurrency(strings, value, currency) {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: currency,
}).format(value);
}
const price = 1234.56;
const formattedPrice = formatCurrency`The price is ${price}${"USD"}`;
console.log(formattedPrice);
댓글