함수란 어떤값을 입력하고, 입력한 값을 처리하여 출력한다. 함수란 로직, 연산등을 모아 둔 자료형입니다. 기타 프로그래밍 언어에는 함수가 모두들 존재하고, 언어에 약간이라도 관심이 있으시다면 int main(){ ~~ return 0; } 위의 코딩은 c-언어의 대표적인 메인 함수입니다.
int: 출력을 integer로 하겠다는 표시이고, return 0은 출력을 0으로 하겠다는 의미입니다.
본격적으로 자바스크립트에서의 함수에 대해 살펴보겠습니다.
익명함수 - 위의 c-언어 main함수와는 조금 다른 모양의 함수입니다. 형태는 비슷한데 입/출력에 대한 표기가 없습니다. 이런 형태의 함수를 익명함수라 합니다. 익명함수는 순차적인 코드 실행에서 해당 줄을 읽을 때 생성됩니다. 함수 1, 함수 2가 있을 경우 함수 1이 끝나고 함수 2가 읽을 때 생성 됩니다. 예제소스실행결과
선언적 함수 - 선언적 함수는 순차적인 코드 실행이 일어나기 전에 생성됩니다. 익명함수와 차이가 있다면 함수가 호출되어 실행될 때 함수명이 출력된다는 것입니다. 선택적 함수 예제실행결과
매개변수와 리턴값 - 매개변수란 함수 호출 주"()"안에 작성하는 것을 말합니다. - 리턴은 함수가 실행되고 나서 최종으로 반환하는 값을 말합니다. - 인자를 하나 받고 결과를 리턴하는 기본적인 함수 매개변수 1개 함수실행결과
: 매개변수 x에 값을 입력하고, 함수에서는 입력된 값을 제곱하여 출력하는 함수 - 인자를 2개 받고 리턴하는 함수 매개변수 2개 함수실행결과
: 매개변수 a, b 두 개를 받아 a부터 b까지의 합을 구하여 리턴하는 함수 - 매개변수를 배열로 받는 함수 : 앞에 두개 함수는 정수값을 입력받아 처리하였지만 여기서는 배열을 입력하여 결과를 출력한다. 배열을 매개변수로 입력한 함수실행결과
나머지 매개변수 :매개변수가 고정적이지 않은 함수를 가변 매개변수 함수라고 합니다. 이때 사용하는 매개변수가 나머지 매개변수입니다. 표현은 "..."으로 표기합니다. 나머지 매개변수 예제예제 실행결과
: 고정 매개변수와 가변 매개변수를 동시에 사용하는 함수 음 이건 좀 신기하네요. 배열을 선언하지 않았는데 가변 매개변수들이 배열로 출력이 되네요.
예제함수실행결과같은 함수이나 정수와, 배열을 각각 입력하여도 처리되는 함수실행결과
- 함수는 하나인데 인자의 자료형이 여러 개(정수, 배열) 일 때에는 typeof 연산자를 이용하여 정수인지 판단합니다. 배열을 typeof로 확인하면 Object로 출력된다. 따라서 배열일 경우는 Array.isArray() 매소드를 사용하여 구분합니다.
전개연산자 - 매개변수로 전달할 때 배열을 전개하여 함수의 매개변수로 전달하는 것을 전개 연산자를 사용합니다. ex) 함수 이름(... 배열) 전개연사자를 사용하지 않은 경우와 사용한 경우실행 결과1실행결과 1 (상세)
기본 매개변수 -함수의 매개변수로 항상 같은 매개변수를 여러 번 반복해서 입력하는 경우 사용합니다. 같은 함수를 호출할 때 매개변수 인자가 3개인데 이중 2개가 같은 값만 전달될 경우 사용합니다. ex) 함수이름(매개변수, 매개변수=기본값, 매개변수=기본값) 실행예제
Chapter05-02 함수 고급 다른 프로그래밍 언어는 함수를 지정된 위치에 만들어야 하지만, 자바스크립트는 '함수도 하나의 자료'라는 개념을 가지고 있어서 중간에 만들 수 있습니다. 이는 2010년 전후에 등장할 비동기 프로그래밍을 이끌었습니다.
콜백 함수 -자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있습니다. 이렇게 매개변수로 전달하는 함수를 콜백 합수라고 합니다. 콜백함수 예제실행결과콜백함수 익명 함수 사용 예제실행 결과
- 콜백 함수를 활용하는 함수 : forEach() : 콜백 함수를 활동하는 가장 기본적인 함수는 froEach() 메소드입니다. forEach() 메소드는 배열이 갖고 있는 함수로서 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출해 줍니다. forEach 예제실행 결과
- 콜백 함수를 활용하는 함수 : map() : map() 메소드도 배열이 갖고 있는 함수입니다. map() 메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수입니다. map 예제실행 결과
- 콜백 함수를 활용하는 함수 : filter() : filter() 메소드도 배열이 갖고 있는 함수입니다.filter() 메소드는 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수입니다. filter 예제실행 결과
화살표 함수 - 위에서 살펴본 filter(), map() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자 화살표 함수라는 함수 생성 방법도 있습니다. functio 키워드대신 화살표(=>)를 사용합니다. filter에서 화살표 함수 예제실행 결과map에서 화살표 함수 예제실행 결과메소드 체이닝 예제실행결과
타이머 함수 - 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수 입니다. - setTimerout(함수, 시간) : 특정시간 후에 함수를 한 번 호출합니다. - clearTimerout(타이머 ID) : setTimeout() 함수로 설정한 타이머를 제거합니다. - setInterval(함수, 시간) : 특정 시간마다 함수를 호출합니다. - clearInterval(타이머 ID) : setInterval() 함수로 설정한 타이머를 제거합니다. 타이머 예제실행 결과** 갑자기 궁금한 것이..... 위 소스는 일초마다 실행하는 Interval과 Interval 종료를 위한 Timeout함수를 동시에 사용하는데.. clearInterval로 소멸시키는 건 이해되지만... 종료를 위한 Timeout은 소멸되지 않는 것 같습니다. setTimout안애서 본인을 소멸시키지는 못할 테고... 밖에서 하면 SetTimeout이 실행되자마자 소멸되어 Interval이 무한루프 돌테고.... 아직 갈길이 멉니다..^^; javascript 고수님의 한 수 가르침을 기다립니다.
즉시 호출 함수 충돌 방지 방법 - 변수가 존재하는 범위를 스코프라고 부르는데 스코프 내에서는 같은 이름의 변수를 사용할 경우 무조건 충돌이 발생하여 사용할 수 없습니다. 그러나 동일하게 사용하고 싶다면 스코프를 나누어 사용함으로써 충돌을 피할 수 있습니다. 스코프를 이용한 충돌방지 예제실행 결과
위와 같이 블로 내보에서 같은 이름으로 변수를 선언하면 변수가 외부 변수와 통돌하지 않고 외부변수를 가리는 현상을 섀도잉이라고 부릅니다.
엄격 모드 - 자바스크립트 가장 상위에 'use strict' 문자열을 작성하면 엄격모드로 동작하여 문자열을 읽어 들인 순간부터 코드를 엄격하게 검사합니다. 변선선언을 하지 않은 예제실행결과use strict 적용 예제실행 결과
기본 숙제 p. 202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기 윤년 확인 함수실행결과
추가 숙제 p. 240 확인 문제 1번 풀고, 풀이 과정 설명하기 추가 숙제 소스실행결과
아!!!! 드디어 방항인가?
벌써 한 달이 다 지나갔네요.. 시간 엄청 빠르네요.
한 주 쉰 뒤 다다음주에도 열심히~~~~!!!
혼자 공부하는 자바스크립트
#
진도
기본 숙제(필수)
추가 숙제(선택)
1주차 (7/1 ~ 7/7)
Chapter 01 ~ 02
p. 54의 <파일 만들고 저장해 실행하기>에서 'Hello World' 출력하기
Ch.01(01-1) 확인 문제 1번 상세하게 적고 인증하기
2주차 (7/8 ~ 7/14)
Chapter 03
p. 139 의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기
p. 152의 <태어난 연도를 입력받아 띠 출력하기> 예제 실행하여 본인의 띠 출력한 화면 캡처하기
3주차 (7/15 ~ 7/21)
Chapter 04
비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기
p. 173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기
4주차 (7/22 ~ 7/28)
Chapter 05
p. 202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기
