"JavaScript 함수"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-source +syntaxhighlight))
 
(사용자 2명의 중간 판 3개는 보이지 않습니다)
4번째 줄: 4번째 줄:
==함수 정의 (Function Declaration)==
==함수 정의 (Function Declaration)==
===함수 정의===
===함수 정의===
<source lang="javascript">
<syntaxhighlight lang="javascript">
function functionName(parameters) {
function functionName(parameters) {
     code.....
     code.....
}
}
</source>
</syntaxhighlight>


===함수 정의 예시===
===함수 정의 예시===
<source lang="javascript">
<syntaxhighlight lang="javascript">
function foo() {
function foo() {
     alert("bar");
     alert("bar");
}
}
</source>
</syntaxhighlight>
:→ '''function'''키워드를 사용하여 bar를 출력 하도록 하였음
:→ '''function'''키워드를 사용하여 bar를 출력 하도록 하였음


==함수 표현 (Function Expressions)==
==함수 표현 (Function Expressions)==
===익명 함수 표현===
===익명 함수 표현===
<source lang="javascript">
<syntaxhighlight lang="javascript">
var foo = function() {
var foo = function() {
     return 3;
     return 3;
}
}
console.log(foo()); // 3
console.log(foo()); // 3
</source>
</syntaxhighlight>


===이름이 있는 함수 표현===
===이름이 있는 함수 표현===
<source lang="javascript">
<syntaxhighlight lang="javascript">
var foo = function bar() {
var foo = function bar() {
     return 3;
     return 3;
}
}
console.log(foo()); // 3
console.log(foo()); // 3
</source>
</syntaxhighlight>


===자가 실행 함수===
===자가 실행 함수===
*함수 호출 없이 스스로 자동 실행
*함수 호출 없이 스스로 자동 실행
<source lang="javascript">
<syntaxhighlight lang="javascript">
(function foo() {
(function foo() {
     console.log("bar"); // bar
     console.log("bar"); // bar
})();
})();
</source>
</syntaxhighlight>
:→ 정의된 함수를 괄호로 감싸고 다시 한 번 괄호를 붙여주면 자가 실행 함수로 동작함.
:→ 정의된 함수를 괄호로 감싸고 다시 한 번 괄호를 붙여주면 자가 실행 함수로 동작함.
{{인용문|
{{인용문|
50번째 줄: 50번째 줄:
===함수 생성자 사용===
===함수 생성자 사용===
*함수 생성자 Function을 사용하여 함수 생성
*함수 생성자 Function을 사용하여 함수 생성
<source lang="javascript">
<syntaxhighlight lang="javascript">
var foo = new Function("console.log('bar')");
var foo = new Function("console.log('bar')");
foo();
foo();
</source>
</syntaxhighlight>
*인수 a, b를 각각 더하여 돌려주는 함수
*인수 a, b를 각각 더하여 돌려주는 함수
<source lang="javascript">
<syntaxhighlight lang="javascript">
var foo = new Function("a", "b", "a + b");
var foo = new Function("a", "b", "a + b");
console.log(foo(1, 2));
console.log(foo(1, 2));
</source>
</syntaxhighlight>
{{인용문|유의할 점은 Function의 F는 대문자임}}
{{인용문|유의할 점은 Function의 F는 대문자임}}


66번째 줄: 66번째 줄:


==참고==
==참고==
* https://blog.naver.com/edy5016/221157369323
* https://blog.naver.com/edy5016/221157369323 함수와 프로토타입 체이닝


[[분류: JavaScript]]
[[분류: JavaScript]]

2020년 11월 2일 (월) 00:55 기준 최신판

1 개념[ | ]

자바스크립트 함수 정의
JavaScript Function Definition

2 함수 정의 (Function Declaration)[ | ]

2.1 함수 정의[ | ]

function functionName(parameters) {
    code.....
}

2.2 함수 정의 예시[ | ]

function foo() {
    alert("bar");
}
function키워드를 사용하여 bar를 출력 하도록 하였음

3 함수 표현 (Function Expressions)[ | ]

3.1 익명 함수 표현[ | ]

var foo = function() {
    return 3;
}
console.log(foo()); // 3

3.2 이름이 있는 함수 표현[ | ]

var foo = function bar() {
    return 3;
}
console.log(foo()); // 3

3.3 자가 실행 함수[ | ]

  • 함수 호출 없이 스스로 자동 실행
(function foo() {
    console.log("bar"); // bar
})();
→ 정의된 함수를 괄호로 감싸고 다시 한 번 괄호를 붙여주면 자가 실행 함수로 동작함.
  • (함수)();
  • (함수());

4 함수 생성자[ | ]

4.1 함수 생성자 사용[ | ]

  • 함수 생성자 Function을 사용하여 함수 생성
var foo = new Function("console.log('bar')");
foo();
  • 인수 a, b를 각각 더하여 돌려주는 함수
var foo = new Function("a", "b", "a + b");
console.log(foo(1, 2));

유의할 점은 Function의 F는 대문자임

5 같이 보기[ | ]

6 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}