함수의 유형
함수는 자바스크립트에서 기본적인 구성 중의 하나입니다. 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야 합니다. 오늘은 자바스크립트 함수의 유형에 대해 알아보겠습니다.
01. 함수와 매개변수를 이용한 형태
함수와 매개변수를 이용한 형태입니다.
다음은 함수와 매개변수를 이용한 형태의 형식입니다.
function func(num, str1, str2){
document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.
");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "제이쿼리", "실행");
결과보기
02. 함수와 변수를 이용한 형태
함수와 변수를 이용한 형태입니다. 변수를 선언하여 데이터를 저장한 후 불러옵니다.
다음은 함수와 변수를 이용한 형태의 예시입니다.
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);
결과보기
03. 함수와 배열, 객체를 이용한 형태
함수와 배열, 객체를 이용한 형태입니다. 배열 속의 객체에 데이터를 저장한 후 불러옵니다.
다음은 함수와 배열, 객체를 이용한 형태의 예시입니다.
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);
결과보기
04. 객체 안에 변수와 함수를 이용한 형태
객체 안에 변수와 함수를 이용한 형태입니다. 객체 안에 함수를 저장한 후 함수를 실행합니다.
다음은 객체 안에 변수와 함수를 이용한 형태의 예시입니다.
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();
결과보기
05. 객체 생성자 함수
객체 생성자 함수는 객체 생성시 작성 코드 길이를 줄여줍니다. 생성자 함수는 첫 글자를 대문자로 작성하는 것이 좋지만 소문자로 작성해도 무방합니다. 생성자 함수 내부의 변수(속성 및 메서드)는 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();
결과보기
06. 프로토타입 함수
함수들을 한꺼번에 실행시키는 것이 아닌 내가 원하는 함수만 실행할 수 있습니다.
다음은 프로토타입 함수의 예시입니다.
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();
결과보기
07. 객체 리터럴 함수
객체 리터럴은 중괄호 안에 프로퍼티를 정의하여 객체를 생성합니다.
다음은 객체 리터럴 함수의 예시입니다.
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() (3) | 2022.08.22 |
|---|---|
| [javascript]search() (3) | 2022.08.22 |
| [javascript]includes() (3) | 2022.08.17 |
| [javascript]padStart() / padEnd() (3) | 2022.08.17 |
| [javascript]repeat() (3) | 2022.08.17 |
댓글