[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션 - 27강 함수의 기본 파라미터, 조건문 스마트하게 쓰기, 비구조화할당

함수의 기본 파라미터

먼저 원의 너비를 구하는 함수를 만들어보자.

function calculateCircleArea(r){
  const radius = r || undifined;
  return Math.PI * r * r;
}
const area = calculateCircleArea();
console.log(area);  //NaN

여기서 calculateCircleArea가 빈값이면 NaN이라는 에러가 뜨는데 빈값일때 기본값을 반환하게 하고 싶다면?
어제 우리가 배운 단축평가 논리 계산법을 사용하면 된다.

function calculateCircleArea(r){
  const radius = r || 1; //r이 flase(빈값)이면 1로 대체하겠다.
  return Math.PI * radius * radius; //r대신 위에 변수 radius를 넣어줌.
}
const area = calculateCircleArea();
console.log(area); //3.141592653589793

그런데 여기서 함수의 기본 파라미터를 사용하면 더 짧은 코드가 가능하다.

function calculateCircleArea(r = 1){ //함수의 기본 파라미터 쓰는 법(r이 false일 경우 기본값으로는 1을 하겠다라는 의미).
  return Math.PI * r * r; 
}
const area = calculateCircleArea();
console.log(area); //3.141592653589793

함수의 기본 파라미터를 사용하는 법은 위와 같다.
그리고 function은 화살표 함수로도 바꿔줄 수 있는데 아래와 같다.

const calculateCircleArea = (r = 2) => {
  return Math.PI. * r * r;
}
const area = calculateCircleArea();
console.log(area);

한줄로 쓰려면 {}와, return을 뺀다.

const calculateCircleArea = (r = 1) => Math.PI * r * r;

const area = calculateCircleArea();
console.log(area);

조건문 스마트하게 쓰기

includes

function isAnimal(text){
  return(
    text === '고양이' || 
    text === '개' || 
    text === '거북이' || 
    text === '너구리'
  );
}
console.log(isAnimal('개')); //true

위와 같은 코드가 있다고 하자. console에 동물명이 들어가면 true를 반환한다. 그런데 이 받아오는 text들을 배열로 넣고 그 안에 속하는 것이 있으면 true를 반환해주는 배열 내장함수 includes가 있다. 이를 활용해보자.

function isAnimal(text){
  const animals = ['고양이','개','거북이','너구리'];
  return animals.includes(text);
}
console.log(isAnimal('개')); //true

이것을 화살표 함수로 바꿔보자.

const isAnimal = (text) => ['고양이','개','거북이','너구리'].includes(text);
console.log(isAnimal('개'));

객체와 단축평가논리계산법을 활용한 조건문

다른 예시를 들어보자.
조건에 따라 다른 값을 반환해야하는 코드가 있다.

function getSound(animal){
  if(animal === '개') return '멍멍!'; //if문을 한줄로 쓸때는 {}를 생략할 수 있다.
  if(animal === '고양이') return '야옹~';
  if(animal === '참새') return '짹짹!';
  if(animal === '비둘기') return '구..구구구..구';
  return '....?'; // else인가보네.. 되게 간단하게 쓴다.
}

console.log(getSound('')); // ....? 반환

객체를 활용해서 조건문을 더 깔끔하게 써보자.

function getSound(animal){
  const sounds = {
    개: '멍멍!',
    고양이: '야옹~',
    참새: '짹짹',
    비둘기: '구..구구구.구'
  }
  return sounds[animal] || '....?' // 객체[key] = value
}

console.log(getSound('개'));

지금의 value자리에 함수를 넣어서 조건마다 다른 함수를 실행하게끔 만들 수도 있다.

function makeSound(animal){
  const tasks = {
    개: () => console.log('멍멍!'), //화살표함수를 활용했다.
    고양이: () => console.log('야옹~'),
    참새: () => console.log('짹짹!'),
    비둘기: () => console.log('구..구구구.구')
  }
  return !tasks[animal] ? console.log('...?') : tasks[animal](); //삼항연산자를 활용했다.
}

makeSound('인간'); //...?
makeSound('개'); //멍멍

더욱 깔끔한 조건문 구현이 완성 되었다.
객체 안에서 각자 함수를 만들고 그에 해당하는 파라미터가 주어질 시 객체 안에 있는 함수를 실행하게 했다. 그리고 삼항연산자를 활용하여 조건이 맞지 않을 시 ‘…?’를 반환하도록 했다.
ES6 넘 깔끔하고 좋네. 슬슬 익숙해져가고 있는 것 같다.

비구조화 할당(구조분해)

객체 비구조화 할당

const object = { a: 1 };
function print({ a = '비었습니다', b = '비었습니다' }){
  console.log(a);
  console.log(b);
}
print(object); //1, 비었습니다

{a}를 통해 객체안의 a값을 바로 할당해 준다. 구조가 없이 직관적으로 객체에서의 키명으로 값을 바로 가져오는 것이 비구조화 할당 인거 같다. a나 b의 값이 비었을 경우 a = ‘기본값’ 를 통해 기본값을 설정해 줄 수도 있다. 이 방식들은 함수의 파라미터 뿐만 아니라 변수로도 사용 가능하다.

const object = { a: 1 };
const { a, b = '비었습니다' } = object;
console.log(a); // 1
console.log(b); // 비었습니다

이렇게 비구조화 할당에서 기본값을 설정 할때는 ‘=’을 사용한다는 것을 잘 알아두자. 또 아래와 같이 key명을 바꾸는 데에도 사용할 수 있다.

const animal = {
  name : '멍멍이',
  type: '개'
};
const {name : nickname} = animal; //key값을 바꿀 수 있다.
console.log(nickname);

이건 어떨때 유용하게 쓰이는지 잘 모르겠지만.. 일단 이렇게도 가능하다는 거.

배열 비구조화 할당

const array = [1, 2];
const one = array[0];
const two = array[1];

console.log(one); //1
console.log(two); //2

이런 배열이 있다고 가정하자.
one과 two를 비구조화 할당으로 합칠 수 있다.

const array = [1, 2];
const [one, two] = array; //array안의 값이 one, two로 꺼내짐

console.log(one); //1
console.log(two); //2

그리고 객체비구조화 할당과 마찬가지로 기본값을 아래와 같이 넣어줄 수 있다.

const array = [1];
const [one, two = '비었습니다'] = array;

console.log(one); //1
console.log(two); //비었습니다

객체의 깊숙한(?)곳에 있는 값 꺼내기

const deepObject = {
  state : {
    information : {
      name : 'keep',
      language : ['korean', 'english']
    }
  },
  value: 5
}

const {name, language} = deepObject.state.information;
const {value} = deepObject;
const extracted = {
  name,
  language,
  value
}
console.log(extracted);

이런식으로 객체 안에서 값을 꺼내올 수 있다.
이걸 더 쉽게 만들어보자.

const deepObject = {
  state : {
    information : {
      name : 'keep',
      language : ['korean', 'english']
    }
  },
  value: 5
}

const{
  state : {
    information : {
      name, language: [firstLang, secondLang]
    }
  },
  value
} = deepObject;

const extracted = {
  name,
  firstLang,
  value
}
console.log(extracted);

오호.. 이런식으로 찾아올수도 있다. 한방에. 근데 코드가 더 더러워 보이므로 이전 방법을 더 선호하면 그렇게 써도 상관없다. 개인의 선호에 따라 작성하면 된다. 아무튼 비구조화 할당이 이런식으로도 가능하다는 걸 알아두자.

마치면서

오늘은 여기까지..
시청 영상 27강 4~6까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp