- function
-
특정한 일들을 수행하기 위해서 코드를 여러번 작성할때, 같은 코드를 여러번 쓰는 대신 코드를 그룹화하여 한가지 일과 연관시킨다. 그러면 나중에 그 코드를 재사용 할 수 있다.
즉, function은 재사용 가능한 코드의 블록이며 그 코드는 특수한 일을 수행하기 위한 연속된 구문으로 그룹화 된다. -
함수명으로 어떤 일을 수행할지 예측할 수 있기 때문에 함수명을 영리하게 지을 필요가 있다.(동사형으로 이름짓기, doSomethig)
-
하나의 함수는 한가지의 일만 하도록 만들어야 한다.
-
first class citizen(object)
js에서 함수는 object로 간주된다. 그렇기 때문에 함수를 1. 변수에 할당하거나 2. 함수의 매개변수로 전달되거나 3. 함수의 리턴값으로 사용할 수 있다.
이렇게 다양한 용도로 사용될 수 있는 데이터 형태를 first class citizen(object)라고 부른다.
// 함수가 리턴값으로 사용될 때
function cal(mode) {
const func = {
plus: function (a, b) {
return a + b;
},
minus: function (a, b) {
return a - b;
},
};
return func[mode];
}
console.log(cal("minus")(1, 4));
// 함수가 배열의 값으로 사용될 때
let process = [
function (input) {
return input + 10;
},
function (input) {
return input + input;
},
function (input) {
return input / 2;
},
];
let input = 1;
for (i = 0; i < process.length; i++) {
input = process[i](input);
console.log(input);
}
- function을 만드는 다양한 방법
1. 함수선언(function declaration)
function키워드를 적고 그 옆에함수명(매개변수) = 식별자를 적는다. 매개변수는 함수의 괄호 안에 선언되는 변수이다.{}안에 특정한 일을 수행할 코드를 적는다.(함수선언)함수이름(인자)으로 함수를 호출한다.- 함수선언은 hoisting 되기 때문에 함수 정의 전에 호출이 가능하다.(어디서든 호출 가능)
js가 선언된 함수를 가장 위로 올려주기 때문이다.
2. 함수표현(function expression)
const plantNeedsWater = function(day) {
if (day === 'Wednesday') {
return true;
} else {
return false;
}
}
plantNeedsWater('Tuesday');
console.log(plantNeedsWater('Tuesday')); //false 출력 const 변수명 = function(매개변수) {};변수명(인자)으로 함수를 호출한다. 다른 변수에 할당하여 새로 만든 변수로 호출이 가능하다.- 변수에 할당된 다음부터 함수호출이 가능하다.(코드에 도달하면 비로소 함수 생성)
3. 화살표함수
- 함수를 간결하게 작성하는 방법.
() =>표기법을 사용한다. - 함수이름이 없으며(anonymous function), function 키워드를 쓰지 않는다.
const 변수명 = (매개변수) => { };
4. Concise Body Arrow Functions(가장 간결한 함수)
화살표함수를 더 간결하게 할 수 있다.
- 한줄블록으로 구성된 함수는
{ } 블럭이 필요없으며 값은 자동 return 된다.=>뒤에 함수내용을 써준다. return문은 { }가 아닌 (return 키워드 없이)( )로 바꿀 수 있다.
리턴문이 한줄이라면 ( )도 생략 가능하다. - 그러나
{ } 블럭을 쓰게 되면 'return' 키워드를 써서 값을 리턴해야 한다. - 매개변수가 없거나 두개이상이면 괄호
()를 써준다.
매개변수가 하나라면 ( ) 생략이 가능하다.
5. IIFE(immediately invoked function expression)
- 함수 선언과 동시에 호출하고 싶다면
함수의 선언을 괄호( )로 묶은 후, ( )로 호출하면 된다.
-
매개변수(Parameter)
매개변수는 함수의 괄호 안에 선언되는 변수다.
위의 함수의 width, height가 이에 해당한다. -
인자(Argument)
인자는 매개변수로 전달되는 실제 값이다.
위에서 width, height에 해당하는 숫자값이 인자에 해당한다.
매개변수와 인자를 구분하지 않고 인자라고만 하는 경우도 많다. -
기본 매개변수
인자가 입력되지 않았을 때를 대비하여 미리 정해진 값을 도출시키는 매개변수 -
rest parameters (...args)
매개변수 앞에 ...을 붙이면 인자가 배열형태로 전달된다.
** 배열출력은 for (const arg of args) { }나 args.forEach(arg=> { })
-
local scope
밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다.. 라고 기억하자
블럭 안에서 변수를 선언하면 지역변수. 그리고 함수 안에서만 변수에 접근이 가능하다.
블럭 안에서 전역범수에 접근도 가능하다. -
return 리턴
리턴타입이 없는 함수는 return undefined 인 것과 같고 생략이 가능하다.
- early return : 조건이 맞지 않을 때는 빨리 리턴해서 함수를 종료하고, 조건이 맞을때만 그 다음 로직을 실행할 수 있게 하는 것이 좋다.
function greeting (name = 'stranger') {
console.log(`Hello, ${name}!`)
}
greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!위 코드에서 name의 기본값을 'stranger'로 할당했다. 인자가 입력되면 인자값으로 함수가 도출되지만, 입력되지 않는다면 기본값을 출력한다.
