Study/Frontend_study

패스트캠퍼스 환급챌린지 39일차 미션 (3월 10일) : 프론트엔드개발 강의 후기

ramiiiiii 2024. 3. 10. 11:41

오늘의 목표

05. 삼항 연산자

06. 조건문 If Else

 

끄어 마지막 주말이다..

불태워서 공부해보자아아

 

 

우선, 삼항 연산자가 뭐지? 했다.

 

삼항 연산자(ternary operator)

조건 (삼항) 연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자다.

앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치됩니다. 해당 연산자는 if...else문의 대체재로 빈번히 사용된다.

 

 

 

const a = 1 < 2   /*비교연산자 >> true 예상됨*/

 

if (a) {

console. log('참')

}else{

console. log('거짓')

}

 

 

⬆️

위의 코드를 더 단순하게 쓸 수 있다! 바로 삼항 연산자를 사용해서!

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

console. log( a ? '참' : '거짓' )

 

말그대로 항이 3개가 있는 거다!

 

해석을 하자면,

두가지 방법으로 해석할 수 있다

1) 해석

? 가 a 일 때 그 값이 true 이면, 콜론 기호의 앞부분을 실행하게 되겠고, 그 값이 false 이면, 콜론 기호 뒷부분을 실행하면 된다.

 

2) 해석

a 라는 값이 false 니? true 니? 라고 물음표로 물었을 때, 뒤쪽에 있는 값 중에 true 면 첫번째 실행!, false 면 콜론 기호 뒤쪽에 두번째 실행!

 

오.. 삼항 연산자는 if문 보다 더 간단하네.. 코드를 줄이는 거도 5줄에서 1줄이 되었구만... 신기하당ㅎㅎㅎ

 

 

 

조건문 If Else

우선, js 파일을 하나 따로 생성해서

getRandom.js 파일을 만들고 그 안에 이렇게 기록한다.

export default function random() {

    return

}

를 쓰고, 내보내려는 값이 무엇인지 간단하게 콘솔 창에서 직접 코딩해서 나오는 값 중에 Math.random() * 10 이라고 입력되어있는 걸 지우고, 그 자리에 Math.floor(여기)에 기존 값을 넣는다. 내림!(수학에서 배운 올림 내림의 그 내림이다.!

 

Math.floor( Math.random() * 10 )

 

이렇게 하고 출력해보면 정수만 랜덤하게 출력이 되는 것을 확인할 수 있다.

 

이건 테스트고 이제 본격적으로~!

main.js 에 들어가서

 

import random from './getRandom' /* 아까 만들어서 입력해둔 './getRandom'파일을 불러오고 */

 

console a = random()

 

if(a === 0){

console.log('a is 0')

} else if (a === 2) {

console. log('a is 2')

} else if (a === 4) {

console. log('a is 4')

} else {

console. log('rest...')

}

 

첫번째가 맞으면 그 다음은 모두 무시되고, 첫번째가 틀리면 그다음으로 넘어가고~ 이런 방식의 반복이다!

 

 

실행할 내용이 1개면, if 조건문만 사용하면 됨

실행할 내용이 2개면, if 조건문이랑 else 조건을 사용하면 됨

실행할 내용이 3개면, if 조건문이랑 else 조건 그리고 else if 조건문까지 사용하면 됨

 

끝-!

 

아니 생각보다 이 식도 익숙해지면 또 너무너무 재밌을 거 같다.

수학 식이 딱딱 그 값에 맞게 떨어지는 게 나오면 나는 너무 행복하다.ㅎㅎㅎ

이럴 줄 알았으면 옛날에 수학 포기하지 말아볼껄 ㅎㅎㅎㅎ

나 수학 좋아하네 ㅎㅎㅎ

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

 

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr