- 01. 선언적 함수
- 02. 익명 함수
- 03. 매개변수 함수
- 04. 리턴값 함수
- 05. 화살표 함수 : 선언적 함수
- 06. 화살표 함수 : 익명 함수
- 07. 화살표 함수 : 매개변수 함수
- 08. 화살표 함수 : 리턴값 함수
- 09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값
- 10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략
- 11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴값 생략 + 리턴값 생략
- 12. 화살표 함수 : 선언적함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴값 생략 + 리턴값 생략
- 13. 내부 함수
- 14. 즉시 실행 함수
- 15. 파라미터 함수
- 16. 재귀 함수
- 17. 콜백 함수
- 18. 객체 생성자 함수
- 19. 프로토타입 함수
- 20. 객체 리터럴 함수
- 21. 클래스
01. 선언적 함수
{
document.write("선언적 함수);
// function 키워드
function func() {
document.write("함수가 실행되었습니다");
}
func(); // 함수 호출
}결과보기
함수가 실행되었습니다
02. 익명 함수
{
const func = function () {
document.write("함수가 실행되었습니다");
}
func();
}결과보기
함수가 실행되었습니다
03. 매개변수 함수
{
function func(str) {
document.write(str);
}
func("함수가 실행되었습니다");
}결과보기
함수가 실행되었습니다
04. 리턴값 함수
{
function func() {
const str = "함수가 실행되었습니다";
return str; // 함수의 리턴값(반환값)
}
document.write(func());
}결과보기
함수가 실행되었습니다
05. 화살표 함수 : 선언적 함수
{
func = () => {
document.write("함수가 실행되었습니다");
}
func();
document.write(func());
}결과보기
함수가 실행되었습니다
06. 화살표 함수 : 익명 함수
{
const func = () => {
document.write("함수가 실행되었습니다");
}
func();
}결과보기
함수가 실행되었습니다
07. 화살표 함수 : 매개변수 함수
{
const func = (str) => {
document.write(str);
}
func("함수가 실행되었습니다");
}결과보기
함수가 실행되었습니다
08. 화살표 함수 : 리턴값 함수
{
func = () => {
const str = "함수가 실행되었습니다
";
return str;
}
document.write(func());
}결과보기
함수가 실행되었습니다
9. 화살표 함수 : 익명함수 + 매개변수 + 리턴값
{
const func = (str) => {
return str;
}
document.write(func("함수가 실행되었습니다"));
}결과보기
함수가 실행되었습니다
10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략
{
const func = str => {
return str;
}
document.write(func("함수가 실행되었습니다"));
}결과보기
함수가 실행되었습니다
11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴값 생략
{
const func = str => {
return str;
}
document.write(func("함수가 실행되었습니다"));
}결과보기
함수가 실행되었습니다
12.화살표 함수 : 선언적함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴값 생략
{
func = str => str; // func : 함수명, str : 매개변수, =>str; : 리턴값 str
document.write(func("함수가 실행되었습니다"));
}결과보기
함수가 실행되었습니다
13. 내부 함수
{
//funcA(), funcB() 함수들은 내부 함수
function func() {
function funcA() {
document.write("함수 A가 실행되었습니다");
}
funcA();
function funcB() {
document.write("함수 B가 실행되었습니다");
}
funcB();
}
func();
}결과보기
함수 A가 실행되었습니다
함수 B가 실행되었습니다
14. 즉시 실행 함수
{
function func() {
document.write("함수가 실행되었습니다");
}
func();
(function () {
document.write("함수가 실행되었습니다");
}());
//화살표 함수
(() => {
document.write("함수2 가 실행되었습니다");
})();
}결과보기
함수가 실행되었습니다
함수가 실행되었습니다
함수2 가 실행되었습니다
15. 파라미터 함수
{
function func(str = "함수가 실행되었습니다") {
document.write(str);
}
func();
}결과보기
함수가 실행되었습니다
16. 아규먼트 함수
{
//배열에서 저장된것처럼 a,b값을 저장
function func(a, b) {
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수가 실행되었습니다", "함수가 실행되었습니다");
}결과보기
함수가 실행되었습니다
함수가 실행되었습니다
17. 재귀 함수
{
function func(num) {
if(num <= 1) {
document.write("함수 실행");
} else {
document.write("함수 다시 실행");
func(num - 1);
}
}
func(5);
}결과보기
18. 콜백함수
{
function func() {
document.write("func 함수 실행");
}
function callBack(str) {
document.write("callBack 함수 실행"); // "calllBack 함수 실행 다음에 func 함수 실행 출력"
str();
}
callBack(func);
}결과보기
동기/ 비동기 함수
{
function funcC() {
setTimeout(() => {
console.log('C');
}, 1000); // 1000ms -> 1초
}
function funcD() {
console.log("D");
}
funcC();
funcD();
// 위의 코드를 콜백 함수로 변경
function funcE(callback) {
setTimeout(() => {
console.log('E');
callback();
}, 1000);
}
function funcF() {
console.log('F');
}
funcE(function() {
funcF();
});
}결과보기
19. 객체 생성자 함수
함수 유형 : 함수와 매개변수를 이용한 형태
{
function func() {
document.write("func 함수 실행");
}
function callBack(str) {
document.write("callBack 함수 실행"); // "calllBack 함수 실행 다음에 func 함수 실행 출력"
str();
}
callBack(func);
}결과보기
함수 유형 : 함수와 변수를 이용한 형태
{
function func(num, name ,job) {
document.write(num + ".나의 이름은 " + name + "이고, 직업은 " + job + "이다");
}
const youNum1 = '1';
const youName1 = "abc";
const youJob1 = "기획자";
const youNum2 = '2';
const youName2 = "cde";
const youJob2 = "프론트앤드 개발자";
func(youNum1, youName1, youJob1);
func(youNum2, youName2, youJob2);
}결과보기
함수 유형 : 함수와 배열를 이용한 형태
{
function func(num, name ,job) {
document.write(num + ".나의 이름은 " + name + "이고, 직업은 " + job + "이다");
}
const info = [
{
num: '1',
name: "abcd",
job: "웹 퍼블리셔"
},
{
num: '2',
name: "인포",
job: "프론트앤드 개발자"
}
];
func(info[0].num, info[0].name, info[0].job);
func(info[1].num, info[1].name, info[1].job);
}결과보기
함수 유형 : 객체 안의 변수와 함수를 이용한 형태
{
function func(num, name ,job) {
document.write(num + ".나의 이름은 " + name + "이고, 직업은 " + job + "이다");
}
const info = [
{
num: '1',
name: "abcd",
job: "웹 퍼블리셔"
},
{
num: '2',
name: "인포",
job: "프론트앤드 개발자"
}
];
func(info[0].num, info[0].name, info[0].job);
func(info[1].num, info[1].name, info[1].job);
}결과보기
함수 유형 : 객체 생성자 함수
{
function func(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
this.result = function() {
document.write(this.num + ".나의 이름은 " + this.name + "이고, 직업은 " + this.job + "이다");
}
}
// 인스턴스 생성
const info1 = new func('1', "abcd", "웹 퍼블리셔");
const info2 = new func('2', "내이름", "프론트앤드 개발자");
info1.result();
info2.result();
}결과보기
함수 유형 : 프로토타입 함수
{
function func(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
}
// result 함수는 func 함수에서 파생된 함수라는 것을 표현(this 객체를 사용할 수 있다)
func.prototype.result = function() {
document.write(this.num + ".나의 이름은 " + this.name + "이고, 직업은 " + this.job + "이다");
}
const info1 = new func('1', "abcd", "웹 퍼블리셔");
const info2 = new func('2', "내이름", "프론트앤드 개발자");
info1.result();
info2.result();
}결과보기
함수 유형 : 객체 리터럴 함수
{
function func(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
}
func.prototype = {
result1: function() {
document.write(this.num + ".나의 이름은 " + this.name + "이고, 직업은 " + this.job + "이다");
},
result2: function() {
document.write(this.num + ".나의 이름은 " + this.name + "이고, 직업은 " + this.job + "이다");
}
}
const info1 = new func('1', "abcd", "웹 퍼블리셔");
const info2 = new func('2', "내이름", "프론트앤드 개발자");
info1.result1();
info2.result2();
}결과보기
20. 클래스
{
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', "abcd", "웹 퍼블리셔");
const info2 = new study('2', "내이름", "프론트앤드 개발자");
info1.result();
info2.result();
// 클래스 상속
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;
}
result2() {
document.write(this.num + ".나의 이름은 " + this.name + "이고, 직업은 " + this.job + "이다" + " 나이는 " + this.age);
}
}
const info1 = new study('1', "abcd", "웹 퍼블리셔");
const info2 = new study2('2', "내이름", "프론트앤드 개발자", 100);
info1.result();
info2.result();
info2.result2();
}