혼자 공부하는 자바스크립트
#한빛미디어 #혼공학습단 #혼공단 #혼공JS
| 주차 | Chapter | 기본 미션 | 선택 미션 |
| 4 | 05 | 202쪽의 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷 | p.240 확인 문제 1번 풀고, 풀이 과정 설명하기 |
Chapter 05 함수
: 코드의 집합! 다양한 형태의 함수를 만들고 사용해보며 매개변수를 다루는 방법을 이해합니다.
__05-1 함수의 기본 형태
__05-2 함수 고급
I. 미션
1. 기본 미션
202쪽의 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷
2. 선택 미션
(p.240 확인 문제 1번 풀고, 풀이 과정 설명하기)
1. filter 함수의 콜백 함수 부분을 채워서 (1) 홀수만 추출, (2) 100 이하의 수만 추출, (3) 5로 나눈 나머지가 0인 수만 추출해주세요. 그리고 코드의 실행 결과를 적어보세요.
코드 설명: number array의 값을 filter 콜백함수로 구현.
- '홀수'는 'value % 2 ===1'로
- '100이하'는 'value<=100'으로
- '5의 배수'는 'value %5 ===0'로,
- 위 3가지 모두 세가지 묶어 모두 충족할 경우
각각 조건에 해당하는 값들만 return하게 함.
II. '05-1. 함수의 기본 형태' 정리
1. 익명함수 (anonymous function)
- 이름이 없는 함수
| function ( ) { } |
- 한 번만 정의 후 호출 사용으로 재정의 불필요
- 긴 프로그램의 모듈화 및 가독성 높임
- 기능별 유지보수 용이
2. 선언적 함수
- 이름이 있는 함수
| function 함수 ( ) { } |
3. 매개변수와 리턴값
- 매개변수: 함수 호출시 괄호 안으로 넘겨짐
- (예) prompt()함수의 message
- 리턴값: 함수의 최종 결과
| function 함수 (매개변수, 매개변수, 매개변수) { 문장 문장 return 리턴값 } |
4. 기본적인 함수 예제
윤년을 확인하는 함수 만들기
A부터 B까지 더하는 함수 만들기
일반적으로 숫자를 계산해 출력하는 함수의 형태 (잘 기억!)
| function 함수 (매개변수) { let output = 초깃값 처리한다 return output } |
최소값 구하는 함수 만들기
최댓값 구하는 함수 만들기
5. 나머지 매개변수
- 가변 매개변수: 호출 매개변수가 유동적이며
- 자바스크립트에서는 나머지 매개변수(rest parameter) 형태의 문법 사용
| function 함수 이름 (...나머지 매개변수) { } |
배열을 사용하지 않는 min( ) 함수 형태
나머지 매개변수와 일반 배개변수 조합하기
| function 함수 이름 (매개변수, 매개변수, ...나머지 매개변수) { } |
매개변수의 자료형에 따라 다르게 작동되는 min( ) 함수
- 숫자 자료형은 typeof 연산자로 쉽게 확인 가능
- 배열에 사용시 object(객체)의 결과. typeof(배열)=='object' 형태로 배열 확인 가능.
- 정확히 배열을 확인하려면 Array.isArray( ) 메소드를 사용함
전개 연산자
- 자바스크립트는 배열을 전개해 함수의 매개변수를 전달해주는 전개 연산자(spread operator)를 제공.
| function 함수 이름 (...배열) |
전개 연산자를 사용해 매개변수를 전달하고, 나머지 매개변수로 출력하는 예제
6. 기본 매개변수
| 함수 이름 (매개변수, 매개변수=기본값, 매개변수=기본값) |
기본 매개변수를 추가한 윤년 함수
7. 구 버전 자바스크립트에서 가변 매개변수 함수 구현하기
- 배열 내부 사용 가능한 특수 변수 arguments 사용
8. 구 버전 자바스크립트에서 전개 연산자 구현하기
- apply( ) 함수를 사용해 특이한 패턴의 코드 구현
9. 구 버전 자바스크립트에서 기본 매개변수 구현하기
- 구버전의 경우 보통 다음과 같은 코드 사용
| function earnings (wage, hours) { wage = typeof(wage) != undefined ? wage : 8590 hours = typeof(hours) != underfined ? hours : 52 return wage * hours } |
- 매개변수 입력 값이 false 또는 false로 변환될 수 있는 값(0, 빈 문자열)이 아님이 확실할 경우 다음과 같이 짧게 구현 가능
| function earnings (wage, hours) { wage = wage || 8590 hours = hours || 52 return wage * hours } |
- 구 버전 코드 이해를 위해 기억할 것
7가지 정리 핵심 포인트
- 익명 함수: function ( ) { }
- 선언적 함수: function 함수 이름 ( ) { }
- 매개변수: 외부 정보 입력받는 함수 괄호 안 변수
- 리턴값: 함수의 최종 결과. return 키워드 뒤에 값 위치
- 가변 매개변수 함수: 고정되지 않은 매개변수. 나머지 매개변수(...)로 사용
- 전개 연산자: 배열을 함수 매개변수로 전개
- 기본 매개변수: 매개변수에 default값 지정
III. '05-2 함수 고급' 요약
- '함수도 하나의 자료' 개념으로 비동기 프로그래밍을 이끌었고, 람다 또는 익명 함수라는 이름으로 타 언어 문법에 전파.
1. 콜백 함수
함수도 하나의 자료형으로서 매개변수로 전달하는 함수
선언적 함수 사용하기
익명 함수 사용하기
콜백 함수를 활용하는 함수: forEach()
- forEach() 메소드는 배열 내부 요소를 사용해 롤백 함수 호출
| function (value, index, array { } |
콜백 함수를 활용하는 함수: map( )
- 배열이 갖고 있는, 콜백 함수의 리턴 값을 가지고 새로운 배열을 만드는 함수
원하는 매개변수만 받기 (일반적으로는 value and/or index만 사용하는 경우가 많음)
콜백 함수를 활용하는 함수: filter( )
- 콜백 함수에서 리턴값이 true인 것만 모아 새로 배열을 만드는 메소드
2. 화살표 함수
- function 키워드 대신 화살표(=>)를 사용해 단순한 형태의 함수 입력
| (매개 변수) => { } 불 표현식 || 불 표현식이 거짓일 때 실행할 문장 |
다음과 같이 간단히 사용 가능
| (매개변수) => 리턴값 |
- 메소드 리턴값을 기반으로 줄줄이 사용하는 메소드 체이닝(method chaining)은 자주 사용되므로 꼭 기억!
3. 타이머 함수
- 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수
| 함수 이름 | 설명 |
| setTimeout(함수, 시간) | 특정 시간 후 함수 한 번 호출 |
| setInterval(함수, 시간) | 특정 시간마다 함수 호출 |
- 8행의 2번째 매개변수에 시간을 밀리 초 단위로 입력해 1초 단위 표시했으나 그냥 1000으로 입력해도 무방
- 타이며 종료 함수
| 함수 이름 | 설명 |
| clearTimeout(함수, 시간) | setTimeout( ) 함수로 설정한 타이며 삭제 |
| clearInterval(함수, 시간) | setInterval( ) 함수로 설정한 타이며 삭제 |
4. 즉시호출 함수
- 여러 웹 사이트의 경우 다음과 같은 익명 함수를 생성해 즉시호출하는 패턴을 많이 보임.
| (function ( ) { }) ( ) |
이름 충돌 문제 발생
- 스코프(scope): 변수가 존재하는 범위. 같은 단계에 있을시 반드시 충돌하므로, 중괄호를 사용해 블록 생성하거나, 함수를 생성해 블록을 만들어야 함.
- 새도잉(shadowing): 블록이 달라 내부 변수가 외부 변수를 가리는 현상 => 충돌하지 않음
5. 즉시호출 함수 문제 해결하기
- 최신 자바스크립트는 블록과 함수 블록을 통해 변수 충돌을 막을 수 있음.
- 구 버전의 자바스크립트에서 사용되던 var 키워드는 함수 블록을 사용해서만 충돌을 방지할 수 있음.
- 트린스파일러: Babel 등 최신 버전의 자바스크립트를 구 버전으로 변경해주나 단순 블록으로 함수 충돌을 막는 코드는 제대로 변환 못해줌. (p.465 참고)
- 많은 개발자들은 함수 블록을 사용해 이런 문제를 해결. (함수를 만들자마자 즉시 호출)
6. 엄격 모드
- 블록 가장 위에 'use strict' 문자로 엄격 모드(strict mode)를 설정해 코드를 엄격히 검사
| <script> 'use strict' 문장 문장 </strict> |
- 엄격 모드에서는 오류 발생
- 엄격 모드의 일반적인 패턴은 다음과 같음
| <script> (function ( ) { 'use strict' 문장 문장 }) ( ) </strict> |
- 즉시 호출 함수를 만들고, 주로 블록 가장 위에 엄격 모드를 적용하는데, 이 경우 해당 모드에만 엄격 모드가 적용됨.
- 여러 자바스크립트 코드를 이해하기 위해 'use strict' 코드를 기억해둘 것
- 추가 정보는 모질라 엄격모드 문서 참조
7. 익명 함수와 선언적 함수의 차이
- while 반복문은 조건 중심으로 반복할 때, for 반복문은 횟수 중심으로 또는 배열 등을 중심으로 반복할 때 사용.
- 익명 함수와 선언적 함수도 상황이 비슷. 혼자 개발시는 자신이 편한것, 함께 개발할 때는 모두가 편한것을 사용하면 됨. 단, 최근 안전을 고려해 익명 함수를 선호함.
- 선언적 함수는 순차적 코드 실행 전에 생성되어 같은 블록이면 어디서든 호출 가능.
- 선언적 함수도 입력 순서대로 생성되나, 같은 이름이면 덮어씌워져 "2번째 익명 함수입니다."가 출력됨.
8. 선언적 함수와 익명 함수의 조합
- 선언적 함수 먼저 생성후 순차적 코드 시작시 익명함수를 생성한 경우는?
- 코드 순사와 관계없이 "익명 함수입니다."라는 글자 출력.
- 익명 함수는 코드를 읽는 순서로 함수가 선언되나, 선언적 함수는 읽는 순서와 다른 순서로 함수가 선언됨. 함수를 같은 이름으로 덮어쓰면 매우 위험하므로, 안전하게 사용할 수 있는 익명 함수를 더 선호.
9. 블록이 다른 경우에 선언적 함수의 사용
- 타 프로그래밍 언어는 선언적 함수 형태를 많이 사용하는 반면, 자바스크립트는 블록이 예상치 못하게 나뉠 수 있어 익명 함수를 안전을 위해 더 많이 사용.
- 과거 자바스크립트는 var라는 키워드를 사용하여 변수를 선언했으나, 이전 코드와 같이 덮어쓰이는 문제가 발생. 현대 자바스크립트는 let 키워드와 const 키워드를 사욯해 변수와 상수를 선언하여 위험을 원천 차단시키기 위해 오류를 발생
=> 그래서 이 책에는 var 키워드에 대해 변수 설명에 포함시키지 않았던 것 같음!
- 한 가지로 통일해 사용하는 것이 오류의 위험을 줄일 수 있고, 안전을 위해 익명함수로 통일할 필요 있음.
4가지 키워드로 정리하는 핵심 포인트
- 콜백 함수: 매개변수로 전달하는 함수
- 화살표 함수: 익명 함수를 간단하게 사용하기 위한 문법. '( ) => { }' 형태. 리턴값만 가지면 '( ) => 값' 형태
- 즉시 호출 함수: 변수 이름 충돌 방지를 위한 안전한 코드 사용법
- 엄격 모드: 자바스크립트 문법오류 실수 방지. 'use strict'라는 문자열을 블록 가장 위에 둬서 사용
IV. 참고 자료
1. 혼공 자바스크립트 25강 - 5.1절 함수 기본
- 함수 만드는 방법
- 프로시저적 관점 + 수학적 관점 => 프로그래밍 함수
- 함수 ( ) => 함수 호출 -> 본문으로 점프 후 다시 복귀
- 프로시저 형태의 함수: 매개변수를 갖지 않는 함수
- 매개변수, 리턴값
- 함수를 사용하는 가장 큰 이유는 함수의 재사용 => 나중에 '추상화' 개념으로 모임
2. 혼공 자바스크립트 26강 - 함수 기본 예제
- 기존엔 'function f(매개변수, 매개변수) { return 리턴값}'형태(선언적 함수)의 함수을 써왔으나
최근엔 'const function f(매개변수, 매개변수) { return 리턴값}'형태(익명 함수)의 함수를 더 많이 쓰게됨 - 윤년을 구해주는 함수
- 최솟값을 찾는 함수 => 최댓값을 찾는 함수 해보기
3. 혼공 자바스크립트 27강 - 나머지 매개변수와 전개 연산자(함수 호출)
- 나머지 매개변수(rest parameter): (...매개변수)
- 나머지 매개변수에 배열이 들어오며, 마지막 위치에만 들어와야 함
- 전개연산자: 함수를 호출할 때 사용. 함수(a[0], a[1], a[2]) 대신 함수(...a). 일반 매개변수 함수와 전개연산자 함수를 만들어주면 두가지 형태 모두 지원되도록 해줄 수 있다.
- API(Application Progrtamming Interface): 애플리케이션 프로그램을 만들 때의 약속. API 설계자, API 사용자
4. 혼공 자바스크립트 28강 - 기본 매개변수와 가독성
- 구버전, 신버전의 기본 매개변수
- 성능 vs 가독성 - 기존엔 성능이 중요했으나 현재는 가독성이 중요해짐.
- 기업의 비용 절감 - 과거에는 개발자보다 자원이 희소했음 (개발자 x값 vs 자원 금값)
- 프로그램의 규모가 커지고 너무 복잡해짐 - 단위 테스트(unit test)가 중요해짐. (빠르게 작성한 코드를 테스트해주는 과정의 자동화)
- 지원 도구의 활용. 컴파일러의 발전.
- 코드 골프 - 짧게 함축적으로 코드를 작성
- 짧은 코드. (예) Conway's Game of Life
- 기본 매개변수: 함수 호출시 입력값이 없을 경우에도 기본 값을 입력해줌
- 구버전의 경우 기본값을 바로 지정해줄 수 없었고 'typeof(매개변수) === undefined'인지를 확인해서 값을 assign해웠으나, 현재버전의 경우 '매개변수=기본값'의 형태로 함수 정의시 바로 지정해줄 수 있음.
- 과거에는 '연도 = type(연도) === 'undefined' ? new Date().getFullYear() : 연도' 또는 ''연도 = type(연도) !== 'undefined' ? 연도 : new Date().getFullYear() ' 형태로 사용하기도 했음. 0인 경우 문제가 있었어서, 예외처리도 해줬어야 했다.
- '연도 = 연도 || new Date().getFullYear()'로 사용해주기도 했다.
5. 혼공 자바스크립트 29강 - 5.1절 확인 문제
- 확인문제 풀이
- 구버전의 함수 내부에서 사용하는 arguments 사용법. for in/of 등으로 처리할 수 없고 단순 for 반복문만 사용 가능
- 구버전에는 전개 연산자 사용 불가. max.apply(null, input) 형태로 처리 가능.
6. 혼공 자바스크립트 30강 - 콜백함수
- 콜백함수: 함수의 매개변수로 함수 전달
- 배열.forEach(function (value, index, array) { } 형태로 사용되나, 배열.forEach(function (value, index) { }로 많이 사용된다.
- filter() 함수
- map() 함수
- 화살표 함수
7. 혼공 자바스크립트 31강 - 타이머 함수, 즉시 호출 함수(IIFE), 엄격 모드
- 타이머 함수
- setTimeout() => 고급 주제로 추가로 나올 예정
- 두번쨰 배개변수로 밀리초
- setInterval()
- clearTimeout()
- clearInterval()
- setTimeout() => 고급 주제로 추가로 나올 예정
- 즉시 호출함수
- (function() { })
- 충돌을 일으킬 수 있는 협력개발시 문제를 해결하기 위해 즉시 호출함수를 사용.
- 타인의 코드를 볼 때 이해하기 위해 이해할 필요 있음.
- 엄격 모드 (strict mode)
- <script>내 앞부분에 'use strict'를 추가해 엄격히 검사.
- 자바스크립트 개발자들은 즉시호출 함수 내에서 엄격 모드를 사용하기도 하므로, 타인 코드 이해를 위해 알면 좋음.
8. 혼공 자바스크립트 32강 - 선언적 함수와 익명 함수의 차이, 확인 문제
- 선언적 함수와 익명 함수의 차이
- 문제발생 여지가 있어서 선언적 함수는 거의 사용하지 않고 익명 함수를 사용하게됨
- 과거 코드 읽을 수 있기 위해 선언적 함수 이해
- 확인문제
9. 오탈자 (범위: p.193~241)
손코딩 하나하나 다 해본다는게 참 쉽지 않다냥~ 카페인이 필요하다냥~
내 비록 '2022 개발자 설문조사'나 '올해의 깐부'나 '제3회 혼공시험' 이벤트 모두 당첨되지 못했지만... 흑~ 혼공족장님과 혼고양님 한테 잘보여서라도 언젠간 커피 쿠폰이라도 꼭 받을 고야옹~
