금~토 chapter 5를 볼 예정이기 때문에
금 / 5-1, 토 / 5-2 보고 TIL 작성 예정이다
요약 내용
익명함수, 매개변수, 리턴값, rest parameter
함수?
함수 호출: 함수를 사용하는 것
ex) hello()
함수 선언
ex) function hello() {}
매개변수: 함수를 홀출할 때 괄호 내부에 여러 가지 자료를 넣는데 이 자료를 매개변수라고 한다
리턴값: 함수를 호출해서 최종적으로 나오는 결과
- 함수를 사용하면 좋은점
: 함수는 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출할 수 있으므로 반복되는 작업을 피할 수 있다
: 긴 프로그램을 기능별로 여러 함수로 나누어 작성하면 모듈화로 가독성이 높아진다
: 기능별로 수정이 가능하므로 유지보수가 쉽다
함수 선언식, 함수 표현식, arrow function(화살표 함수) 등이 있는 것으로 알고 있다
- 함수 표현식
(책 표현 : 익명 함수)
function () {}익명 함수는 이름없는 함수인가?
책보다 보니 얘가 함수 표현식이네...(@#$@#(%()^)
let 함수명 = function () {
문장
}- 함수 선언식
(책에는 선언적 함수라고 나오네...)
function 함수명() {
문장
}두 함수의 차이점은 함수 선언식은 호이스팅에 영향을 받지만 표현식은 호이스팅에 영향을 받지 않는다
호이스팅에 관한 설명 MDN 사이트:
https://developer.mozilla.org/ko/docs/Glossary/Hoisting
호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다
Arrow Function
책에는 나오지 않지만 JavaScript DOM이벤트 작업할 때 개인적으로 많이 사용하는 함수
화살표 함수라고 부르더라
() => {
문장
}
// ex)
btn.addEventListener('click', () => {
console.log('버튼 클릭')
}함수 이름도 지정하지 않아도 되고 코드 가독성이 높아지는 것 같아서 자주 사용한다
하지만 스코프 문제도 있는 거로 알고 있다
나중에 배울 this가 쓰여지게 되면 안쪽 바깥쪽....@$&(
this 배울때 주의사항을 더 익혀야겠다 일단안녕...
매개변수, 리턴값
function 함수명(매개변수, 매개변수) { // 여러개 지정 가능
문장
문장
return 리턴값
}처음 코딩 공부 시작할 때 return과 print(console.log)가 왜이렇게 헷갈리던지..
처음에는 아니 print하면 되는데 왜 언제는 return을 쓰는건지
너무 헷갈렸다. 이제는 조금 출력과 값을 return하는 것에 대한 차이는 조금 알겠다
하지만 설명은 잘 못한다 아직 머릿속에만 있다
Rest Parameter
(이 책에는 나머지 매개변수래...)
매개변수가 2개일 때도 있고 3개, 10개 등 여러개 있을 때 사용
rest parameter를 사용하는 이유는 parameter를 2개 정의하면 함수 호출 시 2개의 값을 전달 할 수 있고 정의하는 parameter 갯수대로 호출시 값을 전달할 수 있다.
근데 만약 더하기 함수를 만든다고 하면 몇 개의 수를 더할지 (2개 or 4개) 미리 정해버리면 그 범위내에서만 계산을 할 수 있기 때문에 기능을 더 확장시키기 위한 것이다
몇 개의 parameter가 전달될 지 모를 경우 매우 유용하게 사용할 수 있다
이 때 전달 받은 parameter 값은 배열로 저장된다
function 함수명(...parameter) {}일반 매개변수와도 조합할 수 있다
function 함수명(매개변수, 매개변수, ...parameter) {}Spread Operator
(이 책에는 전개 연산자래...)
배열, 문자열의 데이터를 요소 하나하나로 모두 분해해서 사용할 수 있게 해준다
함수명(...배열)
// ex)
function ex(...items) {
console.log(items)
}
const arr = [1,2,3,4,5]
ex(arr)
// [Array(5)] 출력
ex(...arr)
// [1,2,3,4,5] 출력
이 구문은 배열앞에 사용한다고 보면 될까?
rest parameter와 확실히 차이가 있긴 한데 혼자 생각..
다른 예제 ⬇️⬇️⬇️
let arr1 = [4,5,6]
let arr2 = [1,2,3]
let arr3 = [...arr2, ...arr1]
// 배열의 데이터를 요소 하나하나로 분해해서 새로운 배열에 할당
console.log(arr3)
// [1,2,3,4,5,6] 출력
// 만약
let arr4 = [...arr1, ...arr2]
console.log(arr4)
// [4,5,6,1,2,3] 출력기본 매개변수
매개변수에 기본값을 정해줄 수 있다
function hello(name, age) {
return `Hello! My name is ${name}. I'm ${age}`
}hello함수가 있을 경우 name, age에 기본값을 지정해 줄 수 있다
다만 오른쪽 매개변수에 사용하기 때문에 age가 지정되지 않았다면 name만 지정할 수 없다
이렇게 설명하면 헷갈릴 수 있으니 예제 ⬇️⬇️⬇️
function hello(name="Chan", age) {
return `Hello! My name is ${name}. I'm ${age}`
}
// name을 기본값으로 정해주었기 때문에 생략가능하다
// 하지만 생략하고 age값만 쓰면 name으로 인식한다
hello(25)
// 출력결과 : "Hello! My name is 10. I'm undefined"
hello('chan', 25)
// 물론 이렇게 하면 정확하게 출력 된다
// "Hello! My name is chan. I'm 25"기본값을 지정하는 이유는 생략되었을 때 기본값으로 default하기 위한 것인데 생략할 수 없으면 쓰는 의미가 없다
그래서 오른쪽에서부터 사용한다고 생각해야 한다
function hello(name, age="25") {
return `Hello! My name is ${name}. I'm ${age}`
}
hello('chan')
// 출력결과: "Hello! My name is chan. I'm 25"age 값을 생략했지만 기본값 25로 출력된다
오늘 리뷰
책에 나오는 이름과 다른 강의에서 본 이름이 너무 다르다
어느 것이 맞는지는 모른다 해석의 차이겠지
다만 통일했으면 좋겠다는 생각이 든다..
원래 영어를 우리나라 말로 번역할 때 달라지는 건지..
어쨌든 함수는 제일 많이 사용되기도 하고 어렵기도 하니 아직 몇번 더 읽어야겠다
