function 함수/return반환값 (1) - javascript 0604

개념 이해하기까지 진짜 오래걸린 function

반복해서 보고 예제도 만들어보면서 겨우 이해한거 같다..!

처음 접하는 사람들에게 프로그래밍은 어려운게 아니라 낯선거라는 말이 있다.

문법 공부하시는 모든 분들에게 위로가 되길 바란다 ㅠㅠ....

 

---

◎function 함수

• 함수를 이용하면 중복없이 유사한 동작을 하는 코드를 여러번 호출 할 수 있다.
• 함수의 주요용도 -> 중복코드 피하기.
• 매개변수(parameters)가 여러개 있다면 콤마(,)로 구분한다.

//함수 선언하기
function name (parameters) {
     ....함수본문....
}


//함수 호출하기
name()

 

 

---

 

◎지역변수 (local variable)

함수 내에서 선언한 변수, 함수 안에서만 접근이 가능하다.

 

◎외부변수 (outer variable)

(※ 깔끔하고 가독성 좋은 코드작성을 위해 되도록 지역변수를 사용한다!)

함수 내부에서 함수 외부의 변수인 외부변수에 접근가능, 수정도 가능하다.

let name = 'mina';

function message(){ 
    name = 'john';
    alert(name);
}
alert(name);
//함수 호출 전이므로 'mina'가 출력됨.
message();
//함수를 호출하여 'john'이 출력됨.
alert(name);
//함수에 의해 값이 'john'으로 변경되어 출력됨.

//출력순서 
//mina - john - john

 

 

함수 내부에 외부와 동일한 이름을 가진 변수가 선언되었다면 값이 수정되지 않는다.

내부변수는 외부변수를 가린다.

let name = 'mina';

function message(){
   let name = 'john';
   alert(name);
}

message();
//함수는 내부변수인 'john'을 출력.
alert(name);
/* 함수는 외부변수에 접근하지 않기 때문에 값이 변경되지 않고
외부변수에 할당된 'mina'가 출력됨. */

//출력순서
//john - mina

 

 

◎ 매개변수(parameter)

• 임의의 데이터를 함수안에 저장할 수 있다.
• 인수(argument)라고도 불린다.
• 매개변수에 값을 전달하지 안으면 그 값은 undefined이 된다.
• 매개변수가 값을 전달 받지 못할때 undefined 대신 기본값을 설정할 수 있다.
• 매개변수에 복잡한 표현식도 설정 가능하다.

 

---

◎ 반환값(return)

• 함수를 호출했을때 호출한 그곳에 특정 값을 반환 할 수 있다.
• return 값을 만나면 함수실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환한다.
• return 만 병시하는 것도 가능하다 -> 함수 즉시 종료.
• return문이 없거나 return 지시자만 있는 함수는 undefined을 반환한다.
• return문 뒤에 코드 추가 할 수 없다. ( js는 return문 끝에 자동으로 ;을 넣어주기 때문에/ 긴코드는 괄호를 사용하자.)

 

return 기본 예시

function sum(a,b){
    return a + b;
}

let result = sum(1,2);
alert(result);
// a와 b를 더한 값인 3이 출력됨.​

 

 

return 예시

1. 함수 return문 을 통해 18세 이상인 경우 '접속허용'창을 출력 한다.
2. 18세 미만인 경우 '보호자 동의 필요' confim 창을 출력 한다.
3. 확인을 누를시 '접속 허용' 창을 출력한다.
4. 취소를 누를시 '접속 차단' 창을 출력한다.

function checkAge(age) {
  if (age >= 18) { 
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

let age = prompt('나이를 알려주세요', 18);

if ( checkAge(age) ) {    
  alert( '접속 허용' );
} else {
  alert( '접속 차단' );
}

 

 

(코드해석해보기)

/* 10번줄에서 사용자에게 입력받은 매개변수를 
함수 checkAge 인자에 전달한다.*/
function checkAge(age) {
//인자 age가 조건에 맞는지 확인한다.
  if (age >= 18) { 
/*조건이 true 라면 함수를 중단하고 함수가 
호출된곳에 값을 반환한다.(🚗로 이동)*/  
    return true;
//조건이 false라면 else문을 실행한다.
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
/*'확인','취소'버튼에 따라 나온 true, false 값을 
함수가 호출된 곳에 반환한다.(🚗로 이동)*/    
  }
}

let age = prompt('나이를 알려주세요', 18);

if ( checkAge(age) ) {    //🚗
//반환된 값이 true라면 '접속허용' 출력.
  alert( '접속 허용' );
//반환된 값이 false라면 '접속차단'출력.
} else {
  alert( '접속 차단' );
}

 

(코드 해석해보기)

다음 if문이 포함된 함수를 ll 와 ? 문으로 바꾸기

function checkAge (age){
   if (age > 18){
       return true;
   }else {
    return confirm ('보호자동의');
   }
}

바꾼 코드

// ?사용
function checkAge(age){
   return (age > 18) ? true : confirm ('보호자동의')
}
//age가 18보다 크면 true 아니면 confirm창 실행



// ||사용
function checkAge(age){
   return (age > 18) || confim('보호자동의')
}
/* 왼쪽 오른쪽 중 truthy 찾기
age가 18보다 크면 true ->return값 반환.
age가 18보다 작으면 false -> 오른쪽 실행. */

---

<모던js문제풀기>

문제 (1)

x의 n제곱을 반환해주는 함수, pow(x,n)를 만들어보세요. 

x의 n 제곱은 x를 n번 곱해서 만들 수 있습니다

프롬프트 대화상자를 띄워 사용자로부터 x와 n을 입력받고 

pow(x,n)의 반환 값을 보여주는 코드를 작성해 보세요.

pow(3, 2) = 3 * 3 = 9

pow(3, 3) = 3 * 3 * 3 = 27

pow(1, 100) = 1 * 1 * ...* 1 = 1

 

(모던js정답)

function pow(x, n) {
  let result = x;

  for (let i = 1; i < n; i++) {
    result *= x;
  }

  return result;
}

let x = prompt("x?", '');
let n = prompt("n?", '');

if (n < 1) {
  alert(`${n}은 양의 정수이어야 합니다.`);
} else {
  alert( pow(x, n) );
}

 

(내가 쓴 답)

function pow(a,b){
   return result = a ** b;  
}

let a = +prompt('첫뻔째 숫자를 입력하세요');
let b = +prompt('두번째숫자를 입력하세요');

if(b < 1){
   alert(`${b}는 양의정수 여야 합니다`)
}else{
   alert(pow(a,b));
}

//promot로 입력받은 두 매개변수를 인자에 전달.
function pow(a,b){
/* 제곱근을 구한뒤 값을 result에 반환 후 함수중단
함수 호출한곳에 값을 반환. */
   return result = a ** b;
}

let a = +prompt('첫뻔째 숫자를 입력하세요');
let b = +prompt('두번째숫자를 입력하세요');

//입력받은 b 음수인지 확인
if(b < 1){
//음수라면 다음 알림창출력.
   alert(`${b}는 양의정수 여야 합니다`)
}else{
//양의 정수라면 반환된 값 출력.
   alert(pow(a,b));
}