1. retrun문
함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환하는 것
1) 조건문을 줄때 중첩된 if문을 쓴다면
function 함수명() {
if (조건문) {
if (조건문) {
... }
}
}
이렇게 쓰는경우가 있는대 가독성이 떨어지고 복잡해 보인다.
2) 이럴때 처음부터 조건에 맞지 않을 경우 리턴 시켜버리면 중첩은 줄어들고 가독성은 올라간다.
function 함수명() {
if(조건문1) return;
if (조건문2) {
... }
}
조건문1에 맞지않으므로 2를 타지 않고 종료해 버린다.
중복된 조건이 있다면 조건식과 반대되는 경우 return을 선언하고
그다음 필요한 조건을 작성하면 된다.
자바스크립트 function 안에선 return 이라는 키워드를 만나면 return 밑에 있는 코드는 더이상 실행되지 않는다.
그래서 else가 필요없는 경우에는 return문으로 종료 시킬 수 있다.
2. 리턴문이 2가지
삼항연산자를 이용하여 좀더 짧게 줄일 수 있다.
function 함수명() {
if(조건문1) return (조건문3) ? 1 : 0;
if (조건문2) {
... }
}
조건문1이 맞지않으면 종료시키는것인대 조건문3에 따라서 return할 값을 삼항 연산자로 작성한 것이다.
3. if문이 너무 많다면 논리 연산자로 대체하기
논리 연산자 ||(OR), &&(AND), !(NOT)
참고: https://ko.javascript.info/logical-operators
4.반복문에 if문이 있는 경우에는 break
break 문은 반복문에서 break 문이 있는 현재 위치를 감싸고있는 반복문을 빠져나가기위해 사용한다.
하지만 break문은 label이 있다면 해당 label을 종료하고 빠져나갑니다.
return, break를 사용하면 else를 없앨 수 있다.
++continue문을 만나면 더 이상 해당 조건 상태의 구문을 진행하지 않고 다음 조건으로 이동하게 된다.
5. switch문
if문에서 조건문의 검사할변수가 같을때 그럴땐 유용하게 스위치 문을 사용할 수 있다.
이 스위치 문을 쓸때 return 값이 같은 경우 줄일 수 있다.
switch (조건문변수) {
case "케이스1":
return ['리턴값1'];
case "케이스2":
case "케이스3":
case "케이스4":
return ['리턴값1','리턴값2'];
default:
return [];
}
switch (검사할변수){} 이렇게 작성할 때
비교할 케이스를 적어주고 return 값을 적어주면 된다.
그런대 위의 코드처럼 케이스2,3,4가 값이 같다면 return을 마지막에만 적어주면 된다.
6.return문과 break문의 차이(feat.continue)
return = 함수를 종료함
break = 식을 종료함 <-> continue
7.리액트에서 자주 쓰는 조건문
https://codingapple.com/unit/react-if-else-patterns-enum-switch-case/
리액트에서 자주쓰는 if문 작성패턴 5개 - 코딩애플 온라인 강좌
(리액트 강좌 전체 메뉴) 딱히 설명할 부분이 없어서 글로 진행합니다. 지금까지 JSX 이용해서 html을 작성하고 있는데 if문을 써서 조건부로 html을 보여주고 싶을 때가 매우 많습니다. 지금까지는
codingapple.com
++ 현업에서 코드리뷰를 통해서 간결하게 쓰는 방법을 이해하며 사용하기 시작했다.
++ 코드는 다른 사람이 봤을때 이해하기 쉽고 추후 유지보수가 쉽게 짜는 사람이 잘하는 사람이라고 했다.
++ 퍼블리셔때는 돌아만가는 코드를 짰는데 프론트엔드가 된 이후로는 조금더 간결하고 정확하게 짜기 위해 노력하고 있다. 더군다나 코드리뷰라는 것은 나를 발전하게 해줘서 너무 좋은 거 같다. 😊
'JS & jQuery' 카테고리의 다른 글
Canvas Roulette (0) | 2023.04.20 |
---|---|
ES5 VS ES6 (0) | 2023.04.05 |
select 선택시 input 활성화 & 비활성화 (0) | 2022.09.02 |
배열 (1) | 2022.08.28 |
let, const 변수 (0) | 2022.08.28 |