[JavaScript] 생활코딩 WEB2 JavaScript 24~28강

ex9.html (함수 : 매개변수와 인자)

함수를 쓰지 않고 ex.html을 만들었다.

출력하면 이런 모습.

two라는 함수를 만들었다.

출력 화면은 동일. 하지만 코드가 길어지고 반복이 많아지면 이쪽이 더 효율적이다.

함수를 하나 더 만들어보자.

1+1을 2로 출력했다.

1+1을 함수로 만들었다.

역시 출력 화면은 똑같다.

아예 두 수를 더하는 함수를 만들었다.

5와 7이 추가로 출력됐다.

---

ex9.html (함수 : 리턴)

방금 만든 sum 함수를 응용해보자. 목표는 빨간색으로 5를 출력하는 것이다.

Whyrano...

연산을 왼쪽부터 진행하는 과정에서 숫자가 문자형으로 바뀌며 문제가 발생했다. 연산에 괄호를 쓰면 문제를 해결할 수 있다.

return을 활용해도 된다.

출력 화면.

---

3.html (함수의 활용)

다시 3.html로 돌아와 함수를 활용해 리팩토링해보자.

야간모드 버튼의 코드를 손 볼 것이다.

해당 태그를 복사하고

표시한 곳에

붙여넣었다.

그리고 nightDayHandler라는 이름의 함수로 만들었다.

기존에 코드가 있던 자리에는 nightDayHandler 함수를 집어넣었다.

...? 한 번 클릭했는데 아무런 변화가 없다.

두 번 클릭하니까 돌아가긴 돌아가는데 버튼 이름이 여전히 night다.

원인은 this. 본래 onclick 안에서 자기자신을 가리켰는데 이제 떨어져나와서 제 기능을 할 수 없다.

밑줄 친 부분에 유의하며 코드를 수정해보자.

잘 돌아간다.

---

출처