07-06 회고록

👨‍💻회고 일기장/🙈멋쟁이사자처럼 회고

07-06 회고록

se'o 2023. 8. 7. 20:26

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

☀️ 'else if ' 로 복수 조건 처리하기

조건문(Info)

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year < 2015) {
  alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  alert( '숫자를 좀 더 내려보세요.' );
} else {
  alert( '정답입니다!' );
}

조건 year < 2015를 먼저 확인합니다. 이 조건이 거짓이라면 다음 조건 year > 2015를 확인합니다. 이 조건 또한 거짓이라면 else 절 내의 alert를 실행합니다.

→ else if 블록을 더 많이 붙이는 것도 가능하다. 마지막에 붙는 else는 필수가 아닌 선택 사항입니다.

🍃 조건부 연산자 ‘?’ (= 삼항 연산자)

let result = condition ? value1 : value2;

? : 조건부 연산자, 삼항 연산자

condition 결과가 참 → value1 내뱉고 , 거짓 → value2 내뱉습니다. 내뱉어진 결과가 result에 들어갑니다.

let result = ( a + b < 4 ) ? '미만' : '이상';

value1 : value2 부분에 특수하게 값을 반환 받고 싶을 때는 자신이 받고 싶은 데이터를 작성할 수 있습니다. ⬆️

삼항연산자 값이 반환된다.

let accessAllowed = (age > 18) ? true : false;

// 동일하게 동작함 (조건부 연산자 생략)
let accessAllowed = age > 18;

비교 연산자 자체가 true나 false를 반환하기 때문에 결과 값이 true, false인 경우

조건부 연산자를 사용하지 않아도 됩니다.

🍃 OO식과 OO문의 차이

문 : 실행은 하지만 값을 내뱉지 않습니다.. { 중괄호로 열고 닫는 형태 }

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

식 : 값을 내뱉습니다..

let accessAllowed = (age > 18) ? true : false;

🍃 다중 ‘?’

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

     : 조건 1, 조건 2, 조건 3

첫 번째 물음표에선 조건문 age < 3을 검사합니다.
그 결과가 참이면 '아기야 안녕?'를 반환합니다. 그렇지 않다면 첫 번째 콜론 ":"에 이어지는 조건문 age < 18을 검사합니다.
그 결과가 참이면 '안녕!'를 반환합니다. 그렇지 않다면 다음 콜론 ":"에 이어지는 조건문 age < 100을 검사합니다.
그 결과가 참이면 '환영합니다!'를 반환합니다. 그렇지 않다면 마지막 콜론 ":" 이후의 표현식인 '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'를 반환합니다.

→ 조건 많을수록 가독성이 좋지 않아서 삼항식을 쓰는 건 손해입니다!

if-else문 쓰는걸 권장합니다.

⬇️ if-else문으로 변경

if (age < 3) {
  message = '아기야 안녕?';
} else if (age < 18) {
  message = '안녕!';
} else if (age < 100) {
  message = '환영합니다!';
} else {
  message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
}

→ if-else문으로 변경한 결과 입니다. 가독성이 훨씬 좋아진걸 느낄 수 있습니다.

🍃 부적절한 ‘?’

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');

→ 삼항식을 비교했을 때 튀어나오는 값을 변수에 안 담고 조건 비교 용으로만 사용하는 건 부적절합니다.

if (company == 'Netscape') {
  alert('정답입니다!');
} else {
  alert('오답입니다!');
}

→ 이렇게 if-else문으로 쓰는 것이 더 적절한 방법입니다.

🍃 조건문 실습

let result = prompt('자바스크립트의 공식 이름은 무엇일까요?','').toLowerCase();

if(result === 'ecmascript'){
    console.log('정답입니다!');
} else {
    console.log('모르셨나요?');
}

prompt(a, b); : 값을 받는다. (a : 메세지, b : 입력 기본 값)

.toLowerCase(); : 사용자가 받는 모든 값을 소문자로 바꿔주는 메써드

.toUpperCase(); : 사용자가 받는 모든 값을 대문자로 바꿔주는 메써드

대/소문자로 바꿔준 이유는 === 를 써서 대/소문자가 달라도 다른 문자로 인식하기 때문입니다.

// 영화 봤니?
let didWatchMovie = confirm('너 엘리멘탈 영화 봤니?'); // 확인: true (봤어), false (안봤어)
 
if(!didWatchMovie){ // 안봤어에 대한 대답 / 취소 누르면 바로 끝
  let goingToWatchMovie = confirm('영화 볼거니?');  
  
  if(goingToWatchMovie){
    let withWho = prompt('누구랑 볼거니?','');

    if(withWho === '여자친구'){
      console.log('zzz');
    }else if(withWho === '가족'){
      console.log('화목하네');
    }else{
      console.log('재밌게보구와~~~~');
    }
  }

}else{ // 봤어에 대한 대답
  let alone = confirm('너 혼자 봤니?');
  
  if(alone){
    let didCry = confirm('너 울었니..?');

    if(didCry){
      console.log('너..찌질했네..');

    }else{
      console.log('너 T야?');
    }
  }
}

// 봤어에 대한 대답을 else 에 적어놓았기 때문에
// 대답을 맞춰주려고 부정연산자인 ! 를 사용해주었다.

confirm() : 사용자가 ‘확인’ 누르면 true, ‘취소’ 누르면 false를 반환합니다.

☀️ 논리 연산자 (Info)

논리 연산자(Logical Operator) 종류 : ||(OR), &&(AND), !(NOT)

🍃 OR 연산자 ||

기능 1. 비교하는 OR 연산자 ‘||’

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

👆a, b 둘 중 하나라도 참이면 이면 true 를 반환하고 둘 다 거짓이면 false 를 반환합니다.

 조건문을 따질 때 많이 씁니다.

기능 2. 첫 번째 truthy를 찾는 OR 연산자 ‘||’ 🌟🌟🌟🌟

result = value1 || value2 || value3;

// value1 = 0, value2 = 'a', value3 = '' 으로 가정했을 때

result = 0 || 'a' || ""
         f     t     f

→ 불린형으로 변환하면 순서대로 false, true, false 가 되어서

가장 먼저 만난 true인 value2의 실행값 ‘a’ 가 나오게 됩니다.

let whichTruthy = false || '' || [2,3].length || {this_is_truthy:true};
                //  f       f      2라서 true       true지만 무시당함

									                                        // 2

→ 세 값이 모두 false일 경우에는 마지막 값을 반환합니다.

→ true 값을 찾을 시 그 다음 value 는 검사하지 않습니다.

기능 3. 단락 평가하는 OR 연산자 ‘||’

true || alert("not printed");
false || alert("printed");

// 예시
1 + 2 > 3 || alert("not printed");   // true  라서 실행되지 x
1 + 2 < 3 || alert("printed");       // false 라서 실행됨

→ 조건문처럼 사용 가능합니다.

→ 앞의 값이 true 면 그 값을 출력하고 실행을 멈추기 때문에 그 뒤 value 값은 무시합니다.

🍃 AND 연산자 &&

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

👆두 피연산자가 모두가 참일 때 true반환, 그 외 false 반환.

기능) 첫 번째 falsy를 찾는 AND 연산자 &&’ 🌟🌟🌟🌟

result = value1 && value2 && value3;

alert( 1 && 2 && null && 3 ); // null
       t    t     f     무시

→ 첫 번째로 찾은 false값의 형 변환 전 기존 값을 반환합니다.

→ 첫 번째 false를 찾으면 뒤의 연산은 무시합니다.

let whichFalsy = true && ' ' && [] && {this_is_falsy: false};
              //   t      t     t              t
              // 빈 배열[], 빈 객체{}는 true

				      // {this_is_falsy: false}

→ 모든 값이 true일 경우 마지막 값을 반환합니다.

💁나만의 암기법(?)

너 T 야? || → 첫 번째 true 를 찾는다

너 F 야? && → 첫 번째 false 를 찾는다

🍃 NOT 연산자 !

value = true;

result = !value;    // 부정
result = !!value;   // 긍정

! → (NOT) !! → 긍정

alert( alert(1) || 2 || alert(3) );

alert() : 경고창을 띄우는 기능. alert는 실행하면 alert 창에 값을 출력하고 무조건 undefined를 반환합니다.

→ alert(1)을 통해 alert 창에는 1을 찍고 undefined를 반환해 false이므로 계속 연산 진행합니다.

2는 true이므로 truthy를 찾아서 연산을 멈추게 됩니다.

앞서 alert(1)에서 찍은 1과 2를 같이 찍어 최종적으로 1 2가 차례대로 출력 됩니다.

☀️ Switch 문 (Info)

복수의 if 조건문을 간결하게 쓰기 위해 나온 문으로 변수를 비교한다는 점은 if문과 동일합니다.

🍃 Switch 문 기본 형식

switch (key) {
    case value:
        
        break;

    default:
        break;
}

break → 케이스가 끝나면 break를 꼭 걸어줘야 합니다. 첫 번째 케이스 실행하고 나서 break가 없으면 모든 case를 다 출력하게 됩니다.

default → if문의 else와 같은 역할로, 이도저도 아닌 나머지 영역을 다 받습니다.

case문이 다 false이면 실행되는 코드로, default문은 break가 없어도 됩니다.

default문 자체는 옵션이기 때문에 안쓰고 생략해도 됩니다.

🍃 Switch 문 → if 문

const MORNING    = '아침',
      LUNCH      = '점심',
      DINNER     = '저녁',
      NIGHT      = '밤',
      LATE_NIGHT = '심야',
      DAWN       = '새벽';

let thisTime = MORNING;

switch (thisTime) {
  case MORNING:console.log('줌을 켠다.');break;
  case LUNCH:console.log('밥먹는 시간을 쪼개서 복습을 한다.');break;
  case DINNER:console.log('저녁을 먹지 않고 복습을 한다.');break;
  case NIGHT:console.log('유튜브를 보지 않고 이듬 영상강의 하나를 더 본다.');break;
  case LATE_NIGHT:
  case DAWN:console.log('잠을 자면서 다음 수업 내용을 꿈꾼다.');break;
}

if(thisTime === MORNING){
  console.log('줌을 켠다.')
}else if(thisTime === LUNCH){
  console.log('밥먹는 시간을 쪼개서 복습을 한다.')
}else if(thisTime === LATE_NIGHT || thisTime === DAWN){
  console.log('잠을 자면서 다음 수업 내용을 꿈꾼다.')
}

🍃 if문 vs switch문

if (){
}else if {
}else{
}

switch (){
	case:
	case:
}

💡 if 문과 switch 문의 차이점

if 문

첫 번째 조건을 먼저 확인합니다.

이 조건이 거짓이라면 다음 조건을 확인합니다.

이 조건 또한 거짓이라면 else 절을 실행합니다.⇒ 👀모든 연산을 진행한다.

switch 문

처음부터 조건에 맞는 case 를 찾아 실행합니다.

→ 다른 연산을 할 필요가 없어서 if문보다 연산 속도가 빨라💨 조건이 많아지면 switch 문을 사용한다.

🍃 Switch문에서의 형 변환

let a = "1";
let b = 0;

switch (+a) {
  case b + 1: // === b + 1 이랑 같은 의미
    alert("표현식 +a는 1, 표현식 b+1는 1이므로 이 코드가 실행됩니다.");
    break;

  default:
    alert("이 코드는 실행되지 않습니다.");
}

switch(+a) : a 값인 문자열 1을 숫자로 변경합니다.

switch(a)일 경우에는 defualt가 출력됩니다.

스위치 케이스는 형 변환을 직접 만들어 줘야 합니다.

자료형이 중요하다 형 변환 중요 합니다❗

🍃 여러 개의 “case”문 묶기

let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}

🍃 랜덤 요일을 출력하는 함수

함수 : 코드 재사용성을 높이기 위해 사용한다. 리턴을 만나는 순간 함수가 종료된다.

const day = Math.floor(Math.random() * 7);

function getDay(dayValue){
    switch (dayValue) {
        case 0 : return '일';
        case 1 : return '월';
        case 2 : return '화';
        case 3 : return '수';
        case 4 : return '목';
        case 5 : return '금';
        case 6 : return '토';
    }
}

getDay(day);

🐣Math.random() → 0~1(1은 미포함) 구간에서 부동소수점의 난수를 생성합니다.

🐤Math.random() * 7 → 0부터 6까지의 랜덤한 수 생성합니다.

🐥Math.floor() 모든 소수점을 내림 처리하는 숫자형 내장 매서드입니다.

🍃 주말인지 아닌지 확인해주는 isWeekend 함수

if문으로 작성 ⬇️

function isWeekend(dayValue){
    const today = getDay(getRandom(dayValue));

    if ( today === '토' || today === '일'){
        return true;
    }else{
        return false;
    }
}

if문 → 삼항 연산자로 바꾸기 ⬇️

function isWeekend(dayValue){
	const today = getDay(getRandom(dayValue));
	console.log( today );
   return today.includes('토') ? ('토요일') : today.includes('일') ? '일요일' : '평일'
}

→ 함수 안에 함수 값을 내뱉는 return이 없으면 undefined가 반환 됩니다.

→ return을 쓰면 break;를 작성할 필요가 없습니다.❌

함수는 리턴을 만나는 순간 함수를 종료해버리기 때문입니다.❗

🍃 **nullish 병합 연산자 '??' (Info)

nullish : 확실하게 null 이거나 undefined 일 때

‘??’와 ‘||’ 차이점

| || | 첫번째 truthy 값을 반환 | 불리언으로 판단 | | --- | --- | --- | | ?? | 정의 ( defined ) 된 값을 반환 | 사용자 정의 값으로 판단 |

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

alert(height || 100);

→ 0을 불리언 값으로 판단해보면 false이기 때문에 height 값은 무시하고 뒤의 값인 100이 출력됩니다.

alert(height ?? 100);

→ 0은 “정의된” 값이기 때문에 height의 값 0을 반환합니다.

let emailAddress = 0;
let receivedEmailAddress;

if (emailAddress === undefined || emailAddress === null) {
  receivedEmailAddress = 'user@company.io';
} else {
  receivedEmailAddress = emailAddress;
}

// ??
receivedEmailAddress = emailAddress ?? 'user@company.io';

3항 연산자를 사용한 식으로 변경

receivedEmailAddress = ( emailAddress === undefined || emailAddress === null ) ? 'user@company.io' : emailAddress;

        //  () 안의 둘 중 하나라도 true 가 나오면 첫번째:'user@company.io'를 사용하고, 아니면

nullish 병합 연산자를 사용한 식으로 변경

receivedEmailAddress = emailAddress ?? 'user@company.io';
receivedEmailAddress = emailAddress || 'user@company.io';

console.log( receivedEmailAddress );

→ 두 개의 결과값이 똑같음

빈 문자, 0 을 입력

?? : 빈 문자, 0 그대로 출력 , 사용자가 의도해서 넣었다고 생각하기 때문

|| : 불린형으로 변형 → false 값이 되어 뒤에 있는 값이 출력됨

const WIDTH = '10px';
const boolean = false;

console.log(null || WIDTH);         // 10px
console.log(null ?? WIDTH);         // 10px

console.log(undefined || WIDTH);    // 10px
console.log(undefined ?? WIDTH);    // 10px

console.log(boolean || WIDTH);      // 10px
console.log(boolean ?? WIDTH);      // false

console.log('' || WIDTH);           // 10px
console.log('' ?? WIDTH);           // ''

빈 문자, 빈 배열도 정의된 값입니다.

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

정의된 값을 기준으로 정의된 값을 반환

null, undefined 는 정의된 값이 아닙니다 ❗

그래서 height, width 는 정의되지 않았기 때문에 100 과 50이 각각 반환되어 계산하면 5000.

T || : 먼저나오는 truthy를 찾는다, 아니면 끝을 반환 F && : 먼저나오는 falsy를 찾는다, 아니면 끝을 반환 확 ?? : 먼저나오는 확정 값을 찾는다, 아니면 끝을 반환

🍃 Logical Assignment Operators (’||=’ ‘&&=’ ‘??=’)

// Logical Assignment Operators (최신문법)
let x = 0;
let y = 1;

x ||= y; // x = x || y; x가 false일 때 y값을 x에 할당 // 1
x &&= y; // x = x && y; x가 true일 때 y값을 x에 할당 // 0
x ??= y; // x 가 undefined, null 일 때 y 값을 x 에 할당

☀️ 반복문 (Info)

🍃 While 반복문

→ 몇 번 반복할 건지 변수를 while문 밖에 선언해줘야 합니다.

→ “문” : 값을 내뱉지 않고 중괄호로 둘러 쌓여있습니다.

→ 갱신 값이 존재해야 합니다.(ex. repeat ++;)

→ 본문이 한 줄이면 중괄호를 생략할 수 있습니다.

let repeat = 0;

while(repeat < 10){
		// 본문(body)
    console.log(repeat)
    repeat++; // 이거 없으면 무한루프에 빠지게 됨
}

// 0 이 들어와서 비교를 한다
// 10보다 작으면 찍고 증가하고 또 다시 앞으로 들어가서
// 10보다 작으면 찍고 증가하고를 계속 반복

순방향

const frontEndDev = [
  'HTML',
  'CSS',
  'SVG',
  'JavaScript',
  'jQuery',
  'React',
  'Redux',
];

let i = 0;
  while(i < frontEndDev.length){
    let value = frontEndDev[i];
    console.log( value );
    i++;
  }

// i 가 배열의 길이보다 작을 때 까지만 반복
// frontEndDev[i] 값을 직접 console 에 안넣고 변수에 따로 담아서 넣는게 좋음

배열.length → 배열 아이템의 총 개수를 출력합니다.

배열[n] → 배열의 n 번째 접근

역방향 : 성능을 고려하면 역방향을 쓰는 것이 좋습니다.

// while 문 (역순환 : 역방향)

let l = frontEndDev.length - 1;

while(l >= 0){
  // --l;
  // let value = frontEndDev[l];
  // console.log(frontEndDev[]);

  l--
}

// l 값은 7, 7번째꺼가 없어서 맨 첫번째값은 undefined
// undefined 값을 없애주려고 length - 1 을 해줌

🍃 배열의 깊은 복사 → slice(), spread syntax

while(copyArray.length){
  
	//console.log(copyArray.pop());//뒤에서 부터 값 제거
  console.log( copyArray.shift() );//앞에서 부터 값 제거
}

pop 과 shift 를 사용하면 배열 자체에서 값을 떼서 가져오기 때문에 원본 배열을 파괴합니다.

let copyArray = frontEndDev.slice();            // 옛날 방식
let copyArray = [... frontEndDev];              // 새로운 방식

옛날 방식 → 배열의 메서드인 slice() 활용

           frontEndDev 배열의 값들을 통으로 slice 해서 copyArray에 넣는다.

새로운 방식 → spread syntax([…]) 활용

🍃 do-while 반복문

→ 최초 한 번은 무조건 실행, 그 이후에 조건이 참이면 똑같이 반복, 조건이 거짓이면 실행하지 않습니다.

let i = 100;

do{
  console.log(i);
  i++;
}while(i<10)

→ 조건이 바로 거짓이므로 최초 실행한 값 100만 출력됩니다.

💯한줄평

각 조건문들의 특징들을 이해하고 완벽하게 코드를 작성할 수 있는 그날까지 연습🐣

'👨‍💻회고 일기장 > 🙈멋쟁이사자처럼 회고' 카테고리의 다른 글

07-11 회고록 (9)	2023.08.28
07-10 회고록 (0)	2023.08.24
07-07 회고록 (1)	2023.08.21
07-05 회고록 (1)	2023.07.13
23-07-04 회고록 (0)	2023.07.07

현재글07-06 회고록

빼곡히 채울 프론트엔드 일기장

꼼꼼하고 의사소통을 잘하는 FE개발자가 목표입니다.

Today :
Yesterday :

빼곡히 채울 프론트엔드 일기장

07-06 회고록

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

☀️ 'else if ' 로 복수 조건 처리하기

조건문(Info)

🍃 조건부 연산자 ‘?’ (= 삼항 연산자)

🍃 OO식과 OO문의 차이

🍃 다중 ‘?’

🍃 부적절한 ‘?’

🍃 조건문 실습

☀️ 논리 연산자 (Info)

🍃 OR 연산자 ||

🍃 AND 연산자 &&

🍃 NOT 연산자 !

☀️ Switch 문 (Info)

🍃 Switch 문 기본 형식

🍃 Switch 문 → if 문

🍃 if문 vs switch문

🍃 Switch문에서의 형 변환

🍃 여러 개의 “case”문 묶기

🍃 랜덤 요일을 출력하는 함수

🍃 주말인지 아닌지 확인해주는 isWeekend 함수

🍃 **nullish 병합 연산자 '??' (Info)

🍃 Logical Assignment Operators (’||=’ ‘&&=’ ‘??=’)

☀️ 반복문 (Info)

🍃 While 반복문

🍃 do-while 반복문

💯한줄평

'👨‍💻회고 일기장 > 🙈멋쟁이사자처럼 회고' 카테고리의 다른 글

'👨‍💻회고 일기장/🙈멋쟁이사자처럼 회고'의 다른글

티스토리툴바

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

07-06 회고록

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

☀️ 'else if ' 로 복수 조건 처리하기

조건문(Info)

🍃 조건부 연산자 ‘?’ (= 삼항 연산자)

🍃 OO식과 OO문의 차이

🍃 다중 ‘?’

🍃 부적절한 ‘?’

🍃 조건문 실습

☀️ 논리 연산자 (Info)

🍃 OR 연산자 ||

🍃 AND 연산자 &&

🍃 NOT 연산자 !

☀️ Switch 문 (Info)

🍃 Switch 문 기본 형식

🍃 Switch 문 → if 문

🍃 if문 vs switch문

🍃 Switch문에서의 형 변환

🍃 여러 개의 “case”문 묶기

🍃 랜덤 요일을 출력하는 함수

🍃 주말인지 아닌지 확인해주는 isWeekend 함수

🍃 **nullish 병합 연산자 '??' (Info)

🍃 Logical Assignment Operators (’||=’ ‘&&=’ ‘??=’)

☀️ 반복문 (Info)

🍃 While 반복문

🍃 do-while 반복문

💯한줄평

'👨‍💻회고 일기장 > 🙈멋쟁이사자처럼 회고' 카테고리의 다른 글

'👨‍💻회고 일기장/🙈멋쟁이사자처럼 회고'의 다른글

관련글

티스토리툴바