📖 함수
특별한 목적의 작업을 수행하도록 설계된 독립적인 블록, 필요할 때마다 호출하여 해당 작업을 반복 수행 할 수 있음
📌 자바스크립트 함수가 객체로 간주되는 이유?
- 객체를 값을 의미, 자바스크립트의 함수는 값과 동일하게 취급
- 값처럼 변수에 할당할 수 있으며 속성 값이 될 수 있으며 배열의 요소가 될 수 있음
📌 1급 객체의 조건?
- 변수나 데이터 구조안에 담을 수 있다
var a = fuction(){
return 'js'
}- 파라미터로 전달할 수 있다
var a = fuction(b){
b()
} // 미리 정의된 b()함수 파라미터로 전달해 호출
c(function(){
console.log('js)
}) // c()함수의 파라미터로 함수작성- 리턴 값으로 사용할 수 있다
var a = fuction(){
retunrn function(){
console.log('js')
} // 리턴 할 함수 작성
}
var b = a()
b() // 리턴할 함수 작성📌 함수 vs 메소드
함수 : 특정 작업을 수행하는 코드 조각
메소드 : 객체의 속성 값으로 담겨진 함수를 부르는 명칭, 클래스 및 객체와 연관되어 있는 함수
📖 Javascript 함수
✔️ 사용목적
- 코드의 재사용 : 미리 정의된 함수를 필요할 때 마다 여러 번 호출할 수 있음
- 유지보수의 편의성 : 코드 중복을 억제하고 재사용성을 높일 수 있음
- 코드의 신뢰성 : 중복 코드를 줄여 개발자의 실수를 줄일 수 있음
- 코드의 가독성 : 객체 타입의 값의 식별자로서 함수의 역할 파악에 도움을 줌
✔️ 함수 정의
1. 함수 선언식(Function Declarations)
2. 함수 표현식(Function Expressions)
🖥️ 실습1 / 함수선언
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1. 일반 함수 정의
var num1 = 3
var num2 = 5
var res1 = addNum(num1, num2)
console.log("일반함수 정의: " + res1)
// 1. 일반 함수 정의 : 호이스팅(함수를 맨 위로 끌어올림) 기술 지원
function addNum(a, b) {
return a + b
}
//2. 익명 함수 선언 참조
var res2 = addNum2(num1, num2)
console.log("익명 함수 선언 참조: " + res2)
//2. 익명 함수 선언 참조 : 호이스팅 기술 지원 X
var addNum2 = function(a, b) {
return a + b
}
</script>
</body>
</html>🖥️ 실습2 / 두 수를 입력 받아 합을 반환하는 addNumber를 함수 선언문으로 작성하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = Number(prompt("첫 번째 정수를 입력>> "))
var num2 = Number(prompt("두 번째 정수를 입력>> "))
function addNumber(a, b) {
console.log("더한 결과>> ", a+b);
}
addNumber(num1, num2)
</script>
</body>
</html>🖥️ 실습3 / 가로와 세로 값을 입력 받아 직사각형의 넓이를 출력하는 getReactArea()를 함수표현식으로 구현하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 가로 길이를 입력하세요
let width = Number(prompt("가로를 입력하세요"))
// 세로 길이를 입력하세요
let length = Number(prompt("세로를 입력하세요"))
var getRectarea = function(a, b) {
return a * b
}
var result = getRectarea(width, length)
console.log("직사각형의 면적 >> ", result)
</script>
</body>
</html>🖥️ 실습4 / 이모지와 줄 수를 입력하면 두 값을 파라미터로 받아 피라미드 모양으로 출력해주는 pyramind() 함수를 작성하시오
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//기호 입력
let emoji = prompt("기호를 입력하시오")
// 몇줄 출력할지 값 입력 받기
let num = Number(prompt("몇 줄 출력할지 입력시오"))
pyramid(emoji,num)
// 함수 정의
function pyramid(a, b) {
for (var i = 1; i <= b; i++) {
for (var j = 1; j <= i; j++) {
document.write(a)
}
document.write("<br>")
}
}
</script>
</body>
</html>✔️ 함수 특징
1. 입력 값의 타입을 확인하지 않는다.
- 숫자와 문자열 빼기 연산할 경우, 타입검사를 따로 하지 않고 문자열을 숫자로 변환
- 문자열 중 숫자로 변환이 안되는건 연산이 안되므로 NaN라는 오류 뜸
2. 매개변수와 입력값의 개수가 같은지 확인하지 않는다.
내부적으로 arguments객체(Array 형태)가 호출되어 인자들을 배열 형태로 저장
3. 입력값의 개수가 매개변수의 개수보다 적다면 매개변수의 값을 undefined로 설정
🖥️ 실습1 / 함수특징
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1. 입력값의 타입을 확인하지 않음
minusNum(1,"3")
function minusNum(n1, n2){
alert(n1-n2)
}
//addNum(1,2,3)
//2. 매겨변수와 입력값의 개수가 같은지 확인하지 않음
function minusNum(n1, n2){
//argumnets 객체 내의 값 출력
for(let i=0; i<arguments.length; i++){
console.log(arguments[i])
}
}
//3. 입력값의 개수가 파라미터 개수보다 적다면
// 파라미터 값을 undefined로 설정
print(1)
function print(n1, n2){
console.log(n1)
console.log(n2)
console.log(n1+n2)
}
</script>
</body>
</html>📖 화살표함수(Arrow Function)
: ES6 문법으로 함수 표현 방식으로 표현
- 매개변수가 없는 경우
var print = () => console.log("print")- 매개변수 1개
var printNum = num => console.log(num)- 매개변수 여러개, 여러줄 작성
var addNum = (a,b) => {
return a+b
}- function 키워드 생략 가능!
- 함수의 매개변수가 1개라면 () 생략 가능
- 함수 몸체가 표현식 하나라면 {}와 return문 생략 가능
더 발전하는 내 모습을 위해