Function ⭐⭐⭐
- 반복되는 코드를 별도로 빼서 재사용 가능
- 함수를 구현할땐 단일 기능으로 구현하는 것이 바람직함
- 재사용에 의미있음
- 함수를 사용하는 이유
- 재사용성 (유지보수)
- 생산성
함수 작성 방법 - 선언식
function 함수명(...){
코드
} - 함수의 이름을 부른다 = 호출한다
- 다른 함수가 만들어져있는 메모리로 건너가서 계속 진행하게끔 하는 것
- 너무 많이 호출하면 시스템 성능이 나빠질 수 있음
ex)
function hello(a,b){
return a+b;
}
console.log(hello(3,4));고객 관리 프로그램
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function line(cnt,type){
for(i=0; i<cnt; i++){
document.write(type)*i;
}
document.write("<br>");
}
line(40,'-');
document.write(" 고객 관리 프로그램 <br>")
line(30,'=');
document.write("1. 등록 <br>");
document.write("2. 검색 <br>");
line(50,'*');
</script>
</head>
<body>
</body>
</html>
함수 작성 방법 - 표현식
--> 무명함수
변수 = function() {코드}
변수 () ;
ex)
function hello(){
console.log("Hello~");
}
hello();--> 위의 코드를 무명함수로 바꾸기
const hello = function(){
console.log("Hello~");
}함수 작성 방법 - 화살표 함수
변수 = { } => {return 코드;}ex)
/ 함수 표현식 /
const hello = function(a,b){
return a+b;
}
console.log(hello(3,4));--> 위의 표현식을 화살표 함수를 사용하기
const hello = (a,b) => {return a+b;}
console.log(hello(3,4));/ 화살표 함수 /
const hello = (a, b) => { return a+b; }
console.log(hello(2,3));
함수 호출 방식
- 인자가 없는 방식
- line(); 과 같이 안에 아무것도 없음
-
인자가 있는 방식
-
function line(cnt){ 실행할코드 } line(숫자); // 함수에 인자를 넣어준다-->
이때, 숫자를 '실인자(argument)' 라고 부르고
function에 정의한 cnt는 매개변수(parameter)라 부른다 -
function line(cnt, type){ 실행할코드 } line(숫자, '지정할타입');-->
함수를 사용하여 나타낼 line의 type까지 지정가능
-
-
return 값이 존재하는 경우
- 값을 반환 ( 반드시 1개만 리턴 가능 )
- 함수를 강제로 종료 (원위치로 돌아감)ex)
function hap(n1,n2){ if(n1 == " "){ return; } document.write("<h2>두 수의 합계</h2>"); let num3 = n1 + n2; return num3; }
호이스팅 ( Hoisting )
- 함수가 선언되어 있는 코드를 유효한 범위내에서 제일 상위로 끌어올려서 동작하게 하는 개념
- 자바스크립트 함수는 자료형으로 처리
ex)
hello();
function hello() {
console.log("hello~");
}-->
원래 같으면 function 을 정의하고 하단에 함수를 호출하는데, 함수 호출을 상위에서 호출하는 이 방식을 호이스팅 이라고 함
ex)
hello();
hello = function() {
console.log("hello~world");
}
hello();-->
무명함수를 실행할 경우 호이스팅 적용 불가능
매개변수
Default Value
- 항상 뒤에서부터 정의해야함
ex)
function sum (a,b,c) 가 있을때 c를 정의하고 b정의하고 a 순처럼 function sum (a,b,c=3) 이어야 하는데 function sum (a=3,b,c)라고 하면 안됨
fuction sum(a,b,c){
return a+b+c;
}
console.log(sum(1,2,3));--> default value 값 이용한 코드
function sum(a,b,c=3){
return a+b+c;
}
console.log(sum(1,2)); **
default value 값을 정의했지만 console.log에서 다시 정의한 경우
--> console.log 에서 정의한 c=4 의 값이 적용 !
function sum(a,b,c=3){
return a+b+c;
}
console.log(sum(1,2,4));객체의 구조 분해 할당
--> 객체를 분해하여 그 값을 변수에 할당
- user 객체가 함수 getName 으로 전달되고, 함수 내에서는 user 객체가 u라는 객체로 사용
const user = {name : "홍길동", age : 35}
function getName(u){
return user.name;
}
console.log{getName(user));- getName의 매개변수 u를 구조 분해 할당하여 name 속성값을 가져와서 반환
function getName(u){
const {name} = u;
return name;
}
console.log(getName(user)); - getName의 매개변수를 {name}으로 선언하여, 객체를 전달할때 해당 객체의 name 속성값을 반환
function getName({name}){
return name;
}
console.log(getName(user));ex) getmail 함수의 매개변수로 전달된 객체의 email 속성값을 가져오거나 해당 속성이 없으면 "이메일이 없습니다" 를 기본값으로 설정하여 반환
function getEmail({emaile="이메일이 없습니다"}){
return email;
}
console.log(getEmail(user));배열의 구조 분해 할당
--> 배열을 분해하여 그 값을 변수에 할당
- 배열의 두번째 값을 반환
const fruit = ['Apple', 'Banana', 'Cherry'];
function getSecondItem(data){
return data[1];
}
console.log(getSecondItem(fruit)); - 각 요소를 a, b, c 에 할당후 b를 반환하는 구조 분해 할당
const fruit = ['Apple', 'Banana', 'Cherry'];
funciton getSecondItem([a,b,c]){
return b;
}
console.log(getSecondItem(fruit));- 더 간결한 구조 분해 할당 (첫번째 요소 무시하는 , 사용)
const fruit = ['Apple', 'Banana', 'Cherry'];
function getSecondItem([,b]){
return b;
}
console.log(getSecondItem(fruit))rest 매개변수
--> 갯수와 상관없이 실 인자값을 다 받아줄 수 있음
--> (...rest) 로 표현
화살표 함수
- const a = () => {} : 매개변수가 없을때는 () 생략 불가능
- const a = x => {} : 매개변수가 1개일때는 () 생략 가능
- const a = (x,y) => {} : 매개변수가 2개 이상일 경우 () 생략 가능
코드 작성
const a = x => {
return x*x}--> return 을 생략한다면 {} 도 생략해야 함 !
const a = x => x*x ***
코드가 여러줄일때는 {} 와 return 생략 불가능
const = x => {
console.log(x*x);
return x*x;
}객체 사용
-
return 사용
const a = () => {return {x:1}} -
return 사용 X --> () 사용해야 함 !
const a = () => ({x:1}) -
오류발생
const a = () => {x:1}
배열 사용
- return 사용
const a = () => {return [1,2,3]} - return 사용 X --> 생략 가능 !
const a = () => [1,2,3]
콜백함수
--> 함수가 실행될때 인자로 들어가는 또 다른 함수
재귀함수
--> 함수 내에서 자신을 호출
function a() {
...
a();
}
a();