01. 선언적 함수
함수를 실행하는 기본적인 방법
function func(){
document.write("실행되었습니다.
");
}
func();
결과 확인하기
함수 선언하기
function의 이름을 function으로 지정할 수는 없는데,
function은 이미 javascipt에서 사용되고 있는 명령어가 있기 때문이다.
02. 익명 함수
변수에 함수를 저장하는 방법
const func = function (){
document.write("실행되었습니다.
");
}
func();
결과 확인하기
변수에 함수넣기
func이라는 변수를 만들어 선언함수를 넣어 실행할 수 있다.
03. 매개변수 함수
매개변수를 사용해서 결과를 전달해주는 방법
function func(str){
document.write(str);
}
func("실행되었습니다.")
결과 확인하기
매개변수 사용하기
매개변수를 사용하고, 결과값을 나중에 적어 매개변수에게 전달해주는 방법이다.
04. 리턴값 함수
return으로 결과를 반환하여 함수를 사용한다.
function func(){
const str = "실행되었습니다."
return str;
}
document.write(func());
결과 확인하기
return 사용하기
05. 화살표 함수 : 선언적 함수
변수를 불러오는 방법
func = () => {
document.write("실행되었습니다.
");
}
func();
결과 확인하기
변수 불러오기
변수 x, y, z에 값을 저장하고 console.log로 불러올 수 있다.
06. 화살표 함수 : 익명 함수
변수를 불러오는 방법
const func = () => {
document.write("실행되었습니다.
");
}
func();
결과 확인하기
변수 불러오기
변수 x, y, z에 값을 저장하고 console.log로 불러올 수 있다.
07. 화살표 함수 : 매개변수 함수
변수를 불러오는 방법
func = (str) => {
document.write(str);
}
func("실행되었습니다.
");
결과 확인하기
변수 불러오기
변수 x, y, z에 값을 저장하고 console.log로 불러올 수 있다.
08. 화살표 함수 : 리턴값 함수
return을 사용하는 방법
func = () => {
const str = "실행되었습니다.
";
return str;
}
document.write(func());
결과 확인하기
return 사용하기
변수 str에 결과를 저장하고, return을 이용해서 결과값을 불러온다.
09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값
익명함수와 매개변수함수, 리턴값 함수를 합쳐 화살표함수로 나타내는 방법
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
결과 확인하기
함수 생략하기
func 변수를 만들어 매개변수를 넣어주고 리턴값으로 결과를 불러오는 방법이다.
10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호생략
09번 방법에서 괄호를 생략하는 방법
const func = str => {
return str;
}
document.write(func("실행되었습니다."));
결과 확인하기
함수 생략하기
매개변수 자리에 변수가 하나이기 때문에 괄호 생략이 가능하다.
11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략
10번 방법에서 리턴을 생략하는 방법
const func = str => str;
document.write(func("실행되었습니다."));
결과 확인하기
함수 생략하기
return 변수; 에서 변수만 남기고 return을 생략 가능하다.
12. 화살표 함수 : 선언적함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략
11번과 같은 방법으로 선언적함수로 시작하여 생략 가능하다.
func = str => str;
document.write(func("실행되었습니다."));
결과 확인하기
함수 생략하기
익명함수를 선언적함수로 사용하여도 같은 방법으로 생략이 가능하다.
13. 함수유형 : 함수와 매개변수를 이용한 형태
매개변수를 사용하는 방법
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
func("1","함수","실행");
func("2","자바스크립트","실행");
func("3","리액트","실행");
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
매개변수 사용하기
매개변수를 이용해 결과 값을 직접 적어 사용할 수 있다.
14. 함수유형 : 함수와 변수를 이용한 형태
변수에 값을 저장하여 사용하는 방법
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "리액트";
const youCom1 = "실행";
func(youNum1, youStr1, youCom1);
func(youNum2, youStr2, youCom1);
func(youNum3, youStr3, youCom1);
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
변수 사용하기
결과값을 변수에 저장하여 변수로 사용 가능하다.
15. 함수유형 : 함수와 배열을 이용한 형태
배열에 값을 저장하여 사용하는 방법
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const num = [1, 2, 3];
const info = ["함수", "자바스크립트", "리액트"];
const str = ["실행"];
func(num[0], info[0], str[0]);
func(num[1], info[1], str[0]);
func(num[2], info[2], str[0]);
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
배열 사용하기
데이터가 많아짐에 따라 배열에 데이터를 저장하여 사용 가능하다.
16. 함수유형 : 함수와 객체를 이용한 형태
객체에 값을 저장하여 사용하는 방법
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행"
}
func(info.num1, info.name1, info.word);
func(info.num2, info.name2, info.word);
func(info.num3, info.name3, info.word);
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
객체 사용하기
하나의 객체에 데이터를 저장하여 사용 가능하다.
17. 함수유형 : 함수와 배열, 객체를 이용한 형태
배열과 객체를 동시에 사용하여 값을 저장하는 방법
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const info = [
{
num : 1,
name : "함수",
word : "실행"
},
{
num : 2,
name : "자바스크립트",
word : "실행"
},
{
num : 3,
name : "리액트",
word : "실행"
}
]
func (info[0].num, info[0].name, info[0].word);
func (info[1].num, info[1].name, info[1].word);
func (info[2].num, info[2].name, info[2].word);
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
배열, 객체 사용하기
배열 안에 객체를 넣어 조금 더 규칙적으로 표현이 가능하고 주로 많이 쓰이는 방법이다.
18. 함수유형 : 객체 안에 함수를 이용한 형태
객체 안에 함수를 넣어 사용하는 방법
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행",
result1 : function(){
document.write(info.num1 + "." + info.name1 + "가 " + info.word + "되었습니다.
");
},
result2 : function(){
document.write(info.num2 + "." + info.name2 + "가 " + info.word + "되었습니다.
");
},
result3 : function(){
document.write(info.num3 + "." + info.name3 + "가 " + info.word + "되었습니다.
");
}
}
info.result1();
info.result2();
info.result3();
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
객체 안에 함수를 저장해 사용하기
객체 안에 함수를 넣어 함수를 불러와 사용할 수 있지만, 위 같은 방법은 단점이 많다.
각각의 변수를 저장해주고 사용한다.
19. 함수유형 : 객체 생성자 함수를 이용한 형태
객체 생성자 함수를 사용하는 방법
function Func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
this.result = function(){
document.write(this.num + "." + this.name + "가 " + this.word + "되었습니다.
");
}
}
const info1 = new Func(1,"함수","실행");
const info2 = new Func(2,"자바스크립트","실행");
const info3 = new Func(3,"리액트","실행");
info1.result();
info2.result();
info3.result();
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
객체 생성자 함수 사용하기
위 18번에서의 단점을 보완한 방법으로 this를 사용한다.
this를 통해 매개변수의 값을 받아오면 순서를 구분지어주지 않아도 알아서 저장된다.
객체 지정자 함수의 첫글자는 대문자를 사용해야한다.
20. 함수유형 : 프로토타입 함수
프토토타입 함수를 사용하는 방법
function Func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
}
Func.prototype.result = function(){
document.write(this.num + "." + this.name + "가 " + this.word + "되었습니다.<br>");
}
const info1 = new Func(1,"함수","실행");
const info2 = new Func(2,"자바스크립트","실행");
const info3 = new Func(3,"리액트","실행");
info1.result();
info2.result();
info3.result();
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
프로토타입 함수 사용하기
객체 생성자 함수를 사용하여 함수를 넣어주게 되면 한번 함수가 실행될 때,
컴퓨터에서 아래있는 모든 함수를 읽기 때문에 많은 메모리를 사용하게 된다.
이를 효율적으로 사용하기 위해 함수를 바깥으로 빼주어 사용하는데,
함수 블록의 밖에서도 함수에 적용이 되도록 prototype을 사용한다.
21. 함수유형 : 객체리터럴 함수
객체리터럴 함수를 사용하는 방법
function Func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
};
Func.prototype = {
result1 : function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
},
result2 : function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
},
result3 : function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
}
}
const info1 = new Func("101", "함수", "실행");
const info2 = new Func("201", "자바스크립트", "실행");
const info3 = new Func("301", "리액트", "실행");
info1.result1();
info2.result2();
info3.result3();
결과 확인하기
201. 함수가 실행되었습니다.
301. 함수가 실행되었습니다.
객체리터럴 함수
프로토타입 함수를 사용하여 함수를 블록 밖으로 빼내었을 때, 가독성을 위해 나와있는 함수를 객체형식으로 저장해주는 방식이다.
22. 함수종류 : 즉시 실행 함수
함수를 실행문 없이 즉시 실행 시키는 방법
(function (){
document.write("500. 함수가 실행되었습니다.
")
})();
결과 확인하기
즉시실행 함수
페이지가 로딩됨과 동시에 즉각적으로 실행되어야 하는 함수에 사용하는데, 실행문을 적지 않고 하나의 괄호에 함수를 묶어주어 실행한다.
23. 함수종류 : 파라미터 함수
파라미터 함수를 사용하는 방법
function func(str = "600. 함수가 실행되었습니다.
"){
document.write(str);
}
func();
결과 확인하기
파라미터 함수
매개변수 함수를 사용할 때, 함수 실행문에 결과값을 적어주는 것이 아니라 파라미터안에 직접 결과값을 적어주는 형태이다.
24. 함수종류 : 아규먼트 함수
아규먼트 함수를 사용하는 방법
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
};
func("함수실행1", "함수실행2");
결과 확인하기
함수실행2
아규먼트 함수
아규먼트 함수를 사용하면 매개변수를 자동으로 배열에 저장하여 사용할 수 있다.
25. 함수종류 : 재귀 함수
재귀함수를 사용하는 방법
function func(num){
if(num<=1){
document.write("함수가 실행되었습니다.")
} else {
document.write("함수가 실행되었습니다.")
func(num-1);
}
};
func(10);
function animation(){
document.write("애니메이션이 실행되었습니다.")
requestAnimationFrame(animation)
}
animation();
결과 확인하기
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
재귀 함수
함수 내에 자기 자신을 다시 불러오는 형태로, 같은 실행문을 여러번 반복해야할 때
사용한다. if문을 사용하여 반복회수에 대한 조건을 걸어줄 수 있다.
11번 라인처럼 보통 애니메이션에 사용되는데 무한에 빠지지않게 설정하여 부드럽게
출력할 수 있습니다.
26. 함수종류 : 콜백 함수
콜백함수를 사용하는 방법
function func(){
document.write("2. 함수 실행")
}
function callback(str){
document.write("1. 함수 실행")
str();
}
callback(func);
결과 확인하기
콜백 함수
함수를 다른 함수의 인수로 넣어주어 두번 실행되는 함수이다.
위 예시를 보면 func함수를 callback함수의 인수로 넣어 callback함수가 실행되고,
그 이후에 func함수가 실행되는 것을 볼 수 있다.
콜백함수는 첫 번째 함수가 실행되고 두 번째 함수가 실행된다.
27. 함수종류 : 콜백 함수(반복문)
콜백함수를 사용하는 방법
function func(index){
console.log(`함수가 실행되었습니다.${index}`)
}
function callback(num){
for(let i=1; i<=10; i++){
num(i)
}
}
callback(func);
결과 확인하기
콜백 함수
함수를 다른 함수의 인수로 넣어주어 두번 실행되는 함수이다.
위 예시를 보면 func함수를 callback함수의 인수로 넣어 callback함수가 실행되고,
그 이후에 func함수가 실행되는 것을 볼 수 있다.
콜백함수는 첫 번째 함수가 실행되고 두 번째 함수가 실행된다.
27. 함수종류 : promise 함수
함수 설명
결과 확인하기
함수 이름
설명
28. 함수종류 : 내부 함수
함수 설명
결과 확인하기
함수 이름
설명
29. 함수종류 : 내부 함수 : 스코프, 클로저
함수 설명
결과 확인하기
함수 이름
설명
30. 클래스
함수 설명
결과 확인하기
함수 이름
설명
31. 클래스 상속
함수 설명
결과 확인하기
함수 이름
설명