728x90
함수(2)
저번 함수 게시글에 이어 이번에는 좀 더 활용하여 쓰이는 함수에 대해 알아보겠습니다.
지난번에 배운 내용에서 심화되는 부분이기 때문에 저번 게시글 한번씩만 다시 복습하고 오시면 PERFECT 👍
한번 더 짚고 가기 ! 함수란 실행문의 집합체이며, 재활용이 가능하다는 포인트 ✨
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 = "실행";
// 1. 함수가 실행되었습니다.
func(youNum1, youStr1, youCom1);
// 2. 자바스크립트가 실행되었습니다.
func(youNum2, youStr2, youCom1);
// 3. 제이쿼리가 실행되었습니다.
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 : "함수",
word : "실행",
num2 : 2,
name2 : "자바스크립트",
word2 : "실행",
num3 : 3,
name3 : "제이쿼리",
word3 : "실행",
result1 : function(){
document.write(info.num1 + ". " + info.name1 + "가 " + info.word +"되었습니다.
");
},
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. 함수 유형 : 객체 생성자 함수
정말 많이 쓰이며 중요한 함수 유형입니다.
function func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
this.result1 = 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();
결과보기
18. 함수 유형 : 프로토타입 함수
반환형태 + 함수이름 ( 매개변수(매개변수 자료형 + 매개변수 이름(생략가능)) );
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 +"되었습니다.
");
}
//인스턴스 생성
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");
//실행
info1.result1();
info2.result2();
info3.result3();
결과보기
19. 함수 유형 : 객체 리터럴 함수
function을 생략하고 = 과 {} 를 통해 간단하게 표현을 해줄 수 있습니다. {} 도 생략이 가능합니다.
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();
결과보기
'JAVASCRIPT' 카테고리의 다른 글
JAVASCRIPT | 문자열 메서드 | match( ) (8) | 2022.08.22 |
---|---|
JAVASCRIPT | 문자열 메서드 | search( ) (8) | 2022.08.22 |
JAVASCRIPT | 문자열 메서드 | includes( ) (5) | 2022.08.17 |
JAVASCRIPT | 문자열 메서드 | padStart( ) / padEnd( ) (5) | 2022.08.17 |
JAVASCRIPT | 문자열 메서드 | repeat( ) (6) | 2022.08.17 |
댓글