Early return pattern

Sseul·2024년 6월 28일

자바스크립트

목록 보기
4/6
post-thumbnail

🎉 오늘 한 일

☑️ 타입스크립트 스탠다드 복습

💡 새로 알게 된 것

얼리 리얼 패턴(Early real pattern)

얼리 리턴 패턴(Early return pattern)이란?

  • 말 그대로 빨리 리턴한다는 뜻
    특정 조건에 부합하지 않으면 바로 return 하도록 하는 패턴이다.

예시) 아래 예시는 if와 else 중첩문으로 각 조건에 맞는 메시지를 출력하고, 조건이 충족되지 않을 경우 다음 조건을 확인하는 구조로 되어 있습니다.

if (!userId || !password) {
	alert("아이디와 비밀번호 모두 입력해주세요");
  	return;
} else {
	if (userId !== user.userId) {
		alert("아이디가 틀립니다");
		return;
	} else {
		if (password !== user.password) {
			alert("비밀번호가 틀립니다");
			return;  
		} else {
			alert("로그인 성공입니다.");
		}
	}
}
  • Early return pattern으로 바꿔주면 ?
if (!userId || !password) {
	alert("아이디와 비밀번호 모두 입력해주세요");
  	return;
}
if (userId !== user.userId) {
	alert("아이디가 틀립니다");
	return;
}
if (password !== user.password) {
	alert("비밀번호가 틀립니다")
	return;  
}
	alert("로그인 성공입니다.");
};

이 패턴으로 바꿔주면 조건이 만족되지 않을 경우 함수나 메서드를 빠르게 종료시킨다.
이를 통해 코드의 가독성을 높이고, 불필요한 중첩을 줄일 수 있는 점 메모메모

  • Early Return은 과연 좋은가?

1) Early Return의 장점

  • 들여쓰기를 줄여줌
  • 코드를 간결하고 읽기 쉽게 만들어줌
  • 유효하지 않은 경우를 먼저 처리하여(bouncer pattern) 함수의 "진짜" 본문에 집중할 수 있게해줌

2) Early Return의 단점

  • 함수의 반환이 여러 곳으로 흩어지게 되어 함수의 복잡도를 높혀줌
  • 오히려 가독성을 떨어뜨릴 수 있습니다.
  • 예를 들어 200줄이 넘는 함수에 여러 return문이 무작위로 존재한다면 읽기 쉬운 코드라고 할 수 없음
  • 결론

이 방법이 매번 적용될 수 있다는 부분은 아니다.

때때로 Early Return은 함수의 복잡도를 증가시키고 코드를 더 복잡하게 만들 수 있다. 그리고 간결한 코드에서는 오히려 if-else문이 더 명확할 수 있다.

읽기 쉬운 코드를 작성하기 위해서는 상황에 맞게 적절한 패턴을 선택하는 것이 중요하다. 무조건적인 Early Return보다는 맥락을 고려해야 한다.

🤔 하루 돌아보기

리엑트에서도 Early Return 랜더링 제어할때 쓰며 자주 쓰는 부분이기에 나도 모르게 쓰는 경우가 있다하는데 !
어떤건지 알고 쓰게 되서 또 하나 알아가는 하루 (◦˙▿˙◦)

📝 내일 할 일

□ 콘솔단 스터디 개인과제 발표
□ 그동안 했던것 공부

🔗출처 : https://medium.com/swlh/return-early-pattern-3d18a41bba8

profile
웹 프론트엔드(React) 주니어 개발자 준비중입니다

0개의 댓글