JavaScript 기본3 (function, argument)

앞서 player.point에 () 없었어, 함수가 아니기 때문

 

function이란?

반복해서 사용할 수 있는 코드의 조각 같은것

 

함수가 없다면 예를들어 다음과 같은 경우

console.log하는데 복붙을 너무 많이 하는 상황임, 이름만 바꾸고 나머진 복붙을 하고 있음

코드의 반복을 최대한 줄이고 싶어짐

 

함수만드는 법 

위와 같이 만들면 sayHello();를 실행할때마다 중괄호 안의 코드가 실행됨

 

그런데 위의 X가 원하는 대로 변경되어 출력하는 함수를 만들고 싶으면 argument(인수,인자)를 도입해야함

argument는 함수를 실행할때 data(정보)를 함수에 보내는 방법임

 

argument(인수, 인자) 받는 법

인자 여러개 받기 가능 

이때 변수 name, age는 함수 안에서만 존재하며

함수 밖에서 출력하고자 할때 실행되지 않음

인자는 어떤 형식을 받아오건 상관없음 

 

객체에서 함수를 불러오는 방법 ( player.sayHello("min"); 과 같이 사용하고 싶어)

function sayHello(name, age){
    console.log("hello my name is "+ name+" and I'm "+age);
}
 
//객체에 함수 넣을때에는, 일반적 함수만들기와 모양새가 조금 다름
const player ={
    name : "min",
    age : 20,
    fat : false,
    sayHello : function(){
        console.log(" hello");
 
    }
}
console.log(player.name);
player.sayHello(); //min hello 출력

 

객체안 함수에서 인자 받아오기 

const player ={
    name : "min",
    age : 20,
    fat : false,
    sayHello : function(otherPersonName){
        console.log("hello "+otherPersonName+" nice to meet you ");
 
    }
}
player.sayHello("jin");//hello jin nice to meet you 출력

 

지금까지 배운 function, object 이용해 계산기 만들어보기

const calculator = {
    add : function (a,b) {
        console.log(a+b);
    },
    minus : function(a,b){
        console.log(a-b);
    },
    divide : function(a,b){
        console.log(a/b);
    },
    times : function(a,b){
        console.log(a*b);
    }
    power : function(a,b){
        console.log(a**b);
    }
}
 
calculator.add(1,2);//3출력
calculator.minus(5,1);//4출력
calculator.divide(4,2);//2출력
calculator.times(5,4);//20출력
calculator.power(2,3);//8출력
 

return의 필요성 

 

return의 도입

const age = 20;
function calculKrAge(ageOfForeigner){
    return ageOfForeigner+2;
}
 
const KrAge = calculKrAge(age);
console.log(KrAge);//콘솔에 22 출력

return의 실행방식 이해하기

이렇게 하면 96을 넣든 말든 krAge엔 hello값이 들어가게 됨

return을 하게 되면function은 끝나게 됨, function작동 멈추고 결과값 return하고 끝내버림

뒤의 코드 실행안됨 유의

 

return을 적용해 위의 계산기코드 수정하면

const calculator = {
    add : function (a,b) {
        return (a+b);
    },
    minus : function(a,b){
        return (a-b);
    },
    divide : function(a,b){
        return (a/b);
    },
    times : function(a,b){
        return (a*b);
    },
    power : function(a,b){
        return (a**b);
    }
}

 

return의 활용

return을 사용한 뒤 이와 같이 상호의존적인 코드도 작성가능해짐

 

 

이와 같이 콘솔창에서 접근도 가능해짐