[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. | 패스트캠퍼스