Javascript 기초(함수1)

안녕하세요 19살 IT 개발자 포돌이입니다. 

 

지난 시간에는 어렵고 복잡한 Javascript 기초(객체2)를 마무리하면서 객체 전체를 배웠습니다.

오늘은 Javascript의 심장 이라고 할 수 있는 함수를 배워보려고 합니다. 

 

근데 제가 함수에 대해서 간단하게 말하자면 함수를 못하면 Javascript를 모르는 거랑 마찬가지예요.. 지금 까지 배웠던 것들 중에서 가장 중요한 부분입니다. 물론 다 중요합니다. 뭐가 좋다 뭐가 더 중요하다는 건 없습니다. 하지만 함수를 모르면 여태껏 공부한 것들이 제대로 발휘하지 못하게 됩니다. 그러기 때문에 함수는 못하는 건 좋아요 근데 모르는 건 안됩니다. 자 이만 끝내고 본격적으로 함수에 대해서 알려드리도록 하겠습니다.

 

함수

우리는 Javascript 기초(변수) 부분에서 데이터를 저장할 때 변수를 선언하여 저장했습니다. 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다. 예를 한번 들어볼까요? TV 리모컨을 보면 각 채널의 버튼이 있습니다. 그리고 각 버튼에는 TV의 해당 채널로 바꿀 수 있는 코드가 저장되어 있죠. 이 코드는 사용자가 리모컨의 버튼을 눌러야만 실행됩니다. 이때 각 TV 리모컨의 버튼은 함수를 저장하고 있으며 버튼을 누를 때마다 함수가 호출된다고 할 수 있습니다.

 

기본 함수 정의문

 

 

이렇게 선언해도 되고요 익명 함수(함수명이 없는 함수)를 선언하고 변수에 참조해도 됩니다.

 

 

함수 정의문({ ... }) 안에 작성된 코드는 즉시 실행되지 않습니다. 함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행됩니다. 정의되어 있는 함수를 호출하는 기본형은 다음과 같습니다.

 

기본형

 

 

코딩해보기 1

함수 정의문과 익명 함수를 변수에 참조한 예입니다 2 가지 방식으로 함수를 선언한 다음 각각 호출하여 코드를 실행합니다.

 

 

 

 

함수는 어렵기 때문에 한 문제로는 안될 거 같으니 다른 예제를 풀어봅시다.

 

코딩해보기 2

함수 정의문을 이용해 [배경색 바꾸기] 버튼을 클릭할 때마다 배경색이 바뀌도록 만들어보세요.

 

 

 

 

 

 

 

 

 

 

이렇게 저는 결과가 나왔습니다 버튼을 누르면 배열에 있는 색상이 적용되었습니다. 저도 이번 예제가 까다로워서 푸는데 시간이 걸렸습니다. 다시 함수에 대해서 공부를 더 자세하게 해야겠군요~  좋은 예제였습니다.

 

기본 함수 정의문

기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 코드를 실행했습니다. 즉, 함수를 호출할 때 값을 전달할 수가 없다는 말이란 얘기죠. 하지만 매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.

 

기본형

 

 

코딩해보기

질의응답 창(prompt)을 통해 방문자의 아이디와 비밀번호를 입력받아 만일 잘못된 아이디가 입력된 경우에는 "존재하지 않는 아이디입니다"라는 경고창을 나타내고, 잘못된 비밀번호가 작성된 경우에는 "잘못된 비밀번호입니다."라는 경고창을 나타냅니다. 아이디와 비밀번호가 일치하면 환영 문구가 출력됩니다. 

 

Javascript 기초(제어문1)에서 중첩 if문 기억하시나요? 그 예제랑 거의 비슷한 문제입니다.

 

 

 

제어문에서 한번 비슷한 예제가 나와서 쉽게 풀 수 있었습니다. 잘 이해가 안 된다면 Javascript 기초(제어문 1)의 중첩 if문이 있습니다. 확인해보시면 도움이 되실 겁니다.

 

함수에서 return 문의 역할

return 문은 함수에서 결괏값을 반환할 때 사용합니다. 그리고 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료됩니다. 다시 말해 함수 정의문에 return 문이 사용되면 함수를 호출했을 때 결괏값을 반환합니다. 이제 기본형을 한번 보겠습니다.

 

기본형

 

 

코딩해보기

함수 정의문 내에 작성한 코드를 실행한 후 계산된 결과값을 return문으로 함수 호출문에 반환하는 예제입니다.

국어, 영어, 수학 점수의 평균을 화면에 출력하세요.

 

 

이 예제는 제어, 연산, 배열, 함수, 객체 무려 5개가 활용되고 있는 예제입니다. 이 문제를 푸신다면 거의 완벽하게 이해하고 있다는 거죠~ 저도 살짝 긴장하고 문제만 읽고 안 보면서 풀었는데 다행히 풀었네요 휴.. ㅎㅎ 그래도 다시 한번 복습할 겁니다. 원래 개발자는 끊임없이 개발하고 복습해야 하는 직업이기 때문에 꾸준히 읽어야 합니다.

 

재귀 함수 호출

함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라 합니다. 재귀 함수 호출은 함수를 반복문처럼 여러 번 호출하기 위해 사용하며 기본형은 다음과 같습니다.

 

코딩해보기

재귀 함수 호출을 적용하여 1부터 10까지의 값을 출력하세요.

 

 

 

이것으로 Javascript 기초(함수1)를 여기서 마치겠습니다. 가면 갈수록 예제가 많아지고 여태껏 배운 기초를 응용하는 예제들이 많아졌습니다. 그리고 지금 여러분이 하나씩 풀어가고 있다는 건 그만큼 많이 성장하셨다는 의미입니다. 나는 왜 안될까... 나는 왜 자꾸 틀리지.. 자책하셔도 좋지만 너무 심하게 하지 마세요. 사람은 원래 망각의 동물이에요 잘 까먹고 잘 틀립니다. 그러니까 너무 심하게 자기 자신을 깍아내리지 마세요 오히려 독이 됩니다. 할 수 있습니다 여러분! 그럼 오늘은 여기까지 하겠습니다.

 

19살 IT 개발자 포돌이였습니다.

 

-Coding is an Art-

- 코딩을 예술이라 생각하는 사람-

 

책 광고 리뷰 주실 분들은 clonelee74@gmail.com 으로 메시지를 보내주시면 감사하겠습니다.