[Javascript] && 연산자로 조건문 단축시키기

2025. 5. 16. 09:00Javascript/Javascript

728x90
반응형


&& 연산자의 조건문 표현


자바스크립트의 AND 연산자(&&)는 양쪽 피연산자가 모두 true일 때 true를 반환하고 그렇지 않을 때에는 false를 반환한다. 이러한 특성을 이용하여 자바스크립트의 if문을 한 줄로 단축시킬 수 있다.

if (num !== 0) {
  console.log('num is not zero');
}

num !== 0 && console.log('num is not zero'); // if를 없애고 && 연산자로 한 줄로 단축

num === 0 || console.log('num is not zero'); // || OR 연산자로도 가능하다. 이 때는 첫 번째 식이 false일 때만 다음 식이 실행됨




&& 연산자와 소괄호 표현


그런데 console.log()와 같은 함수 호출이 아닌 연산식 코드가 있을 경우 위와 같이 단축시켜버리면 에러가 발생한다.

이때는 소괄호를 써서 표현식을 코드 실행식으로 처리해야 한다.

let x = 1;
if(x==1) {
	x=10;
}
console.log(x); // 10

let x = 1;
x==1 && (x=10); // 단축
console.log(x); // 10


만약 여러 줄일 경우 콤마 연산자와 결합하면 여러 줄을 한 줄로 한 방에 표현할 수 있다.

let x = 10, y, z;

if(x==10) {
    y = 100;
    z = x ** y;
    z++;
    x = z;
}

console.log(x); // 1e+100

let x = 10, y, z;

x==10 && (y = 100, z = x ** y, z++, x = z)

console.log(x); // 1e+100


이와 같이 && 연산자를 이용하여 if문을 단축시키는 방법은 코드를 간결하게 만들 수는 있지만 몇몇 개발자들은 오히려 익숙하지 않은 문법으로 인해 가독성이 떨어진다고 하여 이견이 많다. 따라서 코드의 간결함만을 추구하기보다는 코드의 의미를 명확하게 전달할 수 있도록 작성하는 것이 중요하다.





728x90
반응형

'Javascript > Javascript' 카테고리의 다른 글

[Javascript] ECMAScript 2015(ES6)+ (2)  (3) 2025.05.20
[Javascript] ECMAScript 2015(ES6)+ (1)  (3) 2025.05.19
[Javascript] Scope  (1) 2025.05.15
[Javascript] 함수를 반환하는 함수  (1) 2025.05.14
[Javascript] 조건문 활용하기  (0) 2025.05.12