[TIL] D+51 / React입문 / ReactJS - 단축평가(2)

2025_1_1 수요일

+ 코딩 17일차

 

 

 

📝 Lastday I Did
React에서 많이 사용하게 될 JS문법에 중 화살표함수, 조건 연산자, 단축평가의 논리합연산자 까지 배웠고,UX집중반 문제 정의에 들어가기 앞서 리서치 내용들의 인사이트를 추출하고 방향성을 잡았다.

 

 

 

💫 Today I Did

→ 오늘은 1월 1일 새해를 맞아 휴일이지만 어제까지 들어야할 강의를 다듣지 못했기 때문에 강의를 들었다.,,,🥹

단축평가의 논리합연산자 까지 배웠다.🙆‍♂️

 

 

 

 

---

 

 

✅  배운점

 

 

 

 

단축 평가

→ 자바스크립트에서 단축 평가는 논리 연산자를 활용한다.

논리연산자 → 논리합 연산자(||), 논리곱 연산자(&&), Optional Chaining(?.), Null 병합 연산자(??)

 

 

어제 논리합연산자(||)까지 배웠고 오늘은 논리 곱연산자(&&)부터 시작한다!

 

 

// 4. 논리곱 연산자(&&) 사용하기
// 논리곱 연산자는 좌변 우변 비교,좌변이 truthy한 값일 때만 우변을 평가한다.

const loggedIn = true; // 로그인이 되어 있다.
const userName = "르탄이";

//로그인 상태일 때만 "르탄이"를 보여줘
loggedIn && console.log('환영합니다 ${userName}님!');

---------------------------------------------------------------------------

// 5. optinal chaining(?.) 사용하기

const user = {
    profile: {
        name: "르탄이",
        details: {
            age: 30,
            location: "서울시 강남구"
        },
    },
    printHello: () => console.log("Hello"); //메소드
};

//나이에 접근하고자한다면
console.log(user.profile2.details.age); // -> profile2는 없기때문에 에러가난다.
console.log(user.profile2?.details.age);
// -> optinal chaining(?.)을 사용하면 에러가 나지않고 undefined로 출력된다.

//printHello라는 메소드 출력하기
user.printHello(); // 출력 값 : "Hello"
user.printHello1(); // printHello1은 없기 때문에 애러가 난다.
user.printHello1?.(); // 함수가 실행되는 부분에 옵셔널 체이닝 넣으면 오류 안나고 그냥 아무것도 출력안됨
// -> 즉 undefined를 반환하게 된다.

---------------------------------------------------------------------------

// 6. Null병합 연산자(??) 사용하기
// 좌변이 Null, undefined일 때만 우변을 평가한다.
// 논리합 연산자와 비슷하다고 볼 수 있다.

// 사용자의 위치 설정이 없으면 "없는위치" 출력
let userLocation = null; // 바뀔 수 있기때문에 let으로 선언
console.log(userLocation ? userLocation : '없는위치');  // 출력 값 : 없는위치
// -> userLacation이 존재해? 그럼 보여주고, 아니면 "없는위치"를 반환해줘

// 똑같이 Null병합 연산자를 사용한다면
console.log(userLocation ?? '없는위치');  // 출력 값 : 없는위치
// -> userLacation이 존재해? 그럼 보여주고, 아니면 "없는위치"를 반환해줘

---------------------------------------------------------------------------

// Null병합 연산자(??)와 논리합 연산자(||)는 매우 닯았다.

// 논리합 연산자(||) 예시

const displayPerferencese = (perferencese) => {
	const textLength = perferencese.textLength || 50;
    // -> textLength는 perferencese.textLength가 truthy한 값이 아니라면 우측을 평가한다.
    console.log("1 =>", textLength);
    
    const itemsPerPage = perferencese.itemsPerPage ?? 10;
    // -> itemsPerPage는 perferencese(인풋)에 itemsPerPage가 Null, undefined일경우 우측을 평가한다.
    console.log("2 =>", itemsPerPage);
};

cons userPerference = {
	textLength: 0,
    itemPerPage: null,
};

displayPerferencese(userPerference); // 함수호출