010.JS-함수(기본 사용법)

[1] 함수란?

🤜 프로그래밍에서 함수는 특정 작업을 수행하는 명령어의 모임입니다. 

🤜 함수는 이름을 사용하여 호출(실행)할 수 있는 재사용 가능한 코드 조각입니다.

🤜 함수는 다른 함수 내에서 함수 호출을 포함하여 프로그램의 어디에서나 호출할 수 있습니다.

 

[2] 함수의 장점

✅ 함수를 사용하면 동일한 코드를 여러 번 실행할 수 있습니다.

✅ 함수는 긴 프로그램을 더 작은 구성 요소로 나눕니다.

✅ 다른 프로그래머가 기능을 공유하고 사용할 수 있습니다. 

✅ 함수는 프로그램에서 입력을 받아 처리를 할 수 있어서 재사용성이 높다.

✅ 함수를 많이 사용한 프로그램은 명확한 기능과 구조를 파악하기 쉽기 때문에 테스트와 디버깅을 더 쉽게 할 수 있게 해준다.

 

 

[예제1] 자바스크립트 함수 1

See the Pen JS_010__예제1 by wootekken (@wootekken) on CodePen.

 

✔️ JS 코드 설명 - [예제1]
◼️ 1번줄: 함수를 작성할 때는 함수이름 앞에 function 이라는 단어를 작성해야 합니다. 그리고 function 오른쪽에 한 칸 띄워 원하는 함수이름을 적습니다. 여기에서 (n1, n2)는 함수가 실행될 때 전달되는 값 n1, n2로서 매개변수라고 부릅니다.
◼️ 2번줄: 전달된 두 개의 매개변수 n1, n2를 더한 결과값을 변수 r에 저장합니다.
◼️ 3번줄: 변수 r값을 웹 브라우저 화면에 출력합니다.
◼️ 4번줄: 함수의 끝 부분입니다.
◼️ 6번줄: add함수를 실행하는 부분입니다. 이 실행에서 n1 = 1, n2 = 2 가 전달됩니다.

 

 

[예제2] 버튼 눌러 함수 실행하기

See the Pen JS_010__예제2 by wootekken (@wootekken) on CodePen.

✔️ HTML 코드 설명 - [예제2]
◼️ 1번줄: 숫자입력만 받기위해 <input> 태그의 속성으로 type="number"를 적용했습니다.
◼️ 4번줄: 더하기 연산의 결과값을 출력하기위해 빈 <span>태그를 넣었습니다.
◼️ 5번줄: 버튼을 클릭할 때 실행할 함수를 onclick 속성에 적용하여, 버튼을 클릭시 myClick()이라는 JS함수가 실행됩니다.

✔️ CSS 코드 설명 - [예제2]
◼️ 4번줄: <button>태그의 색깔과 글자크기, 여백을 좀 크게 조정했습니다. cursor: pointer를 적용하면 버튼에 마우스 포인터를 올려놓을 시 손가락 모양으로 변합니다.
◼️ 11번줄: 마우스 포인터를 버튼위에 올려놓을 때(hover) 색깔이 변경되게 설정했습니다. 

✔️ JS 코드 설명 - [예제2]
◼️ 1번줄: <button>태그 클릭시(onclick) 실행할 myClick()함수의 시작 부분입니다.
◼️ 2번~3번줄: <input> 태그를 querySelector로 선택하고, input에 입력된 값(value)을 변수 n1, n2에 저장합니다.
◼️ 4번줄: input의 값 value는 문자열(string)이기 때문에 정수로 바꾸어(parseInt) 더한 뒤, 그 결과값을 <span>태그에 출력했습니다.