함수
프로그램을 작성할 때 반복적으로 수행하는 일을 한다.
-서브 프로그램
-프로그램 안에서 각각의 기능을 수행함.
-input을 받아서 잘 처리한 다음 ouput해준다.
-변수에 담을수도 있고 함수를 리턴할 수도 있다.
❗ 모든 스크립트는 선택자가 작성된 이후에 작성해야한다.
매개변수: 함수에 입력으로 전달받는 값을 받는 변수
인수: 함수를 호출할 때 전달하는 입력 값
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가 변한다.
▶매개변수를 포함한 함수 작성
함수 선언문
함수를 호출할 때 함수명(add)을 사용한다.
❗ 함수 선언문으로 선언한 함수는 호이스팅된다.
때문에, 함수를 정의하기 전에 함수 호출이 가능하다.
함수 표현식
변수에 함수를 할당해서 사용하는 방식으로함수를 호출할 때 변수명(add2)을 사용한다.
위의 그림에서 함수는 함수명이 없는 이름없는 함수(무기명 함수, 익명 함수)이다.
❗ 함수 선언문으로 선언한 함수는 호이스팅되지 않는다.
때문에, 함수를 정의하기 전에 함수 호출이 불가능하다.
매개변수
function sendMessage(message,from ="그린"){
//매개변수 from의 기본값(default)값을 "그린"으로 설정했다.
console.log(`${message}가 왔습니다. ${from}님이 보내셨습니다.`);
//출력될 구문을 작성했다.
}
sendMessage("안녕","김수민");
// 안녕가 왔습니다. 김수민님이 보내셨습니다.
sendMessage("잘가");
// 잘가가 왔습니다. 그린님이 보내셨습니다.위와 같이 매개변수에 default 값을 지정할 수 있다.
나머지 매개변수...arr
function add(...rest){ //매개변수에 나머지 매개변수를 입력했다.
let sum= 0;
rest.forEach(num=> sum= sum+num) //변수 v는 rest가 가진 값을 반환한다.
return sum;
}
let result1= add(1,2,3);
console.log(result1);
//👉 0+1+2+3 =6
let result2= add(1,2,3,4);
console.log(result2);
//👉 0+1+2+3+4 =10
let result3= add(1,2,3,4,5);
console.log(result3);
//👉 0+1+2+3+4+5 =15▶화살표 함수 =>
이름없는 함수(무기명 함수, 익명 함수)를 간단하게 작성할 수 있다.
- function 키워드 대신 => 키워드를 사용한다.
- 매개변수가 하나일때는 ()를 생략할 수 있다.
- 실행코드가 한줄일때는 return을 생략할 수 있다.
- 실행코드가 한줄일때는 중괄호{}를 생략할 수 있다.
const hello = name => "hello"+name;
console.log(hello("aa"));
//👉helloaa❗ 화살표 함수 내의 this는 언제나 상위 스코프의 this를 가리킨다.
▶즉시 실행 함수
위 그림과 같이 함수를 작성하면 함수를 호출하지 않아도 즉시 실행된다.
