본문 바로가기
Study/Frontend_study

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

by ramiiiiii 2024. 3. 10.

오늘의 목표

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