한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
코딩일기
오늘은 함수공부를 했다.
함수란 무엇인가...................
함수는 입력값을 받아 처리한 후, 출력값을 반환하는 일련의 과정을 정의한 것입니다. 보다 수학적인 용어로는, 함수는 하나 이상의 변수(입력값)를 받아서 연산을 수행한 후, 하나의 결과값(출력값)을 반환하는 규칙적인 관계를 의미합니다.
선언적함수,익명함수,매개변수 함수, 리턴 값 함수를 무수히 반복하였고 화살표 함수로 바꾸는 연습도 복습 하였다.
//선언적 함수
{
function func(){
document.write("함수가 실행되었습니다.1<br>")
};
func();
}
//익명 함수
{
const func = function(){
document.write("함수가 실행되었습니다.2<br>");
};
func();
}
//매개변수 함수
{
function func(str){
document.write(str)
};
func("함수가 실행되었습니다.3<br>");
}
//리턴값 함수
{
function func(){
const str = "함수가 실행되었습니다.4<br>"
return str;
};
document.write(func());
}
//선언적 함수 (화살표함수)
{
func = () => {
document.write("함수가 실행되었습니다.5<br>")
};
func();
}
//익명 함수 (화살표함수)
{
const func = () => {
document.write("함수가 실행되었습니다.6<br>");
};
func();
}
//매개변수 함수 (화살표함수)
{
func = (str) => {
document.write(str)
};
func("함수가 실행되었습니다.7<br>");
}
//리턴값 함수 (화살표함수)
{
func = () => {
const str = "함수가 실행되었습니다.8<br>"
return str;
};
document.write(func());
}를 시험 보았고 리턴 값 함수 뻬고 거의 이해하였다.그 후
//익명함수 + 매개변수 + 리턴값(화살표 함수)
{
const func = (str) => {
return str;
};
document.write(func("함수가 실행되었습니다.9<br>"));
}
//익명함수 + 매개변수 + 리턴값 괄호 생략 (화살표 함수)
{
const func = str => {
return str;
};
document.write(func("함수가 실행되었습니다.10<br>"));
}
//익명함수 + 매개변수 + 리턴값 괄호 생략 리턴생략(화살표 함수)
{
const func = str => str;
document.write(func("함수가 실행되었습니다.11<br>"));
}
//선언적 함수 + 익명함수 + 매개변수 + 리턴값 괄호 생략 리턴생략(화살표 함수)
{
func = str => str;
document.write(func("함수가 실행되었습니다.12<br>"));
}
저번에 배운 생략하는 방법을 또 복습하였고 거의 다 머리에 때려 박아버렸다.
그 다음은 점점 난이도가 있는 예제인데 많이 어려운거 같다.
//함수 유형 : 함수와 매개변수를 이용한 형태
{
function func(num, str1, str2){
document.write(`${num}. ${str1}가 ${str2}되었습니다.<br>`);
}
func("1","함수", "실행");
func("2","함수", "실행");
func("3","함수", "실행");
}
document.write("<br><b>함수 유형 : 함수와 변수를 이용한 형태</b><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);
}
//함수 유형 : 함수와 배열, 객체를 이용한 형태
{
const info = [
{
num: "1",
name: "함수",
com: "실행"
},{
num: "2",
name: "자바스크립트",
com: "실행"
},{
num: "3",
name: "리액트",
com: "실행"
}
];
function func(num, str1, str2){
document.write(`${num}. ${str1}가 ${str2}되었습니다.<br>`)
}
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);
}
//함수 유형 : 객체안에 함수를 이용한 형태
{
const info = {
num1: "11",
name1 : "함수",
com1: "실행",
num2: "12",
name2 : "자바스크립트",
com2: "실행",
num3: "13",
name3 : "리액트",
com3: "실행",
result1: () => {
document.write(`${info.num1}. ${info.name1}가 ${info.com1}되었습니다.<br>`);
},
result2: () => {
document.write(`${info.num2}. ${info.name2}가 ${info.com2}되었습니다.<br>`);
},
result3: () => {
document.write(`${info.num3}. ${info.name3}가 ${info.com3}되었습니다.<br>`);
}
}
//11.함수가 실행되었습니다.
info.result1();
info.result2();
info.result3();
}
//함수 유형 : 객체 생성자 함수 매개변수 + 객체안에 함수 + this + 인스턴스
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
this.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`)
};
}
//인스턴스
const info1 = new func("100","함수","실행");
const info2 = new func("200","자바스크립트","실행");
const info3 = new func("300","리액트","실행");
//실행문
info1.result();
info2.result();
info3.result();
}
객체 생성자 함수는 매개변수+ 객체안에 함수 this 인스턴스 이렇게 외우면 쉽게 외워진다.
//20. 함수 유형 : 프로토 타입
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
};
func.prototype.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`)
}
//인스턴스
const info1 = new func("101","함수","실행");
const info2 = new func("202","자바스크립트","실행");
const info3 = new func("303","리액트","실행");
//실행문
info1.result();
info2.result();
info3.result();
}
프로토 타입은 객체생성자 함수에 있는 함수를 밖으로 빼고 프로토타입을 붙여주면 된다.
모든인스턴스가 공유해서 사용할수있게 밖으로 빼는거 같다.....
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("202","자바스크립트","실행");
const info3 = new func("303","리액트","실행");
//실행문
info1.result1();
info2.result2();
info3.result3();
이건 객체리터럴 함수인데 함수를 객체로 묶어서 사용한다.
{
(function (){
document.write("500함수가 실행되었습니다<br>")
})();
(() => {
document.write("501함수가 실행되었습니다<br>")
})();
}
즉시 실행함수는 함수를 즉시 실행하기위한 함수 종류 중 하나로 완전 간결하다. 다 지워도 나온다;;;
function func(str = "600.함수가 실행되었습니다.<br>"){
document.write(str);
};
func();
((str = "601.함수가 실행되었습니다.<br>") =>{
document.write(str);
})();
이름이 이상한 파리미터 함수도 배웠다 파리? 파라?피리?미터 뭔지 모르겠지만 매개변수를 변형한거 같은 느낌을 받았다.
function func(num){
if(num<=1){
document.write("1이랑 같아서 반복 끝<br>");
} else {
document.write("1보다 커서 반복 중<br>");
func(num-1)
}
}
func(10);
재귀함수는 무한에 빠지고 싶을때 쓰는 함수인거 같다. if문을 안쓰면 무한에 빠진다11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111이런식으로
function func(){
document.write("2. 함수 실행<br>")
}
function callback(str){
document.write("1. 함수 실행<br>")
str();
}
callback(func)
콜백함수는 함수 안의 함수가 있는 함수이고 함수를 두번 실행 시켜준다고 이해하면 된다고 하셨다. (다른 함수에 인수로 넘겨지는 함수)
오늘 점심은 KFC 핫징거 버거 세트에 감튀를 치즈볼로 바꿔 먹었다. (사이다)