01. 선언적 함수
선언적 함수는 기본함수입니다.
function func(){
document.write("함수가 실행되었습니다.1");
}
func();
결과보기
02. 익명 함수
익명 함수는 함수 이름을 선언하지 않고 변수의 이름을 대신 사용합니다.
const func = function(){
document.write("함수가 실행되었습니다.2
");
}
func();
결과보기
03. 매개변수 함수
함수에 변수값이 전달되어 처리해야 하는 경우가 있는데, 이렇게 함수에 전달되는 것을 매개변수라고 합니다.
function func(str){
document.write(str);
}
func("함수가 실행되었습니다.3
");
결과보기
04. 리턴값 함수
함수 안에서 return을 만나게 되면 해당 함수를 호출한 곳으로 결과 데이터를 반환해 주고 함수는 종료가 됩니다.
function func(){
const str = "함수가 실행되었습니다.4
";
return str;
}
document.write(func());
결과보기
05. 화살표 함수 : 선언적 함수
선언적함수를 화살표함수로 변경할 수 있습니다.
//화살표함수
func = () => {
document.write("함수가 실행되었습니다.5
")
}
func();
//화살표함수 괄호 생략
func = () => document.write("함수가 실행되었습니다.5
");
func();
결과보기
06. 화살표 함수 : 익명 함수
익명함수 또한 화살표함수로 변경할 수 있습니다.
const func = () => {
document.write("함수가 실행되었습니다.6
")
}
func();
//화살표함수 괄호 생략
const func = () => document.write("함수가 실행되었습니다.6
");
func();
결과보기
함수가 실행되었습니다.6
07. 화살표 함수 : 매개변수 함수
매개변수함수의 화살표함수로 변경하는 방법입니다.
//화살표함수
func = (str) => {
document.write(str);
}
func("함수가 실행되었습니다.7
");
func = (str) => document.write(str); //화살표함수 중괄호 생략
func = str => document.write(str); // 괄호 생략
func("함수가 실행되었습니다.7
");
결과보기
08. 화살표 함수 : 리턴값 함수
리턴값 함수를 화살표함수로 변경하는 방법입니다.
func = () => {
const str = "함수가 실행되었습니다.8
";
return str;
}
document.write(func());
결과보기
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
여러 가지 함수를 한 번에 사용할 수 있습니다. 익명함수와 매개변수, 리턴값 함수롤 한 번에 사용한 예시입니다.
const func = (str) => { //화살표함수+익명함수+매개변수
return str; //리턴값
}
document.write(func("함수가 실행되었습니다.9"));
결과보기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
익명함수와 매개변수, 리턴값 함수롤 한 번에 사용하며 매개변수의 괄호를 생략한 예시입니다.
const func = str => { //str의 괄호 생략
return str; //결과값을 의미
}
document.write(func("함수가 실행되었습니다.10"));
결과보기
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
익명함수와 매개변수, 리턴값 함수롤 한 번에 사용하며 매개변수의 괄호를 생략하고 리턴도 생략한 예시입니다. 리턴을 생략하며 중괄호도 생략되었습니다.
const func = str => str; //리턴 생략되어 한 줄로 표시
document.write(func("함수가 실행되었습니다.11"));
결과보기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
익명함수 대신 선언적 함수와 매개변수, 리턴값을 한 번에 사용하고, 괄호와 리턴을 생략한 예시입니다.
func = str => str; //선언적함수를 사용했기 때문에 const 생략
document.write(func("함수가 실행되었습니다.12"));
결과보기
13. 함수 유형 : 함수와 매개변수를 이용한 형태
함수와 매개변수를 이용한 형태입니다.
function func(num, str1, str2){
document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.
");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("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);
결과보기
15. 함수 유형 : 함수와 배열, 객체를 이용한 형태
함수와 배열, 객체를 이용한 형태입니다. 배열 속의 객체에 데이터를 저장한 후 불러옵니다.
function func(num, str1, str2){
document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.
");
}
const info = [
{
num: "1",
name : "함수",
com : "실행"
},
{
num: "2",
name : "자바스크립트",
com : "실행"
},
{
num: "3",
name : "제이쿼리",
com : "실행"
}
];
func(info[0].num, info[0].name, info[0].com);
func(info[1].num, info[1].name, info[1].com);
func(info[2].num, info[2].name, info[2].com);
결과보기
16. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태
객체 안에 변수와 함수를 이용한 형태입니다. 객체 안에 함수를 저장한 후 함수를 실행합니다.
const info = {
num1 : 1,
name1 : "함수",
word1 : "실행",
num2 : 2,
name2 : "자바스크립트",
word2 : "실행",
num3 : 3,
name3 : "제이쿼리",
word3 : "실행",
result1 : function(){
document.write(info.num1 + ". " + info.name1 + "가 " + info.word1 + "되었습니다.
");
},
result2 : function(){
document.write(info.num2 + ". " + info.name2 + "가 " + info.word2 + "되었습니다.
");
},
result3 : function(){
document.write(info.num3 + ". " + info.name3 + "가 " + info.word3 + "되었습니다.");
}
}
info.result1();
info.result2();
info.result3();
결과보기
17. 함수 유형 : 객체 생성자 함수
객체 생성자 함수는 객체 생성시 작성 코드 길이를 줄여줍니다. 생성자 함수는 첫 글자를 대문자로 작성하는 것이 좋지만 소문자로 작성해도 무방합니다. 생성자 함수 내부의 변수(속성 및 메서드)는 this 키워드를 붙여서 지역변수로 한정시킵니다.
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();
결과보기
18. 함수 유형 : 프로토타입 함수
함수들을 한꺼번에 실행시키는 것이 아닌 내가 원하는 함수만 실행할 수 있습니다.
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();
결과보기
19. 함수 유형 : 객체 리터럴 함수
객체 리터럴은 중괄호 안에 프로퍼티를 정의하여 객체를 생성합니다.
function func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
}
func.prototype = {
result1 : function(){
document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.
");
},
result2 : function(){
document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.
");
},
result3 : 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.result1();
info2.result2();
info3.result3();
결과보기
20. 즉시 실행 함수
즉시 실행 함수는 정의되자마자 즉시 실행되는 함수를 말합니다.
(function func(){
document.write("함수가 실행되었습니다.");
}());
(() => {
document.write("함수가 실행되었습니다.");
})();
결과보기
21. 파라미터(parameter) 함수
파라미터란, 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미합니다.
function func(str){
document.write(str);
}
func("함수가 실행되었습니다.")
function func(str="함수가 실행되었습니다."){
document.write(str);
}
func()
결과보기
22. 아규먼트(arguments) 함수
아규먼트란, 함수에 전달되는 인수들을 배열 형태로 나타낸 객체입니다. arguments[]는 배열 형식으로 전달된 인수를 말합니다.
function func(a, b){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수가 실행되었습니다.", "함수가 실행되었습니다.");
결과보기
23. 재귀함수 : 자기 자신을 호출
재귀함수는 자기 자신을 호출하는 함수로 동시에 여러개를 실행합니다.
function func(num) {
if (num <= 1) {
document.write("함수가 실행되었습니다." + num)
} else {
document.write("함수가 실행되었습니다." + num)
func(num - 1);
}
}
func(10);
// 애니메이션
function animation() {
document.write("함수가 실행되었습니다.")
requestAnimationFrame(animation)
}
animation();
결과보기
24. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수
콜백함수는 하나의 함수가 실행되고 두 번째 함수를 실행합니다.
function func() {
document.write("함수가 실행되었습니다.2")
}
function callback(str) {
document.write("함수가 실행되었습니다.1")
str();
}
callback(func);
결과보기
25. 콜백함수 : 반복문
콜백함수를 반복문을 사용해 반복하는 방법입니다.
function func(index) {
document.write("함수가 실행되었습니다." + index);
}
function callback(num) {
for (let i = 1; i <= 10; i++) {
num(i);
}
}
callback(func);
결과보기
26. 콜백함수 : 동기/비동기
콜백함수의 동기/비동기 입니다. 여기서 동기는 동시에 실행하는 것을 말합니다.
//01.
// function funcA() {
// document.write("funcA가 실행되었습니다.
");
// }
// function funcB() {
// document.write("funcB가 실행되었습니다.
");
// }
// funcA();
// funcB();
//a
//b
//02.
// function funcA() {
// setTimeout(() => {
// console.log("funcA가 실행되었습니다.
");
// }, 1000);
// }
// function funcB() {
// console.log("funcB가 실행되었습니다.
");
// }
// funcA();
// funcB();
//b
//a
//03.
// function funcA(callback) {
// setTimeout(() => {
// console.log("funcA가 실행되었습니다.
");
// callback();
// }, 1000);
// }
// function funcB() {
// console.log("funcB가 실행되었습니다.
");
// }
// funcA(function () {
// funcB();
// })
//a
//b
//04.
function funcA(callback) {
setTimeout(() => {
console.log("funcA가 실행되었습니다.
");
callback();
}, 1000);
}
function funcB(callback) {
setTimeout(() => {
console.log("funcB가 실행되었습니다.
");
callback();
}, 1000);
}
function funcC(callback) {
setTimeout(() => {
console.log("funcC가 실행되었습니다.
");
callback();
}, 1000);
}
function funcD() {
setTimeout(() => {
console.log("funcD가 실행되었습니다.
");
}, 1000);
}
funcA(function () {
funcB(function () {
funcC(function () {
funcD()
});
});
});
결과보기
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
28. 내부함수 : 스코프, 클로저
함수 안에 또 다른 함수를 선언한 것이 내부함수입니다. 스코프는 어느 범위(전역, 지역)까지 참조되는지를 뜻합니다. 클로저는 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 합니다.
function func() {
function funcA() {
document.write("함수가 실행되었습니다.")
};
funcA();
function funcB() {
document.write("함수가 실행되었습니다.")
};
funcB();
}
func();
결과보기
29. 클래스
클래스는 함수의 집합체입니다.
class study {
constructor(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
}
result() {
document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.")
}
}
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study("2", "웹스토리보이", "프론트앤드 개발자");
info1.result();
info2.result();
결과보기
30. 클래스 상속
클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있습니다. 기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있습니다.
class study {
constructor(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
}
result() {
document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.")
}
}
class study2 extends study {
constructor(num, name, job, age) {
super(num, name, job);
this.age = age;
}
result() {
document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "이며 나이는 " + this.age + "세 입니다.")
}
}
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2("2", "웹스토리보이", "프론트앤드 개발자", 100);
info1.result();
info2.result();
info2.result();