[바닐라 js 챌린지] 2.0강 function(), return, prompt() ✨

6월 6일부터 시작한 바닐라js 2주 챌린지 !

더 원활한 공부를 위해 기록 시작 :)

 

function : 함수

계속 반복해서 사용할 수 있는 코드 조각이라 생각하면 이해하기 쉽다.

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

argument(인수)는 소괄호안에 위치하며 함수를 호출할 때 전달되는 값이다.

const player = {
  age:  20,
  sayHello: function(myName){
    console.log("Hello " + myName);
  }
};
player.sayHello("seYeon");  //Hello seyeon

argument는 myName이고 seYeon을 넣어줬다

결과는 Hello seYeon

 

object안에 function을 넣어서 가벼운 계산기도 만들 수 있다 !

const caculator = {
  add: function(a,b) {
    console.log(a+b);
  },
  min: function(a,b) {
    console.log(a-b);
  },
  div: function(a,b) {
    console.log(a/b);
  },
  mul: function(a,b) {
    console.log(a*b);
  },
  pow: function(a,b) {
    console.log a ** b
  },
}

caculator.add(1,1); 
caculator.min(2,1);
caculator.div(4,2);  
caculator.mul(2,3);   
caculator.pow(2,3);

 

2.11  return 

return은  무언가를 실행할때 값을 반환하는 명령어다.

함수가 실행되다가 return을 만나면 함수는 종료하게되고 return문에 있는 것을 반환한다.

const caculator = {
  add: function(a,b) {
    return a + b;
  }
}

const result = caculator.add(2,2);
console.log(result);
//위의 코드에 적었던 계산기의 console부분을 return으로 바꿔보았다

값을 반환하는 거라면 console을 사용해도 될거같지만 차이점이 은근 크다

return을 사용하면 우리가 그 값을 가져서 사용할 수 있고 언제든 불러올 수 있지만

console은 console에만 출력가능하기 때문에 그림에 떡 같은 느낌이라 볼 수 있다,,

 

2.13

prompt() : 사용자에게 창을 띄워서 값을 받을 수 있는 함수다.

사용자가 답을 입력할때까지 코드의 실행이 멈추며 오래된 방법이고

css로 꾸밀 수 없어서 최근에는 잘 쓰지 않는 기술인거같다,,!!

 

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

// age에 24 입력
console.log(typeof age); // string

 

tyoeof라는 키워드를 사용하여 변수의 타입을 확인할 수 있는데 , 기본값이 string이여서 바꾸는 작업이 필요하다.

parseInt를 이용하여 다음과 같이 바꿀 수 있다.

 

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

console.log(typeof age); //number

처음에는 string이라 떴는데 number라 뜨는 것을 확인할 수 있다 !

 

마지막으로 회원이 숫자를 입력하지 않으면 경고문이 뜨고 입력한 나이에 따른 문구가 출력되는 코드를 만들어보겠다 !

 

const age = parseInt(prompt("당신의 나이는 몇살입니까?"));
//isNaN -> 숫자가 아닌지 판단함 (숫자 입력시 false)

if(isNaN(age)){
  console.log("숫자를 입력해주세요.");
}else if (age < 20){
  console.log("미성년자 회원입니다.");
}else if (age > 20){
  console.log("성인 회원입니다.");
}else {
  console.log("성인 회원입니다.");
}