01. 선언적 함수
함수를 선언할 때 function 키워드와 함께 함수 이름을 정의하고, 함수 내부 코드 블록을 중괄호({})로 감싸는 방식으로 작성합니다.
{
function func(){
document.write("실행되었습니다.");
}
func();
}
결과 확인하기
실행되었습니다.
02. 익명 함수
함수를 정의할 때 이름을 생략하고 작성합니다.
{
const func = function(){
document.write("실행되었습니다.")
}
func();
}
결과 확인하기
실행되었습니다.
03. 매개변수 함수
함수의 매개변수(parameter)로 전달되는 함수를 말합니다.
{
function func(str){
document.write(str);
}
func("실행되었습니다.");
}
결과 확인하기
실행되었습니다.
04. 리턴값 함수
return은 함수에서 값을 반환할 때 사용하는 키워드입니다.
{
function func(){
const str = "함수 실행";
return str;
}
document.write(func());
}
결과 확인하기
실행되었습니다.
05. 화살표 함수 : 선언적 함수
선언적 함수식을 화살표를 사용해 간결하게 작성합니다.
{
func = () => {
document.write("실행되었습니다.");
}
func();
}
결과 확인하기
실행되었습니다.
06. 화살표 함수 : 익명 함수
익명 함수식을 화살표를 사용해 간결하게 작성합니다.
{
const func = () => {
document.write("실행되었습니다.")
}
func();
}
결과 확인하기
실행되었습니다.
07. 화살표 함수 : 매개변수 함수
매개변수 함수식을 화살표를 사용해 간결하게 작성합니다.
{
func = (str) => {
document.write(str);
}
func("실행되었습니다.");
}
결과 확인하기
실행되었습니다.
08. 화살표 함수 : 리턴값 함수
리턴값 함수식을 화살표를 사용해 간결하게 작성합니다.
{
func = () => {
const str = "함수 실행";
return str;
}
document.write(func());
}
결과 확인하기
실행되었습니다.
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
{
const func = str => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
const func = str => str;
document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
func = str => str;
document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.
13. 함수 유형 : 함수와 매개변수를 이용한 형태
{
function func(num, str1, str2){
document.write(num + ". "+ str1 + "가 " + str2 + "되었습니다.");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리엑트", "실행");
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
14. 함수 유형 : 함수와 변수를 이용한 형태
{
function func(num, str1, str2){
document.write(num + ". "+ str1 + "가 " + str2 + "되었습니다.");
}
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);
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
15. 함수 유형 : 함수와 배열을 이용한 형태
{
function func(num, str1, str2){
document.write(num + ". "+ str1 + "가 " + str2 + "되었습니다.");
}
const num = [1,2,3];
const info = ["함수","자바스크립트","리엑트","실행"];
func(num[0], info[0], info[3]);
func(num[1], info[1], info[3]);
func(num[2], info[2], info[3]);
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
16. 함수 유형 : 함수와 객체를 이용한 형태
{
function func(num, str1, str2){
document.write(num + ". "+ str1 + "가 " + str2 + "되었습니다.");
}
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);
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
17. 함수 유형 : 함수와 배열, 객체를 이용한 형태
{
function func(num, str1, str2){
document.write(num + ". "+ str1 + "가 " + str2 + "되었습니다.");
}
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);
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
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();
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
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();
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
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 + "되었습니다.");
}
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리엑트", "실행");
info1.result();
info2.result();
info3.result();
}
결과 확인하기
1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
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("102", "함수", "실행");
const info2 = new func("202", "자바스크립트", "실행");
const info3 = new func("302", "리엑트", "실행");
// 실행문
info1.result1();
info2.result2();
info3.result3();
}
결과 확인하기
102. 함수가 실행되었습니다.
202. 자바스크립트가 실행되었습니다.
302. 리엑트가 실행되었습니다.
202. 자바스크립트가 실행되었습니다.
302. 리엑트가 실행되었습니다.
22. 함수 종류 : 즉시 실행 함수
정의되자마자 즉시 실행되는 함수입니다.
{
(function (){
document.write("500. 함수가 실행되었습니다.");
})();
(() => {
document.write("501. 함수가 실행되었습니다.")
})();
}
결과 확인하기
500. 함수가 실행되었습니다.
501. 함수가 실행되었습니다.
501. 함수가 실행되었습니다.
23. 함수 종류 : 파라미터 함수
함수 혹은 메서드 정의에서 나열되는 변수 명입니다.
{
function func(str = "600. 함수가 실행되었습니다."){
document.write(str);
}
func();
}
결과 확인하기
600. 함수가 실행되었습니다.
24. 함수 종류 : 아규먼트 함수
함수 혹은 메서드를 호출할 때, 전달 혹은 입력되는 실제 값입니다.
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2");
}
결과 확인하기
함수실행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();
}
결과 확인하기
함수가 실행되었습니다.x10 (10번 반복실행되어 출력됩니다.)
애니메이션이 실행되었습니다.(무한반복실행되어 출력됩니다.)
애니메이션이 실행되었습니다.(무한반복실행되어 출력됩니다.)
26. 함수 종류 : 콜백 함수
다른 함수에 인수로 넘겨지는 함수입니다.(함수를 2번 실행)
{
function func(){
document.write("2.함수 실행");
}
function callback(str){
document.write("1.함수 실행");
str();
}
callback(func);
}
결과 확인하기
1.함수 실행
2.함수 실행
2.함수 실행