[TIL / JavaScript] 연산자 (3)

논리 연산자

---

• 논리 연산자(Logical Operator)는 우항과 좌항의 피연산자를 논리 연산한다.

// 논리합(||) 연산자
true || true   // true
true || false  // true
false || true  // true
false || false // false

// 논리곱(&&) 연산자
true && true   // true
true && false  // false
false && true  // false
false && false // false

// 논리 부정(!) 연산자
!true  // false
!false // true

• 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 만약 피연산자가 불리언 값이 아니면 암묵적 타입 변환된다.
• 논리합(||) 연산자와 논리곱(&&) 연산자의 연산 결과는 불리언 값이 아닐 수도 있다.

단축 평가

• 단축 평가(Short-circuit Evaluation)는 왼쪽에서 오른쪽으로 진행되는 논리 연산에서 결과를 얻게 되는 순간 평가를 중단하고 값을 반환하는 것을 말한다.

// 단축 평가
'Cat' && 'Dog' // “Dog”

논리곱 연산자에서는 두번째 피연산자까지 평가해보아야 표현식을 평가할 수 있기 때문에 'Dog'이 반환된다.

'Cat' || 'Dog' // 'Cat'

논리합 연산자에서는 피연산자 중 하나만 true로 평가되어도 표현식을 평가할 수 있기 때문에 'Cat'이 반환된다.

// 논리합(||) 연산자
'Cat' || 'Dog'  // 'Cat'
false || 'Dog'  // 'Dog'
'Cat' || false  // 'Cat'

// 논리곱(&&) 연산자
'Cat' && 'Dog'  // Dog
false && 'Dog'  // false
'Cat' && false  // false

• 단축 평가를 사용하면 null, undefined과 관련된 문제를 예방할 수 있다.

const obj = null; const myName = obj.name; // TypeError

null로 선언된 변수의 프로퍼티를 참조하려고 해서 타입에러가 발생하고 있다.

&& 연산자의 단축 평가를 사용하면 이러한 에러를 예방할 수 있다.

const obj = null; const myName = obj && obj.name; // 에러가 발생하지 않는다. 
console.log(myName); // null

1) obj가 null이면 false로 평가되므로 바로 왼쪽 값인 obj(null)이 할당된다.

2) obj가 null이 아니면 true로 평가되므로 오른쪽의 obj.name 값을 참조한다.

• 함수 매개변수의 기본값을 설정할 수 있다.

function getName(name){ 
		const yourName = name; 
		return yourName; 
}

getName() 함수 호출 시 name 파라미터에 인수를 전달하지 않았으므로 undefined가 내부적으로 할당된다. → undefined 값을 다른 곳에서 참조할 경우 문제의 소지가 될 수 있다.

|| 연산자의 단축 평가를 사용하면 매개변수의 기본값을 설정할 수 있다.

function getName(name){ 
		const yourName = name || "무명";
		return yourName; 
};

1) 매개변수 name에 값이 할당된다면 true로 평가되므로 name값을 사용한다.

2) name을 할당하지 않는 경우 name에 undefined가 할당되어 false로 평가 되므로 || 연산자 오른쪽의 "무명"을 사용한다.

• if문으로 변수에 값을 할당하는 코드를 단축 평가로 대체할 수 있다.

if문으로 변숫값을 할당하는 코드이다.

let condition = true; 
let result = ''; 

if (condition) result = '참'; 

console.log(result); // '참'

단축 평가로 변숫값을 할당하는 코드이다.

let condition = true; 
let result = ''; 

result = condition && '참'; // if문 대신, 단축평가 사용 
console.log(result); // '참'

1) condition 값이 true이면, 오른쪽의 '참'이 반환되어 할당된다.

2) condition 값이 false이면, 왼쪽(false) 값이 그대로 반환되어 false가 할당된다.

쉼표 연산자

---

• 쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 연산자의 값을 반환한다.

var x, y, z;
x = 1, y = 2, z = 3; // 3

• 단일 표현식을 요구하는 곳에 복수의 표현식을 사용하고 싶을 때 사용한다.

그룹 연산자

---

• 그룹 ((…))연산자는 그룹 내의 표현식을 최우선으로 평가한다.

10 * 2 + 3   // 23
10 * (2 + 3) // 50

typeof 연산자

---

• typeof 연산자는 피연산자의 데이터 타입을 7가지 문자열로 반환한다.
• "null"을 반환하는 경우는 없으며 함수의 경우 “function”을 반환한다.

typeof ''              // "string"
typeof 1               // "number"
typeof NaN             // "number"
typeof true            // "boolean"
typeof undefined       // "undefined"
typeof Symbol()        // "symbol"
typeof null            // "object"
typeof []              // "object"
typeof {}              // "object"
typeof new Date()      // "object"
typeof /test/gi        // "object"
typeof function () {}  // "function"

• null 값을 연산하면 null이 아닌 "object"를 반환한다. 따라서 null 타입을 확인할 때는 일치 연산자(===)를 사용한다.

typeof null  // "object"

var foo = null;
console.log(foo === null);        // true

• 선언하지 않은 식별자를 typeof 연산자로 연산하면 ReferenceError가 발생하지 않고 “undefined”를 반환한다.

typeof undeclared  // "undefined"

P.S.

배운 내용은 점점 많아지지만, 아직 실제로 적용할 수 있는 요소를 배우지 않아서 조금 지루한 감이 있다😒 특히, 활용 예시를 보면 아직 모르는 부분이 많아서 답답하다😣 배운 것들을 활용할 수 있는 새로운 내용을 빨리 접하고 싶다!!🔥

참고 문서

---

• 연산자 by PoiemaWeb
• 타입 변환과 단축 평가 by PoiemaWeb
• 논리연산자(&&, ||) 단축평가 by 카레유 카레유