[JavaScript/Angular] return false를 쓰는 이유 / return, return true, return false차이

앵귤러마스터북 책을 보면서 공부를 하고 있는데 아래와 같은 예제가 나왔다.

<button (click)="addArticle(newtitle, newlink)" class = "~"> Submit link</buttion>

js로는 <button click="addArticle(newtitle, newlink)">Submit link</buttion>요종도가 될 것 같은데,
버튼이 클릭되면 addArticle이라는 함수로 넘어가게 코드를 짜줫다.

그리고 addArticle함수를 보면

 addArticle(title: HTMLInputElement, link: HTMLInputElement):boolean{
   console.log(`Adding article title : ${title.value}, link : ${link.value}`);
   return false;
 };

밑에 리턴값을 false로 줬는데 이부분이 잘 이해가 되지 않아서 찾아봤다.

🤔 reutnr false?

• return을 쓰면 null을 리턴하게 되는데
  유효성 검사 중 null을 받으면 응답받는 입장에서는 이게 검사가 통과한건지 아닌지 결과여부가 불확실해진다.
• false를 리턴해서 검사에 통과하지 못했고 그로 인해 submit 이벤트가 실패했다는
  명확한 의미 전달을 위해
  애매한 return이 아닌 return false를 명시하는게 좋다고 한다.
  이로 인한 에러가 발생할 수도 있다고..!

결론은 return을 쓴다면 무엇을 return할 것인지 명확한 의미를 전달해 주는 게 좋다고 한다~

근데 여기서 또 궁금한 점이 생겼다.. return false와 void의 차이도 궁금해졌다.

🤔 return false vs void

void연산자는 리턴값으로 undefined를 반환한다.

• 그래서 링크 이동을 막기위해 void를 쓰면,
  ex) <a href ="javascript:undfined"></a>
  로 어떤 구문을 넣어도 결과적으로 이런 상황을 만들어주는 것이고,
• return false는
  a태그가 click이벤트를 받앗을때 false값을 반환해 동작을 중지시키는 것이라고 한다.

음 그리고 추가를 하자면
이런식으로 html과 js를 분리하지 않는 방식은 되도록 지양하는 편이 좋다고 한다.

제일 좋은 방법은 js태그 안에서 이벤트핸들러를 통해 제어하는 것이라고 함

근데... 내 얄팍한 지식은 바닥이 끝이 없다.. 또또 궁금한게 생겨따... a태그를 쓰면 href로 링크로 넘어가게 해줄 수 있잖슴? 근데
href="#"이런거와의 차이점은 또 뭘까..?

🤔 href="#"?

a href는 비워두면 오류가날 가능성이 높다고 한다. 그래서 여러 방밥이 있는데

1. <a href="#"></a>
2. <a href="#none"></a>
3. <a href="#javascript:;"></a>
4. <a href="javascript:void(0);"></a>

1. <a href="#"></a>

#만 쓰면 스크롤이 어디있든 최상단으로 이동함.

2. <a href="#none"></a>

#뒤에 아이디로 쓰지 않는 text를 넣음.
그러면 어디로도 이동하지 않고 스크롤의 이동도 없음.

3. <a href="#javascript:;"></a>

js라고 작성하긴 했지만 아무 일도 발생하지 않음
스크롤 이동도, undefined발생도 없음.

4. <a href="javascript:void(0);"></a>

void안에 0말고 영문, 숫자도 가능함.
이것도 a태그의 이동을 무력화 시킴

그러나 void는 undefined를 리턴한다고 위에서 말했잖슴?!?!!
javascript:는 브라우저에게 뒤에 작성된 함수를 실행시키는 의미를 담고 있음
즉, 브라우저에게 void(0)연산자를 실행하라고 말하는 의미임.

a태그의 기본 기능은 작동되지 않지만 undefined를 리턴하므로 좋은 방법은 아님 XXX!!!

머 stackoverflow를 보면 return false를 쓰는게 가장 좋은 방법이라고 말하고 있긴 함.

결론) return 값을 명확히 쓰자~

# Summary

return vs return flase
return; 시 null 반환.
return의 값을 정확하게 전달해주는게 좋음

return false vs void
js에서 voide를 바로 실행(반환값 없음 : undefined)
링크 시 onclikc이벤트의 false반환으로 진행 중지

📎 Reference

https://okky.kr/articles/682955
https://diaryofgreen.tistory.com/80
https://stackoverflow.com/questions/3498492/javascriptvoid0-vs-return-false-vs-preventdefault
https://minimal-dev.tistory.com/28