자바스크립트 Java script(조건문) 총정리

노션으로 작성해서 복사. 

 

Java Script(조건문)

조건문

조건문의 구조는 다음과 같다.

if (true) {
  console.log('This message will print!'); 
}
// Prints: This message will print!

괄호 안에는 참, 거짓이 결과인 조건이 들어가고(그 자체가 들어가도 됨) 참이 들어가면 중괄호 안의 내용을 실행 시키고, 거짓이라면 실행하지 않는다.

else 문 예시

if (false) {
  console.log('The code in this block will not run.');
} else {
  console.log('But the code in this block will!');
}
 
// Prints: But the code in this block will!

비교연산자

• 작다: <
• 크다: >
• 이하: <=
• 이상: >=
• 같은지 : ===
• 다른지: !==

참고 ( === 과 ==의 차이) : 요약하자면, ===는 엄격한 비교로 타입과 값이 다 같아야하고 / ==는 조금 느슨한 비교로 타입이 다르면 타입을 변경해서 비교를 시도한다. 그 과정에서 false , 0, “” 등이 falsy value라는 것을 알게 된다.

• Triple Equals is superior to double equals. Whenever possible, you should use triple equals to test equality. By testing the type and value you can be sure that you are always executing a true equality test.

---

논리연산자

• the and operator (&&)
• the or operator (||)
• the not operator, otherwise known as the bang operator (!)
  • neagate 연산자의 경우에는 입력값을 반대로 출력함 . !true —> false 가됨

let mood = 'sleepy';
let tirednessLevel = 6;

if (mood==='sleepy' || tirednessLevel>8) {
  console.log('time to sleep');
} else {
  console.log('not bed time yet');
}

//time to sleep(or 연산자일 때는)

Truthy and Falsy

참고 : Truthy와 Falsy에 대한 이해

let myVariable = 'I Exist!';
 
if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
}

위 예시의 코드는 실행이 된다. myVariable에 들어가 있는 값이 Truthy 값이기 때문이다.

비-falsy 값들은 모두 truthy가 된다. 위 두 링크에 들어가 있는 내용이긴 하지만, 다시 옮겨보면 총 6가지의 falsy 값이 있는데 그들을 제외하면 모두 truthy라고 생각하면 된다.

Falsy 값

• 0
• Empty strings like "" or ''
• null which represent when there is no value at all
• undefined which represent when a declared variable lacks a value
• NaN, or Not a Number

활용 예시

let wordCount = 1;

if (wordCount) {
  console.log("Great! You've started your work!");
} else {
  console.log('Better get to work!');
}

let favoritePhrase = '';

if (favoritePhrase) {
  console.log("This string doesn't seem to be empty.");
} else {
  console.log('This string is definitely empty.');
}

/*출력 
Great! You've started your work!
This string is definitely empty.*/

Truthy / Falsy assignment

let username = '';
let defaultName;
 
if (username) {
  defaultName = username;
} else {
  defaultName = 'Stranger';
}
 
console.log(defaultName); // Prints: Stranger

아래의 예도 같은 역할을 한다. 이 부분은 이해가 잘 안되어 추가학습 요망 . Short-circuit evaluation이라고 불린다.(링크참조)

let username = '';
let defaultName = username || 'Stranger';
 
console.log(defaultName); // Prints: Stranger

let tool = 'marker'; //이부분을 ''로 바꾸면 결과는 The pen is migitier~ 로바뀜. 

// Use short circuit evaluation to assign  writingUtensil variable below:
let writingUtensil = tool||'pen';

console.log(`The ${writingUtensil} is mightier than the sword.`);

• 추가 예시 for Short-circuti evaluationA&&B 일 때, A가 truthy하면 B가 실행 / A가 falsy 하면 A실행
• A || B 는 만약 A 가 Truthy 할경우 결과는 A 가 됩니다. 반면, A 가 Falsy 하다면 결과는 B 가 됩니다.
• console.log(true && 'hello'); // hello console.log(false && 'hello'); // false console.log('hello' && 'bye'); // bye console.log(null && 'hello'); // null console.log(undefined && 'hello'); // undefined console.log('' && 'hello'); // '' console.log(0 && 'hello'); // 0 console.log(1 && 'hello'); // hello console.log(1 && 1); // 1

삼항연산자 Ternary Operator

참고링크

아래와 같은 코드가

let isNightTime = true;
 
if (isNightTime) {
  console.log('Turn on the lights!');
} else {
  console.log('Turn off the lights!');
}

이렇게 바뀐다.

isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');

Else if 문

복수의 조건문이 필요할 때 사용, if 뒤에 오고 마지막은 늘 else로 해야함 . 아래는 예시

let groceryItem = 'papaya';
 
if (groceryItem === 'tomato') {
  console.log('Tomatoes are $0.49');
} else if (groceryItem === 'papaya'){
  console.log('Papayas are $1.29');
} else {
  console.log('Invalid item');
}

Switch 문

위의 else if 문을 switch 문으로 변환하면 다음과 같다.

기본 문법은

switch( 표현 ) {
	case 비교 : //참 혹은 거짓 반환 참이면 실행 거짓이면 넘어감
		실행문;
		break; 
	  .
		.
		.
	default : //default로 끝냄 
		실행문;
		break; 
}

let groceryItem = 'papaya';
 
switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
}
 
// Prints 'Papayas are $1.29'

---

리뷰

• An if statement checks a condition and will execute a task if that condition evaluates to true.
• if 문은 조건이 맞는지 체크한 후 값이 true이면 코드를 실행한다
• if…esle 문은 이진법 결정(binary decisions)을 만들고 주어진 조건하에 다른 코드 블럭들을 실행한다.
• else if를 이용하여 다른 조건들을 더 추가할 수 있다.
• 비교연산자들 ( <, >, <=, >=, ===, and !== ) 은 두 값을 비교할 수있다.
• 논리연산자&& and는 두 값이 모두 참인지(truthy 한지)를 체크한다.
• 논리연산자|| or은 두 값 중 하나가 참인지(truthy 한지)를 체크한다.
• 부정연산자(bang operator) !는 truthiness 와 falsiness를 각각 반대로 바꾼다.
• 3항 연산자는 if…else 문의 축약형이다. 조건문? 참일때 : 거짓일때 ;식으로 쓴다.
• switch 구문은 여러개의 else if 문을 축약할 때 사용할 수있다. break 키워드가 남은 case 문들의 실행을 막는다.

---