함수(function)란, 일련의 내용을 삽입하여 사용자가 언제든 호출하여 내용을 실행 할 수 있는 실행문
• 언제든 사용자가 필요 할 때 다시 실행 할 수 있음
• 코드의 중복 제거 및 재사용이 용이함
• 유지 보수의 용이성이 높음
• 함수의 종류에는 내장함수(자바스크립트에 있는 함수 ex: alert, prompt, console등), 사용자 정의 함수(내가 이름을 지정한)가 있음
input type="button" value="ON/OFF" onclick="btn_off()"
onclick에 함수이름을 호출해 그 기능을 하게 해줌
자바스크립트가 실행되면 parser가 빌드하면서 문법을 검사한다.
이 와중에 끌어올릴 값을 선택하여 내부적으로 최상단에서 끌어 올려 처리한다.
이것을 호이스팅 문법이라고 한다.
1. 매개변수가 없는 일반 사용자 정의 함수 2. 매개변수가 있는 함수 3. 리턴값이 있는 함수
1. 매개변수가 없는 일반 사용자정의 함수
function 함수명(){
실행할 내용;
}
2. 매개변수가 있는 함수
function 함수명(변수1, 변수2, 변수3, 변수4...){
실행할 내용;
}
3. 리턴값이 있는 함수
function 함수명(변수1, 변수2, 변수3, 변수4...){
실행할 내용;
return 실행결과;
}
(1) 매개변수가 없는 일반 사용자 정의함수
function print01(){
document,write('p매개변수가 없는 일반 사용자 정의 함수입니다. /p');
}
(2)함수명을 작성해 호출하기
print();
(1), (2)의 순서는 상관없음 = 호이스팅
함수 호출 > 함수 정의 or 함수 정의 > 함수 호출
(2) 매개변수가 있는 사용자 정의 함수
function print02(name, region){//매개변수 name, region
document.write(`p${name}가 사는 지역은 ${region}입니다./p`);
}
print02('철수','서울'); //함수 호출_ 매개변수 name, region에 철수, 서울 이라는 값을 담기
(3) 리턴값이 있는 함수
function print04(){
document.write('p리턴값이 있는 함수입니다./p'); 문서에 출력됨
return window.alert('함수종료입니다.더이상 실행되지 않습니다.'); //여기서 함수 종류 밑의 코드는 실행되지 않음
document.write('이 문장은 출력되지 않습니다.');
}
print04();
• 2015년 자바스크립트 표준화가 되면서 새롭게 변경된 함수 작성법
• function을 =>(화살표)로 단축
• 익명 함수로만 작성이 가능함
// 1. 매개변수 없는 함수
const h1 = function(){
return('매개변수 없는 화살표 함수 사용하기');
}
console.log(h1);
// 2. 매개변수 없는 화살표 함수
const h2 =()=>{ // function대신 =>사용
return '매개변수 없는 화살표 함수 사용하기';
}
console.log(h2);
// 3. 화살표 함수_{}도 생략
const h3 =()=> alert('매개변수 없는 화살표 함수 사용하기');
console.log(h3);
명령 프롬프트(prompt)를 사용하여 사용자가 닉네임을 입력시 함수로 전달하여 '닉네임'님이 로그인 하셨습니다. 라고 출력하기
let loginN = prompt('안녕하세요:) 닉네임을 입력해주세요.'); prompt로 사용자가 별명 입력
function l_message (a) { 함수 l_message에서 사용될 매개변수값을 넣기
document.write('반갑습니다. '+a+'님이 로그인 하셨습니다.); 실행할 내용
}
l_message(loginN); 함수 호출
//맨 위 let loginN = prompt('닉네임을 입력해주세요.'); 함수를 따로 쓰지 않고,
l_message(prompt('별명을 입력하세요'));로 생략 가능함