[JavaScript] 연산자 && (AND), || (OR) 사용법

 

자바스크립트를 쓰다보면 && , || 와 같은 AND, OR 연산자를 많이 보게 되는데, 

어떤 경우에는 해당 변수의 유무에 대해서도 쓰고, 조건문의 참, 거짓으로도 사용한다.

 

이 연산자를 사용하면 어떤 경우에는 조건문을 대체 할 수 있기 때문에 유용하다.

나도 이전에는 삼항연산자 또는 if else 문으로 썼던 코드를 많이 줄일 수 있게 되었다.

 

이쯤에서 내가 해당 연산자를 제대로 쓰고 있는지 확인하고자 &&, || 연산자에 대해서 정리하고자 한다.

 

 

 

1. 함수 인자를 통한 변수 초기화 ( || 연산자)

function documentTitle(theTitle) {
	if (!theTitle) { theTitle = "Untitled Document"; 
    } 
}

 

위의 코드는 함수를 통해 인자를 전달 받아  theTitle 변수에 인자의 값을 할당해주는 것이다.

하지만 인자가 없을 경우를 위해 이런 식으로 많이 if문을 통해 사용할 것이다.

이러한 처리를 할 때는 아래와 같이 이용해보자.

 

function documentTitle(theTitle) {
  theTitle  = theTitle || "Untitled Document";
}

documentTitle("title") // theTitle = "title"
documentTitle()        // theTitle = "Untitled Document";

 

자바스크립트에서는 논리 OR 연산자 ||를 활용할 수 있다.

위 코드 경우 documentTitle("title") 호출 시에는 인자에 "title" 이 존재하므로 변수에 할당된다.

document() 호출 시에는 인자에 아무런 값이 없기에 || 연산자를 통해 오른쪽에 설정해놓은 값으로 할당되게 된다.

 

없을 때 설정할 값을 아래와 같이 함수를 통해 대입해도 가능하다.

function a() { 
	return "11"; 
} 

function documentTitle(theTitle) { 
	theTitle = theTitle || a(); 
    console.log(theTitle) 
} 

documentTitle(); // theTitle = "11"

 

 

2. if문 조건 (&& 연산자)

function isAdult(age) { 
  if (age && age > 17) { 
    return true; 
  } 
  else { 
    return false; 
  } 
}

 

위 코드는 전달 인자가 존재하고, 또한 17보다 크면 true를 반환,

그렇지 않다면, false를 반환하는 함수이다.

위와 같이 특정 함수의 return을 boolean 형태로 만들어 사용할 때,

if, else문을 통해 많이 사용할 것이다.

자바스크립트는 한 줄이면 가능하다.

 

function isAdult(age) {
   return age && age > 17 ;
}



isAdult(16) // false

isAdult(18) // true

isAdult()   // false

 

 

자바스크립트에서는 조건문이 없더라도 && 연산자를 활용하면,

조건에 따라 boolean 형태로 값을 내려준다.

필요 시 위와 같이 사용하자. 훨씬 간결해진다.

 

이번엔 ||, &&를 같이 활용해보자.

1번 2번을 이해했다면 큰 문제없다.

 

function logIn(name) { 
	console.log('login'); 
} 

function signUp() { 
	console.log('signUp'); 
} 

function enter(userName) { 
	if (userName) { 
    	logIn(userName); 
    } else { 
        signUp(); 
    }
}

enter('lee'); // console.log('login');

 

 

위 코드는 userName이 있을 경우 logIn 함수를 호출하고 그렇지 않다면, singUp 함수를 호출한다.

아래와 같이 enter 함수를 바꿔보자.

 

function enter(userName) { 
	userName && logIn(userName) || signUp (); 
}

 

 

하나 더 보자.

 

function check(userName) { 
	var userID; 
	if (userName && userName.loggedIn) { 
    	userID = userName.id; 
    } 
    else { 
    	userID = null; 
    } 
    console.log(userID); 
} 

check({'loggedIn': true, 'id': 'lee'}); // lee

 

 

 

위 코드는 userName이 있고, userName.loggedIn이  있을 시 userName의 id를 userID에 할당한다. 

 

아래와 같이 바꿔보자.

 

function check(userName) { 
	var userID = userName && userName.loggedIn && userName.id 
}

 

||, && 연산자를 활용하면 코드를 보다시피 훨씬 간결하게 만들 수 있다.

하지만 너무 과도하게 사용하면 가독성에 안 좋을 수 있다.

출처: 
https://mygumi.tistory.com/33

http://javascriptissexy.com/12-simple-yet-powerful-javascript-tips/