Javascript 정리(3)
✅ Function(함수) - 데이터 받기
👉 데이터를 전달 받는 함수의 정의
(매개변수를 지정하여 원하는 인자값을 계속 넣을 수 있게 한다)
function alertSuccess(name) {
alert(name + " 님 로그인 되었습니다.");
}
// name이라는 매개변수를 지정하였다.
alertSuccess("이워크"); // '이워크 님 로그인 되셨습니다.'
alertSuccess("김워크"); // '김워크 님 로그인 되셨습니다.'
alertSuccess("송워크"); // '송워크 님 로그인 되셨습니다.'
// 원하는 인자를 매개변수에 넣어 각각 다른 값을 호출할 수 있다.
❗ 함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안 된다.
function alertSuccess(name) { let name = "leedev"; // 함수 내부에서 매개변수에 값을 넣으면 안된다. return(name + "님 로그인 성공!"); } // 위와 같이 함수 내부에서 인자로 받은 변수(name)에 새로운 값("leedev")을 넣으면 안 된다! // 인자(parameter)에 실제로 어떤 데이터가 전달될지는, 호출할 때 결정하는 것이다. (아래처럼 함수를 호출할때) alertSuccess("leedev");
function isbiggerThanHundred(myNumber) { if (myNumber >100){ return("크다!"); } if (myNumber <=100){ return("작다!"); } } console.log(isbiggerThanHundred(100)); // '작다!' 호출 // 매개변수(parameter) = myNumber // 인자(argument) = 100
✅ Function(함수) - parameter, argument
👉 매개 변수
함수를 정의 하면서, 함수 선언식의 괄호()
안에 어떤 변수명 을 쓰면, 그걸 매개변수
라고 부른다. 매개 변수는 실제로 함수 안쪽에서 변수와 같은 역할을 하게 된다. 함수가 호출될 때 값(인자)을 전달받게 되면 매개 변수에 값이 정의된다.
👉 인자
어떤 함수를 호출하면서, 호출문의 괄호()
안에 어떤 값 또는 값이 정의된 변수를 쓰면, 그걸 인자
라고 부른다.
❗ 함수에서 매개변수를 적어둔 상태라면, 호출시 인자로 전달한 값
은 매개변수를 통해 사용 가능
// doubleNumber 함수 선언식
function doubleNumber(myNumber) { // 호출시 전달받은 값을 myNumber 라는 변수명으로 함수 안쪽에서 사용하겠다.
let myResult = myNumber * 2
return myResult
}
// doubleNumber 함수 호출문
doubleNumber(3); // doubleNumber를 호출하면서 값(인자) 3을 전달해주겠다.
// 변수를 통한 doubleNumber 함수 호출문
let someNumber = 42
doubleNumber(someNumber); // doubleNumber를 호출하면서 값 42를 전달
/* 함수 `halfNumber` 를 선언하고 구현하세요. 숫자로 된 인자 하나를 받습니다. 받은 값을 2로 나눈 결과를 리턴합니다. 매개변수 이름은 마음대로 정해서 사용합니다. */ function halfNumber(number) { return number/2; } /* 함수 `halfAndAddNumber`를 선언하고 구현하세요.숫자로 된 인자 하나를 받습니다. 1번 문제에서 만들었던 `halfNumber`를 호출하면서, 인자로 받았던 값을 다시 `halfNumber` 함수에 전달해줍니다. `halfNumber`의 리턴결과를 함수 안쪽에서 변수명 `result`에 정의합니다. 'result'에 1을 더한 값을 리턴합니다. */ function halfAndAddNumber(number) { let result = halfNumber(number)+1; return result; } // 함수 호출 halfAndAddNumber(10); // 6
✅ Function(함수) - 여러 인자
👉 복수의 매개변수에 복수의 인자를 전달할 수 있다.
// 2개의 매개변수 function eventResult(month, name) { console.log(month + "월의 당첨자는 " + name + "입니다."); } // 함수 호출(2개 인자 전달) eventResult(3, "leedev"); // 3월의 당첨자는 leedev입니다.
/* `meetAt` 함수를 만들어주세요. 인자를 세개 받습니다. 1. 첫번째 인자는 년도에 해당하는 숫자입니다. 2. 두번째 인자는 월에 해당하는 숫자입니다. 3. 세번째 인자는 일에 해당하는 숫자입니다. 년도 인자만 받았을 경우 → `"1234년"` 과 같은 형식의 문자열을 리턴 해주세요. 년도,월 인자를 받았을 경우 → 년도와 월을 조합해서 `"1234년 5월"` 과 같은 형식의 문자열을 리턴 해주세요. 년도,월,일 인자를 전부 받았을 경우 → 년도,월,일을 조합해서 `"1234/5/6"` 과 같은 형식의 문자열을 리턴 해주세요. */ function meetAt(year, month, date) { if(year, month, date) { return year + "/" + month + "/" + date + "/"; } if(year, month) { return year + "년" + month + "월"; } if(date) { return year + "년"; } } meetAt(2021, 1 , 1); // 2021/1/1 meetAt(2021, 1); // 2021년1월 meetAt(2021); // 2021년 // 매개변수의 자리는 3개이다. 인자를 1개 넣어주면 첫번째 if문에는 해당이 안되서 pass // 두번째 if문에도 해당이 안되서 pass // 세번째 if문에 인자1개 값이 들어가서 return하고 종료. // 만약 if문의 순서를 바꿔준다면? function meetAt(year, month, date) { if(year) { return year + "년"; } if(year, month) { return year + "년" + month + "월"; } if(year, month, date) { return year + "/" + month + "/" + date + "/"; } } meetAt(2021, 1 , 1); // 2021년 // 최소 인자 1개를 첫번째 if문에서 충족하기 때문에 바로 return되고 종료된다. // 따라서 인자 3개가 들어갈 수 있는 조건부터 써준다. // (=인자가 1개면 충족되지 않기 때문에 다음 if문으로 넘어갈 수 있다)
✅ Function(함수) - 데이터 반환(return)
👉 return
은 함수를 호출했을 때, 함수가 값을 반환한다는 뜻
👉 return
을 생략하면 함수는 undefined
를 반환
function eventDate(month, name) { console.log(month, name); // eventDate 함수 안에 return이 없다. } let result = eventDate("3", "이개발"); // 함수를 호출한 결과를 result에 담아서 console.log("eventDate 호출 값은" + result); // 'eventDate 호출 값은 undefined' 라고 호출된다.
👉 함수 내부에서 다른 함수 호출하기
function getTax(price) { return price * 0.1; } function calculateTotal(price) { return price + getTax(price); // getTax(price) 함수 호출 } let result = calculateTotal(3500); // 함수가 실행되는 시점, 함수 호출함 console.log(result);
/* `getTotal` 함수를 만들어주세요! `getTotal` 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다. 1. `getTotal` 이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다. 2. 인자이름은 원하는대로 지어주셔도 됩니다. 3. `getTotal` 함수에서 인자로 받은 가격으로 각각 `calculateTotal` 함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요. 참고) `getTax` 함수는 가격의 tax를 구하는 함수입니다. `calculateTotal` 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다. `getTotal` 함수는 두 상품의 가격을 더해서 반환하는 함수입니다. */ function getTax(price) { return price * 0.1; } function calculateTotal(price) { return price + getTax(price); } function getTotal(price1, price2) { return calculateTotal(price1) + calculateTotal(price2); } getTotal(500, 900); // 1540 // getTax(price) 함수식을 만든 뒤, calculateTotal(price)함수에 호출한다. // getTotal(price1, price2) 함수에는 매개변수를 2개를 넣는다. 각 매개변수는 calculateTotal(price)함수에 인자가 전달되어서 호출될 수 있다.
Author And Source
이 문제에 관하여(Javascript 정리(3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kirin/Javascript-정리3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)