[Javascript] || 와 && 를 이용한 라인 줄이기

Posted by 열정보이
2019. 7. 9. 21:17 Javascript

 

Javascript 는 || 과 && 이용하여 코드 라인 수를 줄일 수 있다.

이게 무슨말일까?

 

바로 코드를 보도록 하자.

 

    <script>
        function printStr (str){
            var s = str;
            if(s == null || s == ''){
                s = '널 값 입니다.';
            }
            console.log(s);
        }

        var str = '';
        printStr(str);
    </script>

 

입력 값을 받았을 때, null 값일 경우 '널 값입니다.' 를 출력하는 기본적인 함수이다.

|| 를 사용하여 라인수를 줄여보자.

 

    <script>
        function printStr (str){
            var s = str || '널 값 입니다.';
            console.log(s);
        }

        var str = '';
        printStr(str);
    </script>

 

if문을 없앨 수 있다는 것만으로도 좀 더 깔끔해 보인다.

Javascript 에서 || 는 앞에 오는 값이 null , '' , 0 , undefined 일 경우 || 뒤에 오는 값을 반환한다. 반대로 앞에 값이 위에 나열된 값이 아닐 경우 || 앞에 오는 값을 반환한다.

 

 

&&의 경우를 보자.

 

    <script>
        function printStr (userVal){
            var userId;
            if(userVal != null && userVal.name != null){
                userId = userVal.name;
            }else{
                userId = 'No Name';
            }
            console.log("userId : " + userId);
        }
        var userId = {};
        printStr(userId);
    </script>

 

위 코드를 && 를 이용해보자.

 

    <script>
        function printStr (userVal){
            var userId = userVal && userVal.name;
            console.log("userId : " + userId);
        }
        var userId = {name : 'No Name'};
        printStr(userId);
    </script>

 

이해를 위해 userId 객체에 name 프로퍼티를 추가해줬다.

&&는 앞에 오는 값이 참일 경우 뒤에 값을, 앞에 오는 값이 거짓일 경우 앞에 값을 반환해준다.

즉, 여기서 거짓이라는 말은 undefined, '', null, 0 을 말한다.

 

개인적인 생각으로는 && 보다는 || 를 더 많이 유용하게 사용하는 것 같다.

'Javascript' 카테고리의 다른 글

[Javascript] new와 생성자 함수  (0) 2019.07.14
[Javascript] call 과 apply를 이용한 바인딩  (0) 2019.07.12
[Javascript] 헷갈리는 === 과 ==  (0) 2019.07.09
Javascript에서의 this part 2  (0) 2019.07.01
Javascript에서의 this  (0) 2019.04.20