TIL 5 | JavaScript - 함수

Yonghyun·2021년 7월 30일
0

JavaScript & React

목록 보기
5/31
post-thumbnail

함수

함수의 기본형태

함수를 사용하는 것을 함수 호출, 즉 함수를 호출한다고 표현한다. 함수를 호출할때는 괄호 내부에 여러가지 자료를 넣는데 이러한 자료를 매개변수라고 한다.

함수를 호출해서 최종적으로 나오는 결과를 리턴값이라고 부른다.

익명함수

함수 - 코드의 집합을 나타내는 자료형

function () {}

함수사용의 좋은점

  • 반복되는 코드를 한번만 정의해놓고 필요할 때마다 호출하므로 반복작업을 피할 수 있다.
  • 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체코드의 가독성이 좋아진다.
  • 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽다.

    함수의 자료형 : function

선언적 함수

function 함수() {

}

매개변수와 리턴값

function 함수(매개변수,매개변수,매개변수){
  문장
  문장
  return 리턴값
}

매개변수 - 함수에 넣는 input
리턴값 - 함수에서 나오는 output

가변 매개변수 함수

호출할때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 하고 이러한 함수를 구현할때는 나머지 매개변수 문법을 사용한다.

function 함수이름(...나머지 매개변수) { }

전개 연산자

배열을 전개해서 함수의 매개변수로 전달한다.

함수이름(...배열)

기본 매개변수

매개변수에 기본값을 지정한다.

함수이름(매개변수,매개변수=기본값,매개변수=기본값)

콜백함수를 활용하는 함수

콜백함수 - 매개변수로 전달하는 함수

.forEach()

배열이 갖고있는 함수로써 단순하게 배열 내부의 요소를 사용해서 콜백함수를 호출해준다.

function(value,index,array){ }

.map()

콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수

.filter()

콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

화살표 함수

.map() .filter() 함수처럼 단순한 형태의 콜백함수를 쉽게 입력하는 함수 생성방법

(매개변수) => {
  
}
(매개변수) => 리턴값

타이머 함수

setTimeout(함수, 시간)	// 특정 시간후에 함수를 한번 호출.
setInterval(함수, 시간)	// 특정 시간마다 함수를 호출.

타이머 종료 함수

clearTimeout(타이머_ID)	// setTimeout() 함수로 설정한 타이머 제거
clearInterval(타이머_ID)	// setInterval() 함수로 설정한 타이머 제거

변수가 존재하는 범위를 스코프라고 부르는데 이 스코프는 같은단계에 있을 경우 무조건 충돌이 일어난다. 중괄호를 사용해서 또는 함수를 생성해서 블록을 만들어서 스코프 단계를 변경시켜서 충돌을 막을 수 있다.

블록이 다른 경우 내부변수가 외부변수를 가리는 현상이 발생하는데 이를 섀도잉이라고 한다.

엄격모드

'use strict'
엄격모드를 사용하게 되면 코드를 더 엄격하게 검사한다.

function() {
  'use strict'
  문장
  문장
}

선언적함수와 익명함수의 조합

선언적함수는 먼저 생성되고 이후에 순차적인 코드 진행을 시작하면서 익명함수를 생성한다.
익명함수는 우리가 코드를 읽을때와 같은 순서로 함수가 선언되지만 선언적함수는 우리가 코드를 읽는 순서와 다른 순서로 함수가 선언된다. 그래서 안전하게 사용할 수 있는 익명함수를 선호한다.


TIL 5 day
점점 복잡한 내용과 실제 코드에서 사용되는 내용들을 공부하면서
헷갈리는 부분들도 많지만 그만큼 성취감도 큰것 같다.
어려운만큼 더 많이 쳐보고 더 많이 틀리면서 하나하나 전부다 씹어먹어서(?) 내것으로 만들고 말겠다...

profile
Life is all about timing.

0개의 댓글