JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


자바스크립트 함수 정의


JavaScript 함수는 키워드 로 정의 됩니다 .function

함수 선언 또는 함수 표현식 을 사용할 수 있습니다 .


함수 선언

이 자습서의 앞부분에서 함수는 다음 구문 으로 선언 된다는 것을 배웠습니다.

function functionName(parameters) {
  // code to be executed
}

선언된 함수는 즉시 실행되지 않습니다. "나중에 사용하기 위해 저장"되며 나중에 호출(호출)될 때 실행됩니다.

예시

function myFunction(a, b) {
  return a * b;
}

세미콜론은 실행 가능한 JavaScript 문을 구분하는 데 사용됩니다.
함수 선언 은 실행 가능한 문이 아니기 때문에 세미콜론으로 끝나는 것이 일반적이지 않습니다.


함수 표현식

JavaScript 함수는 표현식 을 사용하여 정의할 수도 있습니다 .

함수 표현식은 변수에 저장할 수 있습니다.

예시

const x = function (a, b) {return a * b};

함수 표현식을 변수에 저장한 후 변수를 함수로 사용할 수 있습니다.

예시

const x = function (a, b) {return a * b};
let z = x(4, 3);

위의 함수는 실제로 익명 함수 (이름이 없는 함수)입니다.

변수에 저장된 함수에는 함수 이름이 필요하지 않습니다. 항상 변수 이름을 사용하여 호출(호출)됩니다.

위의 함수는 실행 가능한 문의 일부이기 때문에 세미콜론으로 끝납니다.



Function() 생성자

이전 예제에서 보았듯이 JavaScript 함수는 function키워드로 정의됩니다.

함수는 라는 내장 JavaScript 함수 생성자를 사용하여 정의할 수도 있습니다 Function().

예시

const myFunction = new Function("a", "b", "return a * b");

let x = myFunction(4, 3);

실제로 함수 생성자를 사용할 필요가 없습니다. 위의 예는 다음과 같이 작성하는 것과 같습니다.

예시

const myFunction = function (a, b) {return a * b};

let x = myFunction(4, 3);

대부분의 경우 newJavaScript에서는 키워드 사용을 피할 수 있습니다.


기능 호이스팅

이 튜토리얼의 앞부분에서 "호이스팅"( JavaScript Hoisting ) 에 대해 배웠습니다 .

호이스팅은 선언 을 현재 범위의 맨 위로 이동하는 JavaScript의 기본 동작입니다 .

호이스팅은 변수 선언과 함수 선언에 적용됩니다.

이 때문에 JavaScript 함수는 선언되기 전에 호출될 수 있습니다.

myFunction(5);

function myFunction(y) {
  return y * y;
}

표현식을 사용하여 정의된 함수는 호이스팅되지 않습니다.


자체 호출 함수

함수 표현식은 "자체 호출"로 만들 수 있습니다.

자체 호출 표현식은 호출되지 않고 자동으로 호출(시작)됩니다.

표현식 뒤에 ()가 오면 함수 표현식이 자동으로 실행됩니다.

함수 선언을 자체 호출할 수 없습니다.

함수 표현식임을 나타내려면 함수 주위에 괄호를 추가해야 합니다.

예시

(function () {
  let x = "Hello!!";  // I will invoke myself
})();

위의 함수는 실제로 익명의 자체 호출 함수 (이름 없는 함수)입니다.


함수를 값으로 사용할 수 있음

JavaScript 함수는 값으로 사용할 수 있습니다.

예시

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3);

JavaScript 함수는 표현식에서 사용할 수 있습니다.

예시

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3) * 2;

함수는 객체입니다

JavaScript 의 typeof연산자는 함수에 대해 "함수"를 반환합니다.

그러나 JavaScript 함수는 객체로 가장 잘 설명될 수 있습니다.

JavaScript 함수에는 속성 메서드 가 모두 있습니다 .

arguments.length속성은 함수가 호출될 때 받은 인수의 수를 반환합니다.

예시

function myFunction(a, b) {
  return arguments.length;
}

toString()메서드는 함수를 문자열로 반환합니다.

예시

function myFunction(a, b) {
  return a * b;
}

let text = myFunction.toString();

객체의 속성으로 정의된 함수를 객체에 대한 메서드라고 합니다.
새로운 객체를 생성하도록 설계된 함수를 객체 생성자라고 합니다.


화살표 함수

화살표 함수는 함수 표현식을 작성하기 위한 짧은 구문을 허용합니다.

function키워드, return키워드 및 중괄호 는 필요하지 않습니다 .

예시

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

화살표 기능에는 고유한 기능이 없습니다 this. 그것들은 객체 메소드 를 정의하는 데 적합하지 않습니다 .

화살표 함수는 호이스팅되지 않습니다. 사용 하기 전에 정의해야 합니다 .

함수 표현식은 항상 상수 값이기 때문에 를 사용 하는 것이 를 사용 const 하는 것보다 안전 합니다.var

return함수가 단일 명령문인 경우에만 키워드와 중괄호 를 생략할 수 있습니다 . 이 때문에 항상 보관하는 것이 좋은 습관일 수 있습니다.

예시

const x = (x, y) => { return x * y };

화살표 기능은 IE11 또는 이전 버전에서 지원되지 않습니다.