javascript 기초 1 - 함수(1)

○ 함수 생성

 1. 함수 선언문 방식

   - 함수 선언문 방식으로 정의된 함수의 경우는 반드시 함수명이 정의되어 있어야 한다.

   - 일반적으로 함수 선언문 방식은 C/C++ 에서 사용하는 함수 정의 방법과 유사하지만, function이라는 키워드를 명시       적으로 사용하고 리넡값과 매개 변수로 넘기는 값에 변수타입 (int, char 등)을 기술하지 않는다는 점에서 차이가 있       다.

 

function add(x, y) {
	return x + y;
}

console.log(add(3, 4)); // 출력값 7

 

 2. 함수 표현식 방식

  - 함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 방식

var add = function (X, y) {
    return x + y;
}

var plus = add;

console.log(add(3, 4)); // 7
console.log(add(5, 6)); // 11

 3. 기명 함수 표현식 방식

  - 함수 표현식에서 사용된 함수 이름이 외부 코드에서는 접근 불가능하다.

var add = function sum (x, y) {
	return x + y;
}

console.log(add(3, 4)); // 7
console.log(add(5, 6));
// Uncaught ReferenceError : Sum is not defined 에러 발생

 4. Function() 생성자 함수를 통한 함수 생성하기

var add = new Function('x', 'y', 'return x + y');
console.log(add(3, 4)); // 7

 

○ 함수 호이스팅

add(2, 3); // 5

// 함수 선언문 형태로 add() 함수 정의
function add(x, y) {
	return x + y;
}

add(3, 4); // 7

  - 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다는 것을 확인 할 수 있다. 이것을 함수 호이스팅이라고 부른다.

 

add(2, 3); // uncaught type error

// 함수 표현식 형태로 add() 함수 정의
var add = function (x, y) {
	return x + y;
};

add(3, 4) // 7

 - 이러한 함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성과 초기화의 작업아 분리돼서 진행되기 때문이다.

 

○ 함수 객체

// 함수 선언 방식으로 함수정의
function add(x, y){
	return x + y;
}

// add 함수 객체에 result, status 프로퍼티 추가
add.result = add(3, 2);
add.status = 'OK';

console.log(add.result); 5

 - 리터럴에 의해 생성

 - 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능

 - 함수의 인자로 전달 가능

 - 함수의 리턴값으로 리턴 가능

 - 동적으로 프로퍼티를 생성 및 할당 기능

 

 @ 변수나 프로퍼티의 값으로 할당

//변수에 함수 할당
var foo = 100;
var bar = function() { return 100; };
console.log(bar()); // 100

//프로퍼티에 함수 할당
var obj = {};
obj.baz = function() { return 200; };
console.log(obj.baz()); //200

 @ 함수 인자로 전달

// 함수 표현식으로 foo() 함수 생성

var foo = function(func) {
	func();
};

//foo() 함수 실행
foo(function() {
	console.log('Function can be used as the argement');
};

//출력결과 : 'Function can be used as the argement'

 @ 리턴값으로 활용

// 함수를 리턴하는 foo() 함수 정의

var foo = function() {
	return fuction() {
    	console.log('this function is the return value');
    };

};

var bar = foo();
bar();

// 출력값 this function is the return value