그럼에도 불구하고

👨‍💻

[CleanCode] 경계 다루기 본문

JavaScript/Clean code

[CleanCode] 경계 다루기

zenghyun 2023. 5. 25. 18:22

오늘은 경계를 다루는 법에 대해 알아보겠습니다!

 

목차

     

    [ 경계 다루기 ]

    1. 명확하게 최소와 최댓값을 다룬다.

     

    2. 최솟값과 최댓값 포함 여부를 확실하게 결정한다. (이상-초과 / 이하-미만) 

     

    3. 혹은 네이밍에 최솟값과 최댓값 포함 여부를 표현한다. 

     

    4. 누가봐도 명시적인 코드를 작성하자 

     

    

    아래의 예시를 보겠습니다.

     

    1
    2
    3
    4
    5
    6
    const getRandomNumber = (min, max) => {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };
     
     
    console.log(getRandomNumber(1,45));
    cs

     

    이 코드의 경우 매개변수로 최솟값과 최댓값을 넣어주면 그 사이에서 무작위로 숫자를 선정해 주는 함수입니다. 

     

    min 값과 max 값을 직접적으로 숫자를 기입해서 적는 방식은 여러 가지 단점이 있습니다. 

     

    첫 번째로 만약 min과 max가 바뀐다면, 직접 숫자를 바꿔야 합니다.  

     

    두 번째로 이 함수를 여러 곳에서 사용한다면 사용하는 곳마다 찾아가서 min과 max를 바꿔줘야 합니다. 

     

    이런 작업은 상당히 귀찮고 불편합니다.

     

    다음과 같이 작성해보는건 어떨까요?

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const getRandomNumber = (min, max) => {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };
     
    // 상수
    const MIN_NUMBER_LIMIT = 1
    const MAX_NUMBER_LIMIT = 45
     
    console.log(getRandomNumber(MIN_NUMBER_LIMIT, MAX_NUMBER_LIMIT));
    cs

     

    최솟값과 최댓값을 상수로 지정함으로 인해 많은 이점이 생겼습니다. 

     

    첫 번째로 최소값과 최댓값이 변경된다면 상수에 지정한 값만 바꾸면 됩니다. 이 함수를 많은 곳에서 사용한다면 일일이 바꿀 필요가 없습니다.

     

    두 번째로 함수의 매개변수에 직접적으로 네이밍 한 상수 값이 들어가면서 보다 명시적인 코드로 보입니다. 

     

     

    [ Begin - End ]

     

    1
    2
    3
    4
    5
    6
    7
    8
    // Begin - End 
     
    const reservationDate = (beginDate, endDate) => {
        // ...some code
    };
     
     
    reservationDate('2023-01-01''2023-05-31');
    cs

     

    위의 코드와 같이 여행일정을 관리해 주는 reservationDate라는 함수가 있다고 가정해 봅시다.

     

    이 함수에는 2개의 인자가 들어가는데 beginDateendDate가 있습니다. 인자의 이름을 시작과 끝이라는 네이밍을 해줌으로써 보다 직관적인 값을 필요로 하는 것을 알 수 있습니다.

     

    예를 들어 2개의 인자를 date1, date2라고 적어놓은 것보다는 훨씬 보기 좋은 것처럼요 

     

     

    [ First - Last ]

    1. First와 Last 모두 포함된 양 끝을 의미한다.

     

    2. ~~부터 ~~ 까지

     

    3. 양 끝점이 존재하나 그 안의 규칙이 보장되지는 않는다.

     

    아래의 예시를 보겠습니다.

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const students = ['정현''존''피터''지민'];
     
    const getNumberOfStudents = (first, last) => {
       // ... some code
       const firstIndex = students.findIndex(index => index === first);
       const lastIndex = students.findIndex(index => index === last);
     
       return (lastIndex - firstIndex  + 1 );
    };
     
    console.log( getNumberOfStudents('정현''지민') );
    cs

     

    getNumberOfStudents에 첫 번째 인자와 두 번째 인자에 학생 이름을 넣게 되면 자신을 포함한 두 학생 사이의 총 학생 수를 알려주고 있습니다.

     

     

    [ 유지보수에 취약한 함수를 만들지 않기 위한 방법  ]

     

    아래의 예시를 보겠습니다.

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const getAvg = ( math, english, science, society ) => {
    // ... some code
    };
     
    const MATH = 90;
    const ENGLISH = 80;
    const SCIENCE = 95;
    const SOCIETY = 85;
     
    console.log(getAvg( MATH, ENGLISH, SCIENCE, SOCIETY ));
    cs

     

    math, english, science, society 4개의 과목 점수를 입력하면 평균을 구해주는 함수가 있다고 가정해 봅시다. 

     

    매개변수에 일일이 점수를 넣는 것보다는 아래와 같이 점수를 객체에 담아서 넘기는 방법은 어떨까요? 

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const getAvg = (score) => {
      const { MATH, ENGLISH, SCIENCE, SOCIETY } = score;
      // ... some code
    };
     
    const MATH = 90;
    const ENGLISH = 80;
    const SCIENCE = 95;
    const SOCIETY = 85;
     
    const score = { MATH, ENGLISH, SCIENCE, SOCIETY };
     
    console.log(getAvg(score));
     
    cs

     

    📌 유지보수에 취약한 함수를 만들지 않기 위한 방법

    1. 매개변수를 2개가 넘지 않도록 만든다.

    2. arguments, rest parameter를 고려한다.

    3. 매개변수를 객체에 담아서 넘긴다.

    4. 랩핑 하는 함수를 만든다. 

     

     

    'JavaScript > Clean code' 카테고리의 다른 글

    [CleanCode] 배열 다루기  (0) 2023.06.01
    [CleanCode] 분기다루기  (0) 2023.05.30
    [CleanCode] isNaN? is Not A Number?  (0) 2023.05.24
    [CleanCode] undefined와 null의 차이  (0) 2023.05.24
    [CleanCode] 타입 검사  (0) 2023.05.24
    Comments