내일배움캠프 동영상 강의/내배캠_ React 입문

화살표 함수, 조건연산자, 단축평가

콛 다이어리 2024. 8. 9. 23:37

함수 선언하는 방법
function 함수명() {
 }
const 변수 = function 함수명 () {
}
// 이러한 형태가 가능한 이유는 

자바스크립트 안에서 참조한 변수들은 

// 부모 타입이라고 할 수 있는 상위타입이

// object 타입이라고 할 수 있음

// 그래서 function() 역시도

// 그냥 값으로 취급한다면 이런 표현도 가능

const add = function (a, b) {
return a + b;
}

//  단어' function'를 없앰
// → 매개변수 괄호 우측에 화살표 입력
// →  return이 한 줄인 경우

// 중괄호와 return의 키워드가 필요없음

const add = (a, b)=> {
return a + b;
}
const add = (a, b)=> a + b;


조건 연산자 = 삼항연산자
cosnt score = 85;
const grade = score >= 80 ? "A" : "B";

// 이거는 
if (score >= 80) {
  grade = "A";
}  else {
  grade = "B";
}
// 와 같음


단축 평가
논리 연산자(||, &&, ?., ??) 활용
truthy, falsy값 중요
falsy: false, 0, "", null, undefined, NaN

논리곱연산자 (&&)  :

좌변이 truthy일 때만 우변 평가

cosnt user = {
profile2: {
name: "조희진",
details: {
age: 26,
location: 경기도 화성시",
    },
  },
};

 

없을 수도 있는 속성에 ? 입력하기
console.log(user.profile?.details.age);


Null 병합 연산자 (??)
let userLocation = null;
console.log(userLocation ?? "없는위치")
// userLocation이 존재하면 보여주고
// 존재하지 않으면 "없는 위치"를 보여줘
// 여기서 보여준다는 말은 '평가해줘'야
// null병합 연산자는

// 좌변이 null, undefined인 경우에만
// 우변을 평가하는데,
// null이나 undefined가 아니면 그대로 남음

const displayPreferences = (preferece) => {
const textLEngth = preference.textLEnght || 50;
console.log("1 = > ", textLength); // 50

const itemsPerPAge = preference.itemsPerPage ?? 10;
console.log("2 = > ", itemsPerPage); // 10
};

'내일배움캠프 동영상 강의 > 내배캠_ React 입문' 카테고리의 다른 글

let, const, var  (0) 2024.09.09
DOM  (0) 2024.08.17
promise, async, await  (0) 2024.08.09
모듈  (0) 2024.08.09
template literals, spread와 rest  (0) 2024.08.09