ReactJS 기초 Arrow Function

Arrow Function

• 함수를 선언하는방법 1
  function add() {}

• 함수를 선언하는방법 2
  const minus = function () {};

---

기본 함수 선언 구조

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

function 키워드를 사용하는게 번거롭다면, 위의 기본 함수식을 화살표 함수를 사용하여 변경

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

• function 제거 후 매개변수 뒤에 => 기입

추가로 return이 1줄이라면 return문구와 {}(중괄호)도 생략 가능

const add3 = (a, b) => a + b;

console.log(add3(1, 3)); // 4

---

Conditional Operator(조건연산자) = 삼항연산자 (같은말)

const score = 85;
let grade = "";

• 조건문 방식 ( 기존 )

if (score >= 80) {
  grade = "A";
} else {
  grade = "B";
}

• 조건연산자 방식

let grade2 = score >= 80 ? "A" : "B";
console.log(grade2); // A

선언을 하고 if문 작성 방식이 아닌, 선언 문장에 직접 계산식 및 기호를 넣는다

검증할 요소, true값, false값 3개가 들어가기에 삼항연산자 이다

---

Short Circuit Evaluation(단축 평가)

논리연산자를 이용 (||, &&, ?.,)

( 1 ) 논리합연산자(||)

• truthy, falsy 값이 존재

• falsy : false, 0, "", null, undefined, NaN;

• truthy : falsy한 값 이외의 모든 것

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

위의 식의 길이를 줄이는법 (논리합연산자)

const getUserName02 = (user) => {
  return user.name || "신원미상";
};

const person = {
  age: 30,
};

console.log(getUserName02(person)); // 신원미상

위의 person객체에 새로운 name속성값을 추가 해준다면 신원미상 문자 대신 해당 값이 들어감