자바스크립트 강의 EP_18 | 연산자(Operator)2 (논리) | ES6+ 최신 문법 | DOM API | BOM API

자바스크립트의 논리 연산자에는 어떤 종류가 있으며, 각각의 특징은 무엇인가요?

자바스크립트의 논리 연산자는 크게 and, or, not 세 가지 가 있습니다. and 연산은 두 피연산자가 모두 true일 때만 true를 반환하고, or 연산은 피연산자 중 하나라도 true이면 true를 반환하며, not 연산은 피연산자의 논리값을 반대로 바꿉니다

자바스크립트 논리 연산의 '단축 평가'란 무엇인가요?

단축 평가는 and 연산에서 앞의 값이 false이면 뒤의 값을 평가하지 않고 바로 false를 반환하거나, or 연산에서 앞의 값이 true이면 뒤의 값을 평가하지 않고 바로 true를 반환하는 최적화 기법입니다

자바스크립트의 논리 연산자(AND, OR, NOT)를 실제 코드 예시와 함께 깊이 있게 다루는 강의입니다. 단순히 문법을 넘어, null, undefined, 빈 문자열 등 '거짓 같은 값(falsy value)'을 활용하여 로그인 유효성 검사 같은 실용적인 기능을 구현하는 방법을 배울 수 있습니다. 특히, 단축 평가(Short-circuit evaluation) 원리를 이해하고 이를 활용해 불필요한 연산을 줄여 코드 효율성을 높이는 노하우는 개발 생산성을 크게 향상시킬 것입니다. 복잡한 조건문을 간결하게 표현하는 삼항 연산자까지 익혀, 더욱 견고하고 효율적인 자바스크립트 코드를 작성하고 싶은 개발자에게 강력히 추천합니다.

1. 논리 연산자 개요 및 종류

1. 논리 연산자의 정의: 두 개의 논리값을 연산하여 true 또는 false를 반환하는 연산이다.
2. 자바스크립트의 특징:
   1. 다른 프로그래밍 언어와 달리 피연산자가 불리언 타입이 아니어도 논리 연산이 가능하다.
   2. null, 0, 빈 문자열, undefined, NaN과 같은 값들을 false로 인지하고, 값이 있는 것들을 true로 인지하기 때문이다.
3. 논리 연산자의 종류: 크게 세 가지가 있다.
   1. AND 연산 (&&): 피연산자가 모두 true일 때만 true를 반환하며, 그 외에는 false를 반환한다.
   2. OR 연산 (||): 피연산자 중 하나라도 true이면 true를 반환하며, 그 외에는 false를 반환한다.
   3. NOT 연산 (!): 피연산자의 논리값을 반대로 바꾼다 (예: false를 true로, true를 false로).

2. 논리 연산자 실습

2.1. AND 연산 (&&) 실습

1. 모두 true인 경우: x = true, y = true일 때 x && y는 true를 반환한다.
2. 하나라도 false인 경우:
   1. x = true, y = false일 때 x && y는 false를 반환한다.
   2. x = false, y = true일 때 x && y는 false를 반환한다.
3. 결론: AND 연산은 모든 피연산자가 true일 때만 true를 반환하고, 그 외에는 false를 반환한다.

2.2. OR 연산 (||) 실습

1. 표기법: 두 개의 바(||)를 사용하여 OR 연산을 수행한다.
2. 하나라도 true인 경우:
   1. x = true, y = true일 때 x || y는 true를 반환한다.
   2. x = true, y = false일 때 x || y는 true를 반환한다.
3. 모두 false인 경우: x = false, y = false일 때 x || y는 false를 반환한다.
4. 결론: OR 연산은 피연산자 중 하나라도 true이면 true를 반환하고, 둘 다 false일 때만 false를 반환한다.

2.3. NOT 연산 (!) 실습

1. 표기법: 느낌표(!)를 사용하여 NOT 연산을 수행한다.
2. 논리값 반전:
   1. x = false일 때 !x는 true를 반환한다.
   2. x = true일 때 !x는 false를 반환한다.
3. 결론: NOT 연산은 피연산자의 논리값을 반대로 반환한다.

3. 논리 연산자를 활용한 로그인 유효성 검사 구현

3.1. 로그인 폼 구성 및 요소 가져오기

1. HTML 폼 구성:
   1. 이메일 입력 필드 (type="text", name="email", id="email")
   2. 비밀번호 입력 필드 (type="text", name="password", id="password")
   3. 로그인 버튼 (type="button", id="btn", 텍스트 "로그인")
   4. 각 입력 필드와 레이블을 div 태그로 감싸서 구조화한다.
2. JavaScript에서 DOM 요소 가져오기:
   1. 버튼 요소 가져오기: document.querySelector('#btn')을 사용하여 btn 변수에 할당한다.
   2. defer 속성 추가: index.html의 <script> 태그에 defer 속성을 추가하여 DOM 로드 후 스크립트가 실행되도록 한다.
   3. 이메일 및 비밀번호 입력 필드 값 가져오기: document.querySelector('[name="email"]').value와 document.querySelector('[name="password"]').value를 사용하여 각각 email과 password 변수에 할당한다.
3. 이벤트 리스너 추가: btn.addEventListener('click', function() { ... })를 사용하여 버튼 클릭 시 유효성 검사 로직을 실행한다.

3.2. 이메일 유효성 검사

1. 빈 값 검사:
   1. 이메일 값이 공백 문자열("")일 경우 false로 간주된다.
   2. if (!email) 조건문을 사용하여 이메일이 비어있을 때 "이메일을 입력해 주세요" 메시지를 출력한다.
   3. 이메일이 입력되어 있으면 "로그인 성공" 메시지를 출력한다.
2. 특정 문자열 포함 여부 검사 (골뱅이 '@'):
   1. includes() 함수를 사용하여 특정 문자열이 포함되어 있는지 확인할 수 있다.
   2. email.includes('@')는 이메일 문자열에 @가 포함되어 있으면 true, 없으면 false를 반환한다.
3. 종합적인 이메일 유효성 검사 로직:
   1. if (!email || !email.includes('@')) 조건문을 사용한다.
   2. 이메일이 빈 값이거나 (!email) 또는 이메일에 @가 포함되어 있지 않다면 (!email.includes('@')), "이메일을 입력해 주세요" 또는 "이메일이 유효하지 않습니다" 메시지를 출력한다.
   3. 두 조건 모두 false일 때 (즉, 이메일이 비어있지 않고 @를 포함할 때) "로그인 성공" 메시지를 출력한다.

3.3. 비밀번호 유효성 검사

1. 빈 값 검사 (NOT 연산 활용):
   1. 빈 문자열("")은 false로 간주되므로, !password는 비밀번호가 비어있을 때 true를 반환한다.
   2. if (!password) 조건문을 사용하여 비밀번호가 비어있을 때 "비밀번호를 입력해 주세요" 메시지를 출력한다.
2. 비밀번호 길이 검사:
   1. 비밀번호 길이가 8자 이상 16자 이하인지 확인하는 조건을 추가한다.
   2. if (password.length < 8 || password.length > 16) 조건문을 사용하여 길이가 유효하지 않을 때 "비밀번호는 8자에서 16자 이내여야 합니다" 메시지를 출력한다.
   3. 길이가 유효하면 "로그인 성공" 메시지를 출력한다.
3. 논리 연산의 복합적 사용: 이메일과 비밀번호의 여러 유효성 조건을 &&와 || 연산자를 조합하여 복잡한 유효성 검사 로직을 구현할 수 있다.

4. 단축 평가 (Short-circuit evaluation)

1. 정의: 논리 연산에서 연산의 결과를 결정하는 데 필요한 최소한의 피연산자만 평가하는 것을 의미한다.
2. AND 연산에서의 단축 평가:
   1. AND 연산(&&)은 모든 피연산자가 true여야 true를 반환한다.
   2. 만약 첫 번째 피연산자가 false라면, 뒤의 피연산자를 평가할 필요 없이 전체 결과는 무조건 false가 된다.
   3. 첫 번째 피연산자가 true일 경우에만 두 번째 피연산자를 평가한다.
3. OR 연산에서의 단축 평가:
   1. OR 연산(||)은 하나라도 true이면 true를 반환한다.
   2. 만약 첫 번째 피연산자가 true라면, 뒤의 피연산자를 평가할 필요 없이 전체 결과는 무조건 true가 된다.
4. 단축 평가의 활용 및 효율성:
   1. 복잡한 로직의 효율적 처리: 데이터베이스 검사(validateEmail 함수)와 같이 시간이 오래 걸리는 복잡한 로직이 있다면, 간단한 유효성 검사(예: 빈 값 체크)를 먼저 수행하여 단축 평가를 통해 불필요한 복잡한 로직 실행을 피할 수 있다.
   2. null 또는 undefined 오류 방지:
      1. password.length와 같이 객체의 속성에 접근할 때, password가 null이나 undefined이면 에러가 발생할 수 있다.
      2. password && password.length --- 8과 같이 password의 존재 여부를 먼저 확인하는 조건을 앞에 두면, password가 null이나 undefined일 경우 단축 평가에 의해 password.length 접근이 실행되지 않아 에러를 방지할 수 있다.
      3. 만약 password.length --- 8 && password와 같이 순서를 바꾸면, password가 null일 때 password.length가 먼저 평가되어 에러가 발생한다.

5. 삼항 연산자 (Ternary Operator)

1. 정의: 조건식의 결과(true 또는 false)에 따라 두 개의 값 중 하나를 반환하는 연산자이다.
2. 사용법: 조건식 ? 값1 : 값2
   1. 조건식이 true이면 값1을 반환한다.
   2. 조건식이 false이면 값2를 반환한다.
3. 활용 예시 (홀짝 판별):
   1. 일반적인 if-else 문으로 홀짝을 판별하는 경우:

```javascript let number = 10; let message; if (number % 2 --- 1) { message = "홀수입니다"; } else { message = "짝수입니다"; } console.log(message); // "짝수입니다" ```

1. 삼항 연산자를 사용하여 간결하게 표현:

```javascript let number = 10; let message = (number % 2 --- 1) ? "홀수입니다" : "짝수입니다"; console.log(message); // "짝수입니다" ```

1. number가 7일 경우 number % 2 --- 1은 true이므로 "홀수입니다"가 출력된다.
2. 장점: 복잡한 if-else 문을 한 줄로 줄여 코드를 간결하게 만들 수 있다.

6. 연산자 총정리

1. 문자열 병합 연산자 (+):
   1. + 기호를 통해 문자를 병합할 수 있다.
   2. 숫자와 문자를 결합할 때는 숫자가 문자로 타입 변환되어 연결된다.
2. 산술 연산자: 사칙연산(+, -, *, /)과 나머지 연산(%)을 포함한다.
3. 증감 연산자 (++, --):
   1. 값을 하나씩 증가시키거나 감소시킨다.
   2. 연산자 표시가 변수 앞에 있으면 먼저 연산하고 명령문을 나중에 수행하며, 뒤에 있으면 명령문을 먼저 수행하고 마지막에 연산한다.
4. 비교 연산자:
   1. 두 값을 비교하여 true 또는 false를 반환한다.
   2. 값과 데이터 타입까지 엄격하게 비교하는 --- (같냐)와 !== (같지 않냐) 사용을 권장한다.
5. 할당 연산자 (=, +=, -= 등):
   1. 값을 변수에 할당한다.
   2. +=와 같이 연산과 할당을 동시에 하는 단축 표현도 있다.
6. 논리 연산자 (&&, ||, !):
   1. 두 개의 논리값을 비교하여 true 또는 false를 반환한다.
   2. AND (&&): 모두 true일 때만 true, 하나라도 false이면 false이다.
   3. OR (||): 하나라도 true이면 true, 둘 다 false일 때만 false이다.
   4. NOT (!): 논리값을 반대로 바꾼다.
   5. 단축 평가: 논리 연산 시 필요한 최소한의 피연산자만 평가하여 효율성을 높인다.
7. 삼항 연산자 (? :): if 문을 줄여서 표현할 수 있는 조건부 연산자이다.

자바스크립트 강의 EP_19 | 함수(Function) | ES6+ 최신 문법 | DOM API | BOM API 바로가기

자바스크립트 강의 EP_19 | 함수(Function) | ES6+ 최신 문법 | DOM API | BOM API - 하나이프 블로그