React 기초(3)

📌 Arrow Function(화살표 함수)

// step1.
const add = function(a,b) {
return a+b
}

// step2. function 삭제
const add = (a,b) => {
return a+b
}

// step3. { }, return 삭제
const add = (a,b) =>  a+b

📌 Conditional Operator(조건 연산자 또는 삼항연산자)

// 조건 연산자 미사용 
let grade;
if (score > 70) {
  grade = '합격';
} else {
  grade = '불합격';
}
console.log(grade);  // '합격'

// 조건 연산자 사용
const score = 85;
const grade = score > 70 ? '합격' : '불합격';
console.log(grade);  // '합격'

📌 Short Circuit Evaluation(단축 평가)

• 논리합 (||) 연산자
  좌변의 피연산자가 falsy 값(false, 0, "", null, undefined, NaN)일 때만 우변의 피연산자를 평가.

// step1.
const getUserName = (user) => {
  if(user.name === undeifined){
  return "신원미상";
  }
 return user.name;
}

// step2. 
const getUserName = (user) => {
  if(!user.name){
  return "신원미상";
  }
 return user.name;
}

// step3-1. 논리합 연산자로 줄임
const getUserName = (user) => {
 return user.name || "신원미상";
}

// step3-2.화살표 함수 줄임
const getUserName = (user) => user.name || "신원미상";

• 논리곱 (&&) 연산자
  좌변이 truthy일 때만 우변을 평가합니다. 조건에 따라 특정 코드를 실행하고자 할 때 유용

// 사용자가 로그인 상태이면 환영 메시지를 출력
let loggedIn = true;
let username = 'kyu';
loggedIn && console.log(`환영합니다, ${username}님!`); //환영합니다, kyu님!

loggedIn = false;
loggedIn && console.log(`환영합니다, ${username}님!`); //아무것도 출력되지 않음

• Optional Chaining(?.)
  객체의 속성에 접근할 때 속성이 존재하지 않아도 에러를 발생시키지 않고, undefined를 반환하여 객체의 중첩된 속성에 안전하게 접근가능
  (Optional Chaining은 읽기 전용, 값을 설정하려고 하면 동작하지 않음)

// 객체의 속성이 중첩되어 있을 때, 존재하지 않는 속성을 접근하려 하면 에러가 발생
const user = {
  name: "철수",
  address: {
    city: "서울",
  },
};

console.log(user.address.street); 
// ❌ TypeError: Cannot read properties of undefined (reading 'street')

//Optional Chaining 사용
console.log(user.address?.street); 
// ✅ undefined (에러 대신 undefined를 반환)

• Null 병합 연산자 (??)
  "왼쪽 값이 비어있으면 오른쪽 값을 사용해라"
  'null'이나 'undefined'만 체크해요,'0, 빈 문자열(""), false'는 "값이 있다고 판단"

let userLocation = null
// step1.
console.log(userLocation ? userLocation : "위치 없음");

// step2. 존재하면 보여주고, 아님 "위치 없음"표시
console.log(userLocation ?? "위치 없음");

---

📝 ||(논리 OR) 와 ??(null 병합 연산자)의 차이

• || (논리 OR)
  Falsy한 값(null, undefined, 0, "", false)이면 오른쪽 값을 반환.
  예: "0점인데, 기본 점수 50점으로 올릴래."

• ?? (Null 병합)
  null 또는 undefined만 체크해서 오른쪽 값을 반환
  예: "점수 데이터가 비었으면 기본 점수 50점을 줄게. 하지만 0점이면 그냥 0으로 둬."

let value1 = 0;

console.log(value1 || "기본값"); // 결과: 기본값
console.log(value1 ?? "기본값"); // 결과: 0