[JS] Function, Return, Conditional

#2.7-8 Functions

 

function

반복해서 사용할 수 있는 코드 조각.

어떤 코드를 캡슐화 해서 실행을 여러번 할 수 있게 해준다.

 

함수 선언

function doSomething() { 

   console.log('hello');

}

 

함수 호출

doSomething();

 

 

 

1. 선언

-> function 함수명() { 실행코드 }

 

2. 실행

-> 함수명();

argument(인수)를 보내야 함. 
인수란 함수를 실행하는 동안 어떤 정보를 함수에게 보낼 수 있는 방법. 소괄호 안에 위치한다.

function sayHello() {
    console.log("Hello!");
}

alert();
console.log();
sayHello();
sayHello();

 

alert 팝업과 hello 출력값은 뜨는데, console.log는 입력값이 없어서 결과값이 안나옴.

우리가 원하는 건 hello my name is A 라고 했을 때 A만 바뀌게 하는 것.

 

function sayHello(nameOfMyFriend) {
    console.log(nameOfMyFriend);
}

sayHello("suyeon");
sayHello("junho");
sayHello("circle");

 

 

-> 

suyeon

junho

circle

 

셋 다 정상적으로 출력됨.

 

다른 예제로 연습하기

 

function sayHello(NameOfMyFriend, age) {
    console.log("Hello my name is " + NameOfMyFriend +  " and I am " + age + " years old.");

}

sayHello("suyeon", 28);
sayHello("junho", 30);
sayHello("circle", 27);

 

 

-> 

Hello my name is suyeon and I am 28 years old.
Hello my name is junho and I am 30 years old.
Hello my name is circle and I am 27 years old.

 

 

연습

 

function plus(firstNumber, secondNumber){
    console.log(firstNumber + secondNumber);
}

function divide(a, b) {
    console.log(a / b);
}

plus(20, 30);
divide(10, 2);

 

20은 firstNumber와, 30은 secondNumber와 같다. 실행하면 50  5 나옴.

순서는 매우 중요하니 기억해두기.

 

 

player object 만들어보기

 

function에게 정보를 보내는 법
이건 function이 object 안에 있을 때만 가능하다

const player = {
    name: "jia",
    sayHello: function(strangerName){
        console.log("Hello " + strangerName);
    }
}

console.log(player.name);
player.sayHello("Jia");
player.sayHello("youngwoo");
player.sayHello("junho");

 

 

#2.9-10  Recap

 

recap 강의 두 개로 모든 내용이 함축되고, 설명도 간결해서 좋았다.

하나하나 다 기억해야 할 것들이라 굳이 받아적기보다는 이 영상 두 개를 반복해서 보는게 좋을 것 같다.

 

계산기 만들기

 

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);
       },
       power:function(a,b) {
              console.log(a**b);
       },
};

calculator.add(10,20);
calculator.minus(0,5);
calculator.divide(7,1);
calculator.power(2,3);

 

 

 

 

 

#2.11  Return 

 

함수를 통해 (console이나 alert가 아니라) 결과값을 받길 원할 때는 return 사용

 

console.log는 콘솔에 무언가를 log 하는 것.
하지만 우리는 데이터를 받아서 사용하거나 콘솔이 아닌 '화면'에 결과를 출력하고 싶어함.
=> returns 사용

 

const age = 100;

function calculateHerAge(ageOfMyFriend) {
    ageOfMyFriend+=2;
    return "Yes";
}

const herAge = calculateHerAge(age);
console.log(herAge);


return 은 위의 예제에서 calculateHerAge(age)을 return 다음의 결과로 대체하는 것이다.

 

 

 

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

const plusResult = calculator.plus(2,3);

console.log(plusResult);

 

 

 

return 을 쓸 때는 앞에 값을 말해줘야 결과가 보인다.

plusresult를 써주고, 콘솔로그로 실행을 시켜줘야 2+3=5가 나옴

끝부분을 아래와 같이 써주면 결과값은 5 -5 -25 가 나온다

 

const plusResult = calculator.plus(2,3);
const minusResult = calculator.minus(plusResult, 10);
const timesResult = calculator.times(plusResult, minusResult);

console.log(plusResult, minusResult, timesResult);

 

->  5 -5 -25 

 

+ 헷갈리는 return에 관한 꿀팁들

1. function안에서 return과 추가작업을 입력하면 return만 작업하고 추가 수행은 이뤄지지 않는다.
   만약 return 앞에 기타작업이 있다면 이 작업은 수행된다. 즉, return"까지만" 수행된다!

 

2. console.log는 그림의 떡. 꺼내 먹으려면 return필요....

 

3. return을 쓸 때의 주의사항: 한번 return을 하면 해당 함수는 끝난다!
  그렇기 때문에 return뒤에 작업을 한다면 출력되지 않는다! (＃return 앞에 작업을 한다면 출력된다)
   return은 말 자체로 다시 돌려준다라는 의미로 해당 함수의 변수값을 지정해주면 

   해당code를 안에서 실행해서 그 결과값을 해당 함수의 변수값을 선언한 변수한테 돌려주는것이다 !

 

 

#2.13 Conditionals

 

조건문  -> t/f 알려줌. 뭔갈 확인할때 사용 ex. 로그인 여부 확인
prompt -> 사용자에게 창을 띄워줌 -> but 여러 이유로 잘 안씀

const age = prompt("How old are you?");

console.log(typeof age);

value의 type을 보려면 typeof 사용 -> console.log(typeof age);  -> 결과: string

위 예제에서 입력값이 전부 string인데, 이걸 number로 어케 바꿀까?  

->  "15" => 15 로 바꾸기  

-> parseint function 사용

 

 

const age = prompt("How old are you?");
console.log(typeof "15", typeof parseInt("15"));

 

-> 인풋에 뭘 입력해도 string  number 라고 나옴

const age = prompt("How old are you?");
console.log((age), parseInt(age));

 

-> 14입력하면   -> 14(string)  14(number)

-> parseInt뒤에 " "같이 숫자가 아닌 걸 넣으면 NaN가 나옴 (not a number) 

 

 

짧게 합쳐서 작성하기

 

const age = parseInt( prompt("How old are you?") );
console.log(age);

 

-> 12   (typeof 하면 number 나오는 숫자 결과값)

-> 파란색이 첫번째 function, 빨간색이 두번째 function

 

 

#2.14 isNaN

 

isNaN

-> value가 NaN(number이 아닌 것)에 해당하는지 알려주는 것

 

const age = parseInt( prompt("How old are you?") );
console.log(isNaN(age));

 

-> 15 입력 -> number O -> NaN X -> 결과값 false

-> hello 입력 -> num X -> NaN O -> 결과값 true

 

 

조건문 사용법
조건이 하나일 때는 if만 적고, true가 아니면 아무 것도 실행되지 않는다.

 

조건이 여러 개일 경우 아래처럼 적는다.
contition이 true면 위의 코드가 실행되고, false면 밑에 코드가 실행된다

조건(condition)은 boolean(T/F)으로 판별 가능해야 한다. 

if(condition){
    // condition ==== true
} else {
    // condition ==== false
}

 

 

연습

 

const age = parseInt(prompt("How old are you?"));

if(isNaN(age)){
    console.log("Please write a number.");
}

 

-> hello 입력 -> string (NaN o) -> 문구 뜸

-> 15 입력 -> number (NaN x) -> 아무것도 실행 안됨

 

 

const age = parseInt(prompt("How old are you?"));

if(isNaN(age)){
    console.log("Please write a number.");
} else {
    console.log("Great Job!");
}

 

-> string 입력 -> 윗 문장

-> number 입력 -> 아랫 문장

 

 

 

 

#2.15

 

(댓글 팁)

 |  입력하기 -> enter 키 위의 \ + shift 

const age = parseInt(prompt("How old are you?"));

if(isNaN(age)){
    console.log("Please write a number.");
} else if(age < 18){
    console.log("You're too young to drink!")
} else {
    console.log("Feel free to drink :)")
}

-> 문자 hello 입력할 경우 -> if문 true -> Please write a number 출력

-> 숫자 20 입력할 경우 -> if문 false -> else if문 false -> els문 Feel free to drink 출력

-> 숫자 15 입력할 경우 -> if문 false -> else if문 true

 

 

연습2

 

const age = parseInt(prompt("How old are you?"));

if(isNaN(age)){
    console.log("Please write a number.");
} else if(age < 18){
    console.log("You're too young to drink!")
} else if(age >= 18 && age <= 50){
    console.log("Welcome to the party")
} else {
    console.log("Feel free to drink :)")
}

 

-> 19 입력 -> Welcome to the party 출력

 

 

1. && : and(그리고)의 의미. 좌우항 모두 true여야 true를 반환, 두 항 중 하나라도 false면 false값을 반환
2. || : also(또는)의 의미. 좌우항 중 하나라도 true이면 true를 반환, 두 항 모두 false일때 false를 출력
3. = : 작거나 같다 그리고 크거나 같다는 꺽쇠가 먼저 오고 =이 와야함
4. === (혹은 ==) : 좌우가 같다

 

else if(age >= 18 || age <= 50)

왼쪽이 true면 true, 오른쪽이 true면 true

둘 다 false면 false

 

-> or은 둘 중에 하나만 true 이면 된다

 

+ (else는 선택사항이지 필수가 아님)

const age = parseInt(prompt("How old are you?"));

if(isNaN(age)){
    console.log("Please write a number.");
} else if(age < 18){
    console.log("You're too young to drink!")
} else if(age >= 18 && age <= 50){
    console.log("Welcome to the party")
} else if(age > 50 && age <=80) {
    console.log("You are still young")
} else if(age > 80) {
    console.log("Wowww")
}

 

-> 52 입력 -> You are still young 출력