&&와 ||는 자바스크립트에서 논리 연산자(Logical Operators)로, 이 두 연산자는 서로 다른 방식으로 조건을 평가하여 값을 반환합니다. 이 두 연산자는 태그드 템플릿 리터럴 뿐만 아니라, 자바스크립트 전체에서 사용되는 논리 연산자입니다.
- || (논리 OR 연산자)
||는 “하나라도 참이면 그 값을 반환”하는 연산자입니다. 두 개의 피연산자 중에서 첫 번째 피연산자가 true로 평가되면 그 값을 반환하고, 첫 번째 값이 false로 평가되면 두 번째 피연산자를 반환합니다.
구체적인 동작:
• 첫 번째 피연산자가 truthy(참으로 평가되는 값)라면 그 값을 반환합니다.
• 첫 번째 피연산자가 falsy(거짓으로 평가되는 값)라면 두 번째 피연산자를 반환합니다.const result = '' || 'default'; // 빈 문자열은 falsy, 따라서 'default' 반환
console.log(result); // 'default'
const result2 = 'value' || 'default'; // 'value'는 truthy, 따라서 'value' 반환
console.log(result2); // 'value'
Styled-components에서 사용 예:
const Input = styled.input background-color: ${(props) => props.bgColor || 'blue'}; // props.bgColor가 존재하면 그 값을 사용하고, 없으면 'blue'를 기본값으로 사용;
- && (논리 AND 연산자)
&&는 “모두 참이어야 마지막 값을 반환”하는 연산자입니다. 두 개의 피연산자가 모두 truthy일 때, 마지막 피연산자를 반환합니다. 첫 번째 피연산자가 falsy면 그 값을 반환하고, 더 이상 평가를 진행하지 않습니다.
구체적인 동작:
• 첫 번째 피연산자가 truthy일 경우 두 번째 피연산자를 반환합니다.
• 첫 번째 피연산자가 falsy일 경우 그 값을 바로 반환하고, 두 번째 피연산자는 평가하지 않습니다.const result = 'value' && 'default'; // 'value'는 truthy, 따라서 'default' 반환
console.log(result); // 'default'
const result2 = '' && 'default'; // ''은 falsy, 따라서 '' 반환
console.log(result2); // ''
Styled-components에서 사용 예:
const Input = styled.input border: ${(props) => props.error && '2px solid red'}; // props.error가 true이면 '2px solid red'를 반환하여 스타일을 적용 // props.error가 false면 아무것도 반환하지 않음 (스타일 적용 안 됨);
차이점 요약
• || (OR): 첫 번째 truthy 값을 반환합니다. 즉, 첫 번째 값이 falsy면 두 번째 값을 반환합니다.
• && (AND): 첫 번째 값이 truthy일 경우 두 번째 값을 반환합니다. 즉, 첫 번째 값이 falsy면 더 이상 평가하지 않고 그 값을 반환합니다.템플릿 리터럴에서의 활용
||를 사용하면 기본값을 설정하는 데 주로 쓰이고,
&&는 조건이 참일 때만 스타일을 적용하거나 특정 값을 반환하는 경우에 사용됩니다.
예시:
// OR (||) 사용
const Button = styled.button background-color: ${(props) => props.bgColor || 'blue'}; // bgColor가 없으면 'blue'를 기본값으로 설정;
// AND (&&) 사용
const Input = styled.input border: ${(props) => props.error && '2px solid red'}; // error가 true일 때만 빨간 테두리를 적용;
따라서, 두 연산자는 상황에 따라 다르게 사용됩니다. 기본값을 설정할 때는 ||를, 조건부 스타일링을 할 때는 &&를 사용하면 됩니다.
