함수
프로그램을 작성할 때 반복적으로 수행하는 일을 한다.
- 서브 프로그램
- 프로그램 안에서 각각의 기능을 수행함.
- input을 받아서 잘 처리한 다음 output해준다.
- 변수에 담을수도 있고 함수를 리턴할 수도 있다.
모든 스크립트는 선택자가 작성된 이후에 작성해야한다.
매개변수 : 함수에 입력으로 전달받는 값을 받는 변수
인수 : 함수를 호출할 때 전달하는 입력 값
function name(){ }으로 함수의 name을 지정하고 { }안에 구문을 작성한다.
<button onclick="name()"> </button>과 같이 적용시킬 수 있다.
함수 안에서 다른 함수를 적용시키려고 할 때는
function A(){ B(); } function B(){ }이렇게 사용하면된다.
함수를 이용한 html 변경
img src 변경
<img src="/images/pic1.png" alt="">html 상단에 위와 같은 img 태그가 존재할 때,
document.querySelector("img").src = "/images/pic2.png";
위 스크립트를 작성하면 img가 pic2.png로 변한다.
style 변경
<style>
div{
width: 200px;
height: 200px;
}
</style>
<div ></div>html 상단에 위와 같은 style 및 div 태그가 존재할 때,
document.querySelector("div").style.borderRadius = "50%";
위 스크립트를 작성하면 스타일이 border-radius: 50%;로 바뀐다.
class 변경
추가하기
object.classList.add("클래스명");
document.querySelector("#box").classList.add("on");클래스명으로 클래스를 추가
제외하기
object.classList.remove("클래스명");
document.querySelector("#box").classList.remove("on");클래스명과 동일한 클래스를 제거
추가/제거하기
object.classList.toggle("클래스명");클래스명이 존재할 경우 제거, 존재하지 않을 경우 추가
클래스 여부 확인
object.classList.contains("클래스명");클래스명이 있으면 true, 없으면 false를 반환
응용
위의 구문들을 엮어서 사용할 수 있다.
<button onclick="img()"></button> <img src="/images/pic1.png" alt=""> <script> function img(){ document.querySelector("img").src = "/images/pic2.png"; } </script>button을 누르면, img가 변한다.
매개변수를 포함한 함수 작성
함수 선언문
함수를 호출할 때 함수명을 사용한다.
함수 선언문 방식
function 함수명(매개변수) { return 반환값; }함수 선언문은 호이스팅된다 !!!!! 💡 중요 💡
함수 정의하기 전에 호출이 가능하다 !!!!!!function add(a,b){ return a + b; } console.log(add(2,5));
함수 표현식
변수에 함수를 할당해서 사용하는 방식으로함수를 호출할 때 변수명을 사용한다.
함수는 함수명이 없는 이름없는 함수(무기명 함수, 익명 함수)이다.
함수 선언문으로 선언한 함수는 호이스팅되지 않는다.
때문에, 함수를 정의하기 전에 함수 호출이 불가능하다.
매개변수
매개변수 기본값 설정
전달하지 않은 매개변수의 디폴트 값을 설정할 수 있다.function showMessage(message, from = "그린"){ //from = "그린" 의 의미는 default 값이 그린이라는 뜻이다. console.log(메시지는 ${message} 이고, 보낸사람은 ${from}이다.); } showMessage("야호","영희"); showMessage("자바스크립트","철수"); showMessage("하하하", "병준"); showMessage("몽충아") // 값을 입력하지 않으면 default 값이 들어가게된다.위와 같이 매개변수에 default 값을 지정할 수 있다.
나머지 매개변수 ...arr
나머지 매개변수 (es6 때 추가되었다.)
배열 형태로 전달할 수 있다 ! ! ! ! ! ! !function printAll(...arr){ for(let i=0; i<arr.length; i++){ console.log(arr[i]); } arr.forEach(i=>{ console.log(i) }) } printAll('원빈','김희선','송중기'); printAll('강하늘','김희선');
화살표 함수 =>
이름없는 함수(무기명 함수, 익명 함수)를 간단하게 작성할 수 있다.
- function 키워드 대신
=>키워드를 사용한다. - 매개변수가 하나일 때는
()를 생략할 수 있다. - 실행코드가 한줄일 때
return,중괄호{}생략가능하다.
//일반 함수 let printText = function(text){ console.log(text); } //화살표 함수 let printText = text => { console.log(text) }
function대신=>(화살표 함수)를 사용가능 ex) `function(text)를text =>로 사용가능하다
//일반 함수 const add = function(a,b){ return a+b; } //화살표 함수 const add = (a,b) => { return a+b; }화살표 함수를
const add = (a,b) => a+b;로return과{}를 생략할 수 있다.
즉시 실행 함수
(function hello(){ console.log('hello'); })();이렇게 같이 함수를 작성하면 함수를 호출하지 않아도 즉시 실행된다.
