함수 (function)

   함수(function)는 지시사항의 묶음입니다.   

y = f(x)

입력 -> 함수 -> 출력

f(x) = x로 들어가는 문자열의 길이

f(안녕하세요) = 5

 

JavaScript에서의 함수는 함수 이름과 입력으로 만들어 집니다.

getLength(“안녕하세요”)

let length = getLength("안녕하세요");
console.log(length);	//5

 

함수의 선언

function myFunction(input){  //함수에서 사용할 입력값(input)을 매개변수(parameter)라고 부릅니다.

   // 컴퓨터에게 시킬 일

}

//다음과 같이 정의할 수도 있습니다.(함수 표현식)
let myFunction = function(inqut){

   // 컴퓨터에게 시킬 일

}

함수 선언식과 함수 표현식의 차이점

차이점을 알기 위해서는 호이스팅을 먼저 알아야 합니다. 

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않기 때문입니다.

함수 선언식은 자바스크립트의 특징인 호이스팅에 따라 브라우저가 해석할 때 맨 위로 끌어 올려집니다. 

//실행 전
message();
numbers();

function message(){
	return 'Hello'
}

var numbers = function() {
	return 100 + 10;
};

//실행 시
function message(){	//올라옴
	return 'Hello'
}

var numbers;	//올라옴

message();
numbers();

numbers = function() {
	return 100 + 10;
};

호이스팅을 제대로 모르더라도 함수의 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있습니다.

 

 

집까지 가는데 걸리는 시간을 계산하는 함수를 예로 들어봅니다. 

let timeToGoHome = function(speed, distance) {
	let time = distance / speed;
	console.log(time);
}

timeToGoHome(20, 100)	//5
timeToGoHome(10, 100)	//10

return으로 출력결과를 밖으로 가져와서 활용할 수 있습니다.

function timeToGoHome(speed, distance) {
	let time = distance / speed;
	return time; 
}

let myTime = timeToGoHome(20, 100);
console.log(myTime);	//5

function timeToGoHome(speed, distance) {
	let time = distance / speed;
	//만약 아무것도 리턴하지 않는다면
}

let myTime = timeToGoHome(20, 100);
console.log(myTime);	//undefined

 

[펑션 안에 펑션을 집어넣어 활용]

function printGrade(grade) {
  let resultGrade = "";
  if (grade > 90 && grade <= 100) {
    resultGrade = "A";
  }
  
  let plusMinus = function (grade) {
     if (grade > 90 && grade < 92) {
        return "-";
     } else if (grade > 97 && grade < 100){
        return "+";
     } else {
        return "";
     }
  }  
  
  
  let pm = plusMinus(grade);
  return resultGrade + pm;
}

 

   일급 객체   

스크립트 언어에서 객체는 일급 객체이며, 함수도 객체입니다.

일급객체의 조건

1. 변수나 데이터 구조안에 담을 수 있다.

var foo = function(){
console.log("익명함수를 foo 변수에 담을 수 있습니다.");
}

foo();

2. 파라미터로 전달 할 수 있다.

var foo = function(){
    let x = 10;
    return x;
}

var goo = function(value){
    console.log(value)
}

// 인자로 함수를 전달할 수 있습니다.
goo(foo());

3. 반환 값으로 사용할 수 있다.

var foo = function(){
    return function(){
        var x = 10;
        return x;
    }
}

console.log(foo())   // 익명함수를 반환합니다.
console.log(foo()()) // 익명함수가 반환하는 값을 반환합니다.

4. 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다.

var foo = function goo(){
    console.log("goo라는 함수로 선언했지만 foo라는 변수로 고유 구별이 가능합니다.")
}

foo();
//goo라는 함수로 선언을 했지만 foo라는 변수에 할당하여 foo()를 호출함 으로써 goo()함수를 구별할 수 있습니다.

5. 동적으로 프로퍼티 할당이 가능하다

function foo(){
    console.log("foo()함수는 비어 있습니다.")
}

foo.property1 = "첫 번째 프로퍼티 추가";
foo.property2 = "두 번째 프로퍼티 추가";

console.log(foo.property1);
console.log(foo.property2);