01. Arrow Function(화살표 함수)
🚩 화살표 함수는 간결한 문법을 통해 함수를 더욱 간단하게 선언할 수 있게 해줍니다.
1-1. 화살표 함수의 간결성
화살표 함수는 간결한 문법으로 함수를 선언한다.
간결한 함수의 경우, return 문을 따로 명시하지 않더라도 자동으로 처리될 수 있습니다.
단, 함수의 내용이 multi-line인 경우는 중괄호({}) 및 return문은 꼭 명시해야 한다.
특히 react에서도 자주 볼 수 있는 형태이니 한번 더 복기해야 한다.
// 가장 간결한 형태의 화살표 함수
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
// multi-line
const sampleLogging = () => {
const name = "김민수";
const age = 20;
console.log(`안녕, ${name}`);
return age + 1;
}
만약 화살표 함수를 사용하지 않을 경우에는
반환값이 필요한 경우 return을 명시해야 한다.
const add = function(a, b) {
return a + b;
};
console.log(add(5, 3)); // 8
02. Conditional Operator(조건 연산자 또는 삼항연산자)
🚩 조건 연산자는 코드를 더욱 간결하게 만드는데 사용됩니다.
2-1. 조건 연산자 사용
마찬가지로 react에서도 자주 사용하는데,
조건이 너무 길어지거나 복잡해진다면 오히려 if else if 가 가독성이 좋을 수 있다.
const score = 85;
const grade = score > 70 ? '합격' : '불합격';
console.log(grade); // '합격'
// 미사용 시의 코드는 아래와 같다
let grade;
if (score > 70) {
grade = '합격';
} else {
grade = '불합격';
}
console.log(grade); // '합격'03. Short Circuit Evaluation(단축 평가)
🚩 자바스크립트에서 단축 평가는 논리 연산자를 사용하여 조건문을 처리할 때,
🚩 전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식이다.
🚩 단축 평가는 주로 && (논리곱), || (논리합) ?? (null 병합 연산자)를 사용할 때 발생한다.
3-1. 논리합 || 연산자
논리합 연산자 ||는 좌변의 피연산자가
falsy 값(false, 0, "", null, undefined, NaN)일 때만 우변의 피연산자를 평가합니다.
좌변의 피연산자가 truthy 값일 경우, 그 값이 바로 결과값으로 반환되며, 우변은 평가되지 않는다.
// 유저 정보가 제공되지 않았을 때 기본 이름 제공
function getUsername(user) {
return user.name || '신원미상';
}
console.log(getUsername({ name: '홍길동' })); //홍길동
console.log(getUsername({})); //신원미상
3-2. 논리곱 && 연산자
논리곱 연산자 &&는 좌변이 truthy일 때만 우변을 평가합니다.
조건에 따라 특정 코드를 실행하고자 할 때 아주 유용하다.
// 사용자가 로그인 상태이면 환영 메시지를 출력
let loggedIn = true;
let username = '김진철';
loggedIn && console.log('환영합니다! ' + username); //환영합니다! 김진철
loggedIn = false;
loggedIn && console.log('환영합니다! ' + username); //아무것도 출력되지 않음
3-3. Optional Chaining ?.
객체의 속성에 접근할 때 해당 경로에 속성이 존재하지 않아도 에러를 발생시키지 않고,
대신 undefined를 반환합니다. 오류를 발생시키지 않기 때문에,
객체의 중첩된 속성에 안전하게 접근할 수 있습니다.
작동방식을 하나씩 확인해 보자면
const user = {
profile: {
name: "김수빈",
details: {
age: 30,
location: "서울시 강남구"
}
}
};
// 여기서 사용자의 나이를 접근하려는 일반적인 방식
console.log(user.profile.details.age); // 출력: 30
// 그러나 정보들 중 하나가 null일 경우 위의 코드는 에러를 발생한다.
// 그래서 아래처럼 Optinal chaining을 사용한다면?
console.log(user.profile?.details?.age); // 출력: 30
// profile 이나 details 중 하나라도 undefined나 null 이면 ?. 연산자는
// 그 시점에서 평가를 멈추고 undefined를 반환한다.
const user = {};
console.log(user.profile?.details?.age); // 출력: undefined
// Optional chaining은 객체의 속성뿐 아니라,
// 메소드 호출에도 사용할 수 있는데
// 객체가 메소드를 가지고 있지 않은 경우에 안전하게 메소드를 호출 할 수 있다.
const result = user.profile?.getDetails?.(); // user.profile.getDetails가 존재하지 않으면 undefined 반환
// 따라서 optional chaining은 중첩도니 객체 구조에서 안전하게 값을 읽거나
// 메소드를 호출할 때 유용하게 사용되며, 코드의 안정성을 높이고 간결하게 만드는 도움을 준다.04. Null 병합 연산자 ??
🚩 ?? 연산자는 좌변이 null이나 undefined일 경우에만 우변을 평가한다.
🚩 null 또는 undefined가 아닌 falsy 값들을 유효한 값으로 처리하고 싶을 때 사용합니다.
// 사용자의 위치 설정이 없으면 기본 위치를 제공
let userLocation = null;
console.log(userLocation ?? 'Unknown location'); // 출력: Unknown location
userLocation = 'Seoul';
console.log(userLocation ?? 'Unknown location'); // 출력: Seoul
// 사용자 입력이 0인 경우에도 0을 유효한 값으로 취급
const temperature = 0;
console.log(temperature ?? 25); // 출력: 0
아래는 truthy한 값이냐 아니냐 vs null이나 undefined이냐 아니냐의 예시다
function displayPreferences(preferences) {
// `||` 연산자 사용 예
const textLength = preferences.textLength || 50; // textLength가 0일 경우 50이 할당됨
console.log(`Text Length: ${textLength}`);
// `??` 연산자 사용 예
const itemsPerPage = preferences.itemsPerPage ?? 10; // itemsPerPage가 null 또는 undefined일 때만 10이 할당됨
console.log(`Items Per Page: ${itemsPerPage}`);
}
// 테스트 케이스
const userPreferences = {
textLength: 0, // 0이 유효한 값이지만 || 연산자로 인해 50이 출력됨
itemsPerPage: null // null 값에 대해 ?? 연산자로 인해 10이 출력됨
};
displayPreferences(userPreferences);
