깐깐하게 생각해보는 js 초 기초

정말 기초 부분인데 다시한번 생각해 보려고 글을 남깁니다.

스터디에서 했던 내용인데 제가 했던 스터디 본연의 내용 보단,

깐깐하게 생각해 보자라는 의미로 작성했습니다.

반복문(for)

반복문 많이 쓰실꺼예요.

처음 js 기초를 공부할때 가장 많은 시간을 들이는 것도 이 반복문 입니다.

그리고 어디서나 볼 수 있는 구구단 만들기.

이거 2단 짜리 한번 해보겠습니다. 어느책에서나 거의 꼭 나오는 문제입니다.

<코드>

for( var i=1; i<=9; i++ ) {
    console.log(2 + ' * ' + i + ' = ' + 2 * i);
}

<확인>

그리고 아마 다중 for문을 배웠다면 이런것도 해봤을꺼 같습니다.

2단부터 9단까지 구구단 표현하기 이것도 아마 왠만한 책엔 꼭 있는 문제죠.

<코드>

for( var i=2; i<=9; i++ ) {
    for(var j=1; j<=9; j++) {
        console.log(i + ' * ' + j + ' = ' + i * j);
    }
}

<확인>

그리고 함수를 배웠다면 이걸 이용해서 내가 원하는 단만 출력하게 하는것도 있습니다.

이 예제는 아마 책엔 거의 없고 인터넷에 많이 있을꺼 같네요.

<코드>

function 구구단(dan) {
    for( var i=1; i<=9; i++ ) {
        console.log(dan + ' * ' + i + ' = ' + dan * i);
    }
}
구구단(3);

<확인>

이 예제는 구구단 이라는 함수를 호출할때 3이라는 숫자를 인자로 넘겨주고

구구단 이라는 함수는 넘겨받은 매개변수를 활용해 반복문을 돌립니다.

구구단 하나로도 정말 많은 예제가 있네요 ㅋㅋㅋ

아직 이 구구단이 끝이 아닙니다!

여기서 보시면 무조건 9까지 곱해버리잖아요.

이걸 원하는 숫자까지만 곱셈해서 하는 예제도 있습니다.

<코드>

function 구구단(dan, max) {
    for( var i=1; i<=max; i++ ) {
        console.log(dan + ' * ' + i + ' = ' + dan * i);
    }
};
구구단(7, 5);

<확인>

이건 구구단 이라는 함수를 호출할때 두개의 인자를 전달합니다.

두번째 인자에 있는 5가 구구단을 5단까지 만들죠.

아무 문제 없는 일반적인 예제입니다.

깐깐하게 생각하보기

하지만 개발을 하는 입장이라면

만약 두번째 인자를 호출할때 넣지 않으면 어떻게 될까 그런것도 한번쯤 생각해 보는게 좋습니다.

즉 '만약의 경우' 를 생각해서 코드를 짜는게 좋습니다.

고객사의 요구대로 만들었다가 정말 뜻밖의 이슈로 컴플레인이 걸릴 수 있습니다.

그럴경우 충분히 '만약의 경우'를 꼭 생각하는게 필요합니다.

이 예제는 아마 책에는 안나올듯 합니다.

구구단 함수를 호출할때 두번째 인자를 전달 안했을 경우 입니다.

<코드>

function 구구단(dan, max) {
    for( var i=1; i<=max; i++ ) {
        console.log(dan + ' * ' + i + ' = ' + dan * i);
    }
};
구구단(7);

<확인>

undefined 가 찍혀있죠

저 undefined 는 변수는 선언되었으나 정의되지 않았을 경우에 나온다고 일반적으로 알고 계실꺼예요.

max 라는 변수는 있는데 호출할때 정의를 안해줬으니까요 undefined 가 찍히는 것입니다.

저 코드를 두번째 인수를 전달해 주지 않아도 아무 문제 없이 바꿔봅시다.

<코드>

function 구구단(dan, max) {
    if(max){max}else{max = 9};
    for( var i=1; i<=max; i++ ) {
        console.log(dan + ' * ' + i + ' = ' + dan * i);
    }
};
구구단(7);
구구단(6,3);

<확인>

자 이제 원했던 결과를 출력했습니다.

조건문 if 문을 사용했습니다.

if문의 괄호'( )' 안의 조건이 true 일 때만 '{ }' 안의 내용을 출력하고 아니라면 else 의 '{ }' 내용을 출력합니다.

그런데

이 코드가 뭔가 복잡해 보이지 않나요?

분명 원하는 결과가 나왔고, 이 코드는 아무런 문제가 없습니다.

하지만 뭔가 더 줄일 수 있을꺼 같습니다.

다음의 코드를 실행해 봅니다.

<코드>

function 구구단(dan, max) {
    for( var i=1; i<=(max ? max : 9); i++ ) {
        console.log(dan + ' * ' + i + ' = ' + dan * i);
    }
};
구구단(4);
구구단(8,5);

<확인>

이 코드는 삼항 연산자를 사용하였습니다.

삼항 연산자는 조건에 따라 두 식중 하나의 식을 반환 합니다.

삼항 연산자: https://goo.gl/K3ePiF

확실히 코드가 깔끔해 진듯 합니다. 이런걸 코드 리팩토링 이라고 합니다.

코드 리팩토링 이란 외부동작을 바꾸지 않으면서 내부동작을 개선하는 방법 입니다.

코드 리팩토링: http://codereview.tistory.com/3

이 구구단 코드는 코드 리팩토링 하고는 거리가 있지만 한번 더 생각해서 코드를 짜는

'깐깐한 생각'이 필요할듯 합니다.

이렇게 까지 해야해?

잘 되면 된거 아냐?

이런 생각은 현재에 머물 수 밖에 없습니다.