일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 배열메소드
- addEventListener
- 리액트
- DOM
- 함수 실행
- webProject
- CSS
- Props
- try.. catch
- 비동기함수
- promise
- frontendstudy
- 컴포넌트
- useRef
- 이벤트
- useState
- Frontend Study
- 자바스크립트
- callback함수
- 메소드 실행
- REACT
- 이벤트핸들링
- input
- FrontendStydy
- 배열
- JavaScript
- 렌더링
- this 객체
- HTML
- typeScript
- Today
- Total
이다닷
[JavaScript] Day 15 - 함수에 대하여 본문
함수
함수란 '호출될 수 있는 코드 조각'이다.
변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용할 수 있는 것처럼,
함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있다.
📌변수와 비슷한 정의로 데이터 대신 코드에 이름을 붙여주는 것!
함수 선언식
function 함수명() {
// 함수의 기능을 표현한 구문
}
=> 위와 같은 선언 이후, 함수명은 중괄호 안의 기능 대신 사용될 수 있다!
함수 표현식
const 함수명 = function() {
// 함수의 기능을 표현한 구문
}
=> 마찬가지로 선언이후, 함수명은 중괄호 안의 기능 대신 사용될 수 있다!
함수 사용
함수를 만들고 나면 함수를 사용해야 한다.
위의 두가지 방식으로 함수를 만들고, 함수를 사용하기 위해서는 함수를 '호출'해야만 한다!!
=> 함수를 호출할 때에는 함수의 이름 뒤에 반드시 소괄호를 붙여줘야 합니다!
ex) sayHello() // 함수 호출문
데이터 반환
함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있다.
함수가 데이터를 반환한다는 것은, 함수 호출문이 데이터로 대체됨을 뜻한다!
함수가 데이터를 반환하려면, '데이터를 반환한다'라는 구문을 함수 내부에 추가해주어야 한다.
이때 키워드 return이 사용된다.
ex) return 3;
키워드 return에 대하여
return은 함수 내부에서 함수의 부가 기능을 위해 사용하는 키워드이다.
return은 두 가지 기능을 가지고 있다.
- 함수로부터 데이터를 반환한다.
- 함수를 끝낸다.
return은 뒤에 붙은 데이터를 반환한다.
📌이때 데이터는 딱 하나씩만 반환할 수 있다.
함수의 소괄호?!?
함수 호출문은 '함수명 + 소괄호'이다.
소괄호의 역할은 함수가 실행될 때 사용할 재료를 전달받는 것이다.
여기서 재료란 데이터를 뜻한다.
여기서 함수가 사용하는 재료를 '매개변수'라고 한다.
ex) FunC( 여기 )
매개변수는 원하는 만큼 추가할 수 있다.
구분자 쉼표(,)를 이용해 추가하고, 호출 시에도 그에 맞게 재료를 전달한다.
ex) sayFood( food1, foo2 )
우리가 만들 수 있는 함수
- 매개변수도, 반환도 없는 함수
- 매개변수는 있지만, 반환은 없는 함수
- 매개변수는 없지만, 반환은 있는 함수
- 매개변수와 반환이 모두 있는 함수
오늘의 실습 1
function sayHello(){ // 함수 선언식
console.log("Hello")
}
// 아래에 함수 호출문이 없어서 실행되지 않음
const sayBye = function(){ //함수 표현식
console.log("good bye~")
}
sayBye()
실습의 결과 1
오늘의 실습 2
function thereIsReturn(){
console.log("반환한다.")
let num = 5;
return num
console.log("나올까?") // return으로 함수가 종료되었기때문에 출력되지 않는다.
}
const result = thereIsReturn()
console.log(result)
실습의 결과 2
오늘의 실습 3
function oddEven(number){
if(number % 2 == 1){
return "홀수"
}
else{
return "짝수"
}
}
console.log(oddEven(10))
console.log(oddEven(7))
실습의 결과 3