자바스크립트 정리 - 심화

 

 

자바스크립트 정리 - 심화

 

 

 

 

단락 평가

: 논리 연산에서 첫 번째 피연산자의 값만으로 해당 식의 결과가 확실할 때, 두 번째 값은 평가하지 않는 것

• && 👉 둘 다 true여야 true
• || 👉 둘 중 하나만 true여도 true
• 조건문 없이도 조건 확인 가능

function printName(person) {
  const name = person && person.name;
  console.log(name || "person의 값이 없음");
}

printName(); 
// 함수 인자값으로 undefined 전달
// undefined(False) &&은 이미 F이기 때문에 person.name엔 접근 X => const name = person(undefined)
// F || T이므로 "person의 값이 없음" 출력

printName({ name: "이정환" });
// 함수 인자값으로 { name: "이정환" } 전달
// const name = { name: "이정환" }
// T || T이므로 첫 번째 True인 "이정환" 출력

 

 

 

---

 

 

구조 분해 할당

 

배열의 구조 분해 할당

let arr = [1, 2, 3];

let [one, two, three] = arr;
// 1 2 3

 

 

• 기본값 설정 가능

let [one, two, three, four = 4] = arr;
// four 기본값 설정

 

 

 

 

 

객체의 구조 분해 할당

let person = {
  name: "이정환",
  age: 27,
  hobby: "테니스",
};

let {name, age, hobby} = person;
// 이정환 27, 테니스

let {
  name,
  age: myAge, // age값을 myAge 변수에 저장
  hobby,
  extra = "hello",
} = person;
// extra 기본값 설정

❗객체 구조 분해 할당을 이용해서 함수의 매개변수를 받는 법

• 인수로 구조 분해 할당을 전달
• 객체를 인자로 넘겼을 때만 가능

const func = ( {name, age, hobby, extra} ) => {
  console.log(name, age, hobby, extra);
};

func(person); // 객체를 인자값으로 넘김

 

 

---

 

Spread 연산자

...

: 배열(array)이나 객체(object)에 저장된 여러 값을 개별로 흩뿌리는 역할

 

배열(array)

let arr1 = [1, 2, 3];

let arr2 = [4, ...arr1, 5, 6];
// 4 1 2 3 5 6

 

 

객체(object)

let obj1 = {
   a: 1,
   b: 2
}

let obj = {
   ...obj1,
   c: 3,
   d: 4
}
// a: 1, b: 2, c: 3, d: 4

 

함수

let arr1 = [1, 2, 3];

function funcA(p1, p2, p3) {
   console.log(p1, p2, p3);
   // 1 2 3 
}

funcA(...arr1);

 

 

 

---

 

 

Rest 매개변수

...rest

: 나머지 매개변수 가져오기

 

• 함수를 호출하면서 전달한 남은 모든 인수들이 rest라는 매개변수에 배열 형태로 저장된다.

let arr1 = [1, 2, 3];

function funcB(...rest) {
   console.log(rest);
   // [1, 2, 3]
}

funcB(...arr1);

 

 

 

• 첫 번째 매개변수는 다른 변수로 받고 싶으면 rest 앞에 매개변수 추가

function funcB(one, ...rest) {
   console.log(one);
   // [1]
   console.log(rest);
   // [2, 3]
}

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트