[공부 필기] JavaScript 문법 공부 12일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/ifelse

if와 '?'를 사용한 조건 처리

 

✅ if문

let age = 10;

if (age < 20)
	console.log("미성년자");
else if (age < 50)
	console.log("아직 청춘...?")
else
	console.log("제2의 인생을 시작");

 

✅ 불린형으로 변환

- 숫자 0, 빈 문자열 "", null, undefined, NaN은 불린형으로 변환 시 모두 false

- 아래의 경우는?

   ► 빈문자열을 제외한 모든 문자열은 true이기 때문에 실행된다.

if ("0") {
	console.log("?");
}

 

 

✅ 조건부 연산자 ?

- 예시

let age = 70;

if (age < 20)
	console.log("미성년");
else
	console.log("셩년")

- 이 값을 아래와 같이 조건부 연산자 물음표(?)로 변형

let age = 70;

console.log((age < 20) ? "미성년" : "성년");

- 삼항연산자라고 부르기도 한다.

 

 

✅ 다중 ?

- 물음표 연산자(?)를 여러 개 연결하여 복수의 조건을 처리할 수도 있다.

- 위에서 봤던 예시를 변형해보자.

let age = 10;

if (age < 20)
	console.log("미성년자");
else if (age < 50)
	console.log("아직 청춘...?")
else
	console.log("제2의 인생을 시작");

let age = 10;

console.log((age < 20) ? "미성년" : (age < 50) ? "아직 청춘...?" : "제 2의 인생을 시작");

 

✅ 부적절한 ?

- 물음표 연산자(?)를 if 대용으로 사용하는 경우가 종종있다. (바로 위의 예시들 같은 경우)

- 코드가 짧아진다는 장점은 있지만, 가독성이 떨어진다는 단점이 있다.

- 물음표 연산자는 본래 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다.

- 따라서 이러한 목적에 부합하게 사용하는 것이 적절하다.

- 예시

let age = 60;
let isSenior = (age > 50) ? "시니어" : "주니어";

console.log(isSenior);

- 사실 이 코드도 더 깔끔하게 작성할 수 있다. (아래와 같이)

let age = 60;
let isSenior = age > 50;

console.log(isSenior);

 

► 조건부 연산자(?)를 사용하면서 줄바꿈으로 가독성 높이기

- 들여쓰기 예시

let massage = (login == '직원') ? '안녕하세요.' : 
	(login == '임원') ? '환영합니다.' : 
	(login == '') ? '로그인이 필요합니다.' : 
	'';

 

 

---

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/logical-operators

논리 연산자

 

 

✅ 논리 연산자

- || (OR)

- && (AND)

- ! (NOT)

 

✅ OR 연산자 (||)

- 아래와 같은 코드가 있다면 어떤 순서로 수행될까

result = 3 || "Hello" || false; // result = 3;

   ► 가장 왼쪽 피연산자(=3)부터 시작해서 오른쪽으로 나아가며 피연산자를 평가한다.

   ► 각 피연산자를 불린형(boolean)으로 변환한다.
       변환 후의 그 값이 true이면 연산을 멈추고, 해당 피연산자의 변환 전 원래의 값을 반환한다.

       # 3은 빈 문자열이 아니기 때문에 true

       # true이기 때문에 3을 반환한다.

   ► 모든 피연산자를 평가했는데, 모두 false로 평가됐다면 마지막 피연산자를 반환한다.

       # 불린형으로 값이 반환되는게 아니다.

 

- 예시1. 두번째 값("Hello")이 가장 처음으로 등장한 true일 때

"use strict";

let result;
result = 0 || "Hello" || true; // result = "Hello";

- 예시2. 모든 값이 false

"use strict";

let result;
result = 0 || "" || false; // result = false;

- 활용1. 변수/표현식으로 구성된 목록에서 첫번째 truthy 얻기

let yourName = prompt("Your name", "");
let yourAge = +prompt("Your age", "");
let yourCity = prompt("Your city", "");

if ((yourName || yourAge || yourCity || "None") === "None") {
	alert("적어도 1개 이상의 값을 입력해주세요.");
}

- 활용2. 단락 평가

   ► 왼쪽의 표현식이 false일 때, 명령어를 실행하고 싶다면 아래와 같이 사용할 수도 있다.

   ► true를 만나면 멈추기 때문에 가능한 방법

/* let yourName = prompt("Your name", "");
let yourAge = +prompt("Your age", "");
let yourCity = prompt("Your city", ""); */

yourName || console.log("name이 입력되지 않음");
yourAge || console.log("age가 입력되지 않음");
yourCity || console.log("city가 입력되지 않음");

 

✅ AND 연산자 (&&)

- AND 연산자(&&)는 다음과 같이 동작한다.

let result = 0 && false && "Hello World!";

   ► 가장 왼쪽 피연산자(= 0)부터 시작해서 오른쪽으로 나아가며 피연산자를 평가한다.

   ► 각 피연산자는 불린형(boolean)으로 변환된다.

       변환 후 값이 false이면 평가를 멈추고, 해당 피연산자의 변환 전 원래 값을 반환한다.

   ► 피연산자가 모두 평가 됐는데, 모두 true이라면 마지막 피연산자가 반환된다.

 

- 예시1. 두번째 값(= false)이 가장 처음으로 등장한 false일 때

let result = "0" && false && "Hello World!";

console.log(result); // result = false;

- 예시2. 모두 true일 때

let result = "0" && true && "Hello World!";

console.log(result); // result = "Hello World!";

 

※ 주의사항1

- 높은 우선순위 : ! > && > ||

- 따라서 NOT 연산자(!)가 가장 먼저 적용된다.

 

※ 주의사항2

- AND 연산자(&&)를 if문 대체용으로 사용하지 말 것

let result = 1;

(result > 0) && console.log("result의 값이 0보다 작거나 같다!");
// if (result > 0) console.log("result의 값이 0보다 작거나 같다!");

- 실행이 안되는 것은 아닌데, 가독성이 떨어지고 연산자의 목적에 맞게 사용한 코드가 아니라고 한다.

- 가독성과 문법(연산자)의 목적에 맞게 사용하기 위해서 if문을 대체하여 사용하지 말라고 한다..