“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
코딩공부기록
오늘은 코딩공부를 한 내용을 적어보도록 하겠습니다. 함수유형에 대해서 적어보도록 하겠습니다. 먼저 함수유형에는 선언적함수,익명함수,매개변수함수,리턴값 함수가 존재합니다.
<선언적 함수>
funtion func (){
document.write ("실행되었습니다.");
}
func();<익명함수>
const func = function(){
document.write("실행 되었습니다.");
}
func();<매개변수 함수>
function func(str){
document.write(str);
}
func("실행 되었습니다.");
function c(str1,str2,str3){
document.write(str1,str2,str3);
}
c("실행3","실행4","실행5"); //매개 변수는 2개,3개 쓸 수 있습니다.<리턴값 함수>
function func(){
const str = "실행되었습니다.";
return str;
}
document.write(func());
여기서 함수를 더 간단하게 쓰기위해 화살표를 사용해서 화살표 함수를 만드는데 쉽게 외우기 위해서 function을 생략하고 괄호와 중괄호 사이에 =과 =>을 사용해서 화살표 함수를 만들어 줄 수 있습니다.
<선언적함수 화살표 함수>
func = () => {
document.wirte("실행되었습니다.")
}
func();
똑같이 익명함수,매개변수함수,리턴값함수도 선언적 함수와 같이 만들어줄 수 있겠죠?
다음은 화살표 함수에서 익명함수 + 매개변수 + 리턴값을 사용할 수 있는 함수가 있습니다.
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}여기서는 괄호가 생략됩니다. 그리고 여기서 str을 감싸고 있는 괄호를 생략할 수 있고 리턴값을 생략할 수 있고 익명함수가 아닌 선언적 함수를 사용하여서
const func = str => str;
document.write(func("실행되었습니다."));이렇게 간단하게 나타낼 수 있습니다.
또 함수유형에서는 매개변수를 활용한 형태를 나타낼 수 있습니다.
function func(num, str1, str2){
document.write(num +". "+ str1 + "가" + str2 + "되었습니다.");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");
문자열을 하나하나 넣어두기 힘드니 백틱을 사용해서 간단하게 만들어줄 수 있습니다.
function func(num, str1, str2){
document.write(`${num}. ${str1}가 ${str2}되었습니다.`);
}
func("1","함수","실행");
func("2","자바스크립트","실행");
func("3","리액트","실행");함수안에 변수와 배열을 나타낼 수 있는데 이때 변수 안에 값을 지정해서 넣을 수 있고 배열을 사용 객체를 사용 배열과 객체를 사용해서 나태낼 수 있는데 출력값을 자세히 보시면 될것 같습니다.
<변수 안에 값을 지정>
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);
<배열을 사용해서>
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]);
<객체사용>
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);<배열과 객체 사용>
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) //변수 info의 0번째 .을 통해 객체의 키(이름) 불러오기
func(info[1].num, info[1].name, info[1].word)
func(info[2].num, info[2].name, info[2].word)
다음은 객체 안에 함수를 이용한 형태입니다.
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();여기서 result값을 이용해서 info안 객체를 실행시켜야 하므로 함수 안에 실행시킬 객체를 적어준 후 함수를 실행시켜주기위해 info.result값을 구하면 값이 나옵니다.
함수유형에는 객체 생성자 함수가 있습니다. this를 사용한 형태입니다.
function Func (num,name,word){
this.num //this로 인하여 num의 값을 가져와서 다시 저장
this.name
this.word
this.result = function(){
document.write(num +". "+ str1 + "가" + str2 + "되었습니다.");
}
}
//인스턴스 생성 : 매개변수와 구별해 주기 위해 생성됨
const info1 = new func(1, "함수", "실행"); //const info1 = 식으로 변수의 값을 실행시켜줘야함
const info2 = new func(2, "자바스크립트", "실행"); //2가 들어와도 num2가 따로 생성하지 않아도 된다.
const info3 = new func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();이때는 인스턴스를 사용해서 const info = new fucn를 사용해서 변수의 값을 실행시켜줘야 합니다.
여기서 또 함수를 안에 써주는게 아닌 객체 밖에 쓸 수 있는데 이것을 프로토 타입 원형의 형태다 해서 프로토 타입이라고 부릅니다.
function Func(unm, 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();프로토 타입은 객체 안에 있던 함수를 다시 밖으로 빼주고 prototype을 사용해 줍니다. 객체 생성자 함수와 동일하게 인스턴스를 사용해 줍니다.
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();마지막으로 객체 리터럴 함수인데 프로토 타입에서 튀어나온 함수를 다시 안으로 넣어주며 여러 함수를 실행시켜주는 형식입니다. 인스턴스를 적어주어 실행문을 적어주고 실행시켜줍니다.