[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션

패스트캠퍼스 프론트엔드 인강 10일차 함수의 기본 파라미터와 조건문을 더 스마트하게 쓰는방법을 배워보았다.

 

함수를 호출하게될때 원래 넣어야할 파라미터를 넣지않게됬을때 기본값을 지정하는 방법

예) 원의 넓이를 구하는 함수

function cal(r){
	return Math.PI * r * r;
}
//const area = cal(1);
const area = cal();
console.log(area)

cal~() 함수안에 파라미터가 없을경우 NaN에러가뜬다.

단축평가논리계산법을 활용하면 이를 해결할수있다.

function cal(r){
	const radius = r || 1;
	return Math.PI * radius * radius;
}

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

하지만 더 간단한 방법이있다.

function cal(r=1){
	return Math.PI * r * r;
}

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

기본값을 1을 사용하겠다는뜻

 

화살표함수로도 사용할수있다.

const cal = (r=1) => Math.PI * r * r

const area = cal()
console.log(area)

조건문활용: 특정값이 여러값중에 하나인지 확인하는방법

function isAnimal(text){
	return text === '고양이' || text === '개' || text === '너구리'
}

console.log(isAnimal('개'))
console.log(isAnimal('노트북'))

isAnimal에 파라미터값이 고양이이거나 개이거나 너구리일경우는 true

isAnimal에 파라미터값이 다른내용일경우는 false가 뜨게하는 함수이다.

 

더쉽게 작성하는 방법이있다.

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

console.log(isAnimal('개'))
console.log(isAnimal('노트북'))

배열 내장함수인 includes를 사용하면 된다.

 

화살표함수로 표현하면 코드가 더 짧아진다. 코드가짧으면서도 읽엇을때 어떤역할을하는지 알수있어야 좋은코드임을 명심하자

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

console.log(isAnimal('개'))
console.log(isAnimal('노트북'))

 

다른예시

만약 주어진값에따라 다른결과물을 반환해야하는 상황

function getSound(animal){
	if(animal === '개') return '멍멍!'
    if(animal === '고양이') return '야옹!'
 	return '...?'
}

console.log(getSound('사람'))

if문 {} 도 생략가능하다

if문을 남발하는것은 좋지않은 코드이다 이는 객체를 활용해 해결가능하다.

function getSound(animal){
	const sounds= {
    	개:'멍멍',
        고양이 : '야옹'
    }
    return sounds[animal] || '...?' //단축평가논리계산법
}

console.log(getSound('사람'))

function makeSound(animal){
	const tasks = {
    	개: () =>{console.log('멍멍'},
        고양이(){
        	console.log('야옹')
        },
        비둘기 : function(){
        	console.log('구구')
        }
    }
    if(!tasks[animal]){
    	console.log('...?')
        return;
    }
    tasks[animal]();
}

makeSound('사람')

이런식으로 객체를 활용하면 보기좋은 코드가 된다.

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스