“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
01. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 : 실행되었습니다.
우선 const를 사용하여 함수 func를 선언합니다. 이때 매개변수인 str을 통해 문자열을 그대로 반환합니다.
출력문에 func함수를 호출하여 결과값인 실행되엇습니다.문자열이 출력됩니다.
02. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
{
const func = str => {
return str;
}
document.write(func("실행되었습니다.")); // 리액트나 뷰에 많이 사용
}
결과 : 실행되었습니다.
이번껀 1번에서 괄호가 생략된 모습입니다.
이는 리액트나 뷰에서 많이 사용됩니다.
03. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
const func = str => str;
document.write(func("실행되었습니다.")); // 리액트나 뷰에 많이 사용
}
결과 : 실행되었습니다.
이번에는 리턴값이 생략된 코드입니다.
04. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
func = str => str;
document.write(func("실행되었습니다.")); // 리액트나 뷰에 많이 사용
// this를 사용할 수 없다는 단점이있다.
}
결과 : 실행되었습니다.
이번엔 익명함수가 아닌 선언적 함수를 통해 만들어진 코드입니다.
05. 함수 유형 : 함수와 매개변수를 이용한 형태
{
{
function func(num, str1, str2){
document.write(num + ". " +str1 + "가 " + str2 + "되었습니다.");
}
func("1","함수","실행");
func("2","자바스크립트","실행");
func("3","리액트","실행");
}
}
결과 : 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액터가 실행되었습니다.
매개변수를 사용한 함수를 통해 출력할 값을 함수를 통해 넣습니다. func()에서 부른 값을 함수 안에 있는 매개 변수선언 자리에 맞물려 출력문으로 들어가 결과가 출력됩니다.
06. 함수 유형 : 함수와 변수를 이용한 형태
{
{
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 yocom1 = "실행";
func(youNum1, youstr1, yocom1); // 1. 함수가 실행되었습니다.
func(youNum2, youstr2, yocom1); // 2. 자바스크립트가 실행되었습니다.
func(youNum3, youstr3, yocom1); // 3. 리액스가 실행되었습니다.
}
document.write("")
}
결과 : 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액터가 실행되었습니다.
funcf라는 함수에 매개변수를 통해 출력문에 매개변수를 필요한 형태에 넣은후
다른 변수를 선언합니다.
이때 따로 선언한 변수에는 원하는 값을 넣은 후
이 변수를 함수명 옆에 매개변수 자리에 넣어 함수를 실행합니다.
07. 함수 유형 : 함수와 배열을 이용한 형태
{
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]);
}
결과 : 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액터가 실행되었습니다.
이번에도 매개변수를 통해 원하는 위치에 값을 넣을 수 있도록 준비 한 후
배열에 원하는 값을 넣어 선언합니다.
함수 명과 매개변수 자리에 원하는 값을 배열의 인덱스를 각각 넣어 함수를 실행합니다.
08. 함수 유형 : 함수와 객체를 이용한 형태
{
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);
}
결과 : 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액터가 실행되었습니다.
배열과 마찬가지로 배열의 인덱스말고 객체의 키값을 넣어 출력합니다.
09. 함수 유형 : 함수와 배열, 객체를 이용한 형태
함수와 배열 안에 객체로 나열된 데이터를 사용한 함수 유형입니다.
{
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);
func(info[1].num,info[1].name,info[1].word);
func(info[2].num,info[2].name,info[2].word);
// 필요한 값을 저장하기 위해 map을 사용하여 가져올수 있고 배열에 인덱스에 변수 i를 넣어 증가값으로 출력
}
결과 : 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액터가 실행되었습니다.
배열 안에 객체를 넣어 함수를 실행하는 것으로 배열의 위치와 키값을 넣어 함수를 출력합니다.
10. 함수 유형 : 객체안에 함수을 이용한 형태
{
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();
}
결과 : 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액터가 실행되었습니다.
9번에서 값을 객체에 넣어 출력한 것이지만 이번에는 출력문까지 객체에 넣어 객체을 출력할때 함수을 통해 출력합니다.
11. 함수 유형 : 객체생성자 함수
{
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();
}
결과 : 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액터가 실행되었습니다.
이번엔 객체 생성자를 활용한 함수 입니다.
우선 func라는 함수를 정의합니다. this로 값을 받아 객체를 생성합니다.
그후 result를 객체로 받아 함수에 출력문을 가지오록합니다.그후 info라는 3개읠 상수를 선언하는 데 각각 함수를 선언할수 있도록 하고 그 후 객체를 통해 함수를 출력합니다.
12. 함수 유형 : 프로토타입 함수
{
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();
}
결과 : 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액터가 실행되었습니다.
위의 11번과 비슷하지만 객체지향 프로그래밍에서 프로토타입을 이용항여 메소드를 정의합니다.
func.prototype은 func라는 생성자 함수가 만드는 인스턴스에서 동유된는 객체입이다. 위의 코드에서 result라는 메소드를 추가하여 모든 func인스턴스에서 사용할 수 있게 합니다.
그후 객체의 속성값을 이용하여 문장을 출력합니다.