[JavaScript] 함수의 기본 파라미터, 조건문 더 스마트하게 쓰기, 비구조화 할당
함수의 기본 파라미터
함수를 호출할 때, 원래 넣어야 할 파라미터를 넣지 않게 됐을 경우, 기본 값으로 사용할 파라미터를 지정하는 것을 의미합니다.
아래 코드와 같은 경우에는 함수 호출 인자로 아무것도 넣어주지 않을 경우 오류를 발생하게 됩니다.
function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(4); console.log(area); // 50.2654~~~~ 출력. // 만약 아무것도 넣어 주지 않으면 NaN을 출력한다.
아무것도 넣지 않으면, NaN을 출력하게 됩니다.
아무것도 넣지 않아도 실행되게끔 하고 싶으면 어떻게 해야 될까요? 바로 단축 평가 논리 계산법을 사용하면 됩니다.
function calculateCircleArea(r) { const radius = r || 1; return Math.PI * radius * radius; } const area = calculateCircleArea(); console.log(area); // 3.141592~~~~~~~~~~~출력.
|| 연산자는 앞에 falsy 한 값이 있으면 뒤에 값을 호출합니다.
즉, r이 주어지지 않았으면 falsy 한 값이므로 뒤에 있는 1로 radius 값을 지정하게 됩니다.
위에 코드도 정상 동작 하지만 더 간편하게 사용할 수 있습니다.
// es6 문법부터는 더 간편하게 사용할 수 있다. function calculateCircleArea(r = 1) { return Math.PI * r * r; } // 화살표 함수로도 사용 가능하다 const calculateCircleArea = (r = 1) => Math.PI * r * r;
위와 같이 es6 문법부터는 함수 인자 안에서 기본 값을 설정해줄 수 있습니다.
또한, 화살표 함수로도 사용 가능합니다.
조건문 더 스마트하게 쓰기
특정 값이 여러 값 중에 하나인지 확인해야 될 상황에서 유용하게 사용할 수 있는 일종의 Tip입니다.
결론부터 말씀드리자면 "객체를 활용하면 더 보기 좋은 코드를 만들 수 있다."입니다.
만약 아래 코드와 같이 일일이 값을 확인해야 되는 코드가 있다고 가정하겠습니다.
function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' ); } console.log(isAnimal('개')); // true 출력. console.log(isAnimal('노트북')); // false 출력.
위와 같은 코드는 아래 코드와 같이 배열을 사용하여 조금 더 간편하게 작성할 수 있습니다.
function isAnimal(text) { const animals = ['고양이', '개', '거북이']; return animals.includes(text); } console.log(isAnimal('개')); // true 출력. console.log(isAnimal('노트북')); // false 출력. const isAnimal = text => ['고양이', '개', '거북이'].includes(text); // 화살표 함수로도 사용 가능하다
물론 화살표 함수로도 사용 가능합니다.
또 다른 예를 들어보겠습니다. 물론 잘못된 코드는 아닙니다.
function getSound(animal) { if(animal === '개') return '멍멍!'; if(animal === '고양이') return '야옹~'; if(animal === '참새') return '짹짹'; if(animal === '비둘기') return '구구 구 구'; return '...?' } console.log(getSound('개')); // '멍멍!' 출력. console.log(getSound('비둘기'));// '구구 구 구' 출력. console.log(getSound('인간')); // '...?' 출력.
위의 코드는 동작하는 데 문제가 없고, 가독성이 엄청 떨어지는 코드는 아니지만
객체를 활용하여 훨씬 더 보기 좋은 코드로 만들 수 있습니다.
function getSound(animal) { const sounds = { 개 : '멍멍!', 고양이: '야옹~', 참새: '짹짹', 비둘기: '구구 구 구' }; return sounds[animal] || '...?'; } console.log(getSound('개')); // '멍멍!' 출력. console.log(getSound('비둘기'));// '구구 구 구' 출력. console.log(getSound('인간')); // '...?' 출력.
단축 평가 논리 계산법을 활용하여 더 보기 좋은 코드로 바꿔보았습니다.
|| 연산자는 파라미터로 들어온 값이 sounds 객체 내에 있는 key와 비교 후, 해당 key가 존재하면 해당 key의 값을 호출하고 아니면 '...?'를 호출합니다.
이런 식으로도 코드를 구현해 볼 수 있습니다.
function makeSound(animal) { const tasks = { 개: () => { console.log('멍멍!'); }, 고양이() { console.log('야옹!'); }, 비둘기() { console.log('구구 구 구'); } }; const task = task[animal]; if (!task) { console.log('...?'); return; } task(); } makeSound('개'); // '멍멍!' 출력. makeSound('비둘기');// '구구 구 구' 출력. makeSound('인간'); // '...?' 출력.
위의 코드는 객체 안에 함수 자체를 만들어 준 코드입니다.
위의 작성한 코드들은 전부 다 정상 작동하는 코드입니다.
코딩에 정답이 있는 것은 아니지만 조금 더 효율적이고
조금 더 가독성이 뛰어난 코드에 욕심 내는 것도 개발자의 일환이라고 생각합니다.
비구조화 할당 (구조 분해)
비구조화 할당( 구조 분해 )은 객채 혹은 배열 안의 값을 꺼낼 때 사용하는 문법입니다.
기본적으로 함수를 활용한 비구조화 할당 문법을 보겠습니다.
const object = { a: 1, b: 2}; function print({a=0,b=0}) { console.log(a); // 1 출력. console.log(b); // 2 출력. } print(object);
만약 값이 주어지지 않았다면 기본 값도 설정해 줄 수 있습니다.
{ a=0, b=0 } 이 코드가 기본 값을 설정해준 코드입니다.
비구조화 할당을 하면서 변수 네이밍을 바꿔줄 수도 있습니다.
const animal = { name: '멍멍이', type: '개' }; const {name: nickname} = animal; console.log(nickname); // '멍멍이' 출력. console.log(animal); // 기존 animal 객체 출력.
animal을 출력했을 경우, 기존의 animal 객체가 잘 나옵니다. 즉, 이름을 바꿔줬다고 해서 기존의 객체가 변경되지는 않습니다.
객체가 아닌 배열에도 비구조화 할당을 할 수 있습니다.
const array = [1]; cosnt [one, two = 2] = array; console.log(one) // 1 출력. console.log(two) // 2 출력.
객체의 깊숙한 곳에 있는 값을 꺼내는 방법을 알아보겠습니다. 2가지 방법이 있습니다.
방법 1.
const deepObject = { state : { info: { name : bbangson lang: ['kor', 'eng'] } }, value : 5 } // 방법 1. const {name, lang} = deepObject.state.info; const {value} = deepObject; const extracted1 = { name, lang, value }; console.log(extracted1); // 'bbangson', ['kor'],['eng'], 5 출력.
방법 2.
const deepObject = { state : { info: { name : bbangson lang: ['kor', 'eng'] } }, value : 5 } // 방법 2. const { state: { info: { name, lang:[firstLang, secondLang] } }, value } = deepObject const extracted2 = { name, firstLang,secondLang, value } console.log(extracted2); // 'bbangson', 'kor', 'eng', 5 출력.
어떤 방법을 사용할지는 취향 차이인 것 같습니다. 저는 개인적으로 벨로퍼트 강사님과 마찬가지로 방법 1을 선호합니다.
참고 강의
프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스 (fastcampus.co.kr)
프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스
프론트엔드 개발 러닝패스, 이 강의 패키지 하나로 끝낼 수 있습니다. 총 90시간 분량의 평생 소장 온라인 강의로 프론트엔드 개발자가 되세요.
www.fastcampus.co.kr
'공부 || 정리 > JavaScript' 카테고리의 다른 글
[JavaScript] scope, hoisting (0) | 2021.03.09 |
---|---|
[JavaScript] spread, rest (0) | 2021.03.08 |
[JavaScript] 삼항연산자, Truthy와 Falsy, 단축 평가 논리 계산법 (3) | 2021.03.01 |
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(4) JavaScript - 객체 안에 함수 넣기, 프로토타입과 ES6클래스 (0) | 2021.02.24 |
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(3) JavaScript - 배열 내장함수 shift, pop, push, unshift, reduce (0) | 2021.02.23 |
댓글
이 글 공유하기
다른 글
-
[JavaScript] scope, hoisting
[JavaScript] scope, hoisting
2021.03.09 -
[JavaScript] spread, rest
[JavaScript] spread, rest
2021.03.08 -
[JavaScript] 삼항연산자, Truthy와 Falsy, 단축 평가 논리 계산법
[JavaScript] 삼항연산자, Truthy와 Falsy, 단축 평가 논리 계산법
2021.03.01 -
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(4) JavaScript - 객체 안에 함수 넣기, 프로토타입과 ES6클래스
[패스트캠퍼스] 프론트엔드 인강 환급 챌린지(4) JavaScript - 객체 안에 함수 넣기, 프로토타입과 ES6클래스
2021.02.24
댓글을 사용할 수 없습니다.