Javascript 함수 (공부_12)

함수

• 하나의 단위로 실행할 수 있도록 명령문을 그룹화한 것

함수 생성

• 함수 선언식

function sayHello() {
  console.log('이름과 나이 출력');
  console.log('이름: 홍길동, 나이: 25살');
}
sayHello();

 

• 함수 표현식

const sayHello = function () {
  console.log('이름과 나이 출력');
  console.log('이름: 홍길동 , 나이: 23살');
};
sayHello();

 

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

★ 함수 선언식은 호이스팅의 영향을 받지만 함수 표현식은 안받음 ★

 

파라미터

• 괄호() 안에 파라미터(또는 매개변수)를 선언하여 함수 호출 시 값 전달 가능

const sayHello = function (name, age) {
  console.log('이름과 나이 출력');
  console.log(`이름: ${name} , 나이: ${age}`);
};
sayHello('홍길동', 23);

 

반환값

• return 키워드를 사용하여 함수에서 값 반환 가능

function sum(num1, num2) {
  return num1 + num2;
}
let result = sum(5, 3);
console.log('result: ', result);	// 5 출력

 

함수 스코프

• 전역 스코프 : 최상단에 선언된 변수, 함수
• 블록 스코프 : 블록 단위로 선언된 변수, 함수
• 자식은 부모 것을 사용할 수 있음

function aFunc() {
  let name = '홍길동';
  let age = 20;
  function bFunc() {
    let job = '개발자';
    console.log('bFunc name: ', name);
    console.log('bFunc age: ', age);
    console.log('bFunc job: ', job);
  }
  bFunc();
  console.log('aFunc name: ', name);
  console.log('aFunc age: ', age);
  // console.log('aFunc job: ', job); ---> 출력 x
}
aFunc();

 

익명 함수

• 함수의 이름이 없는 것을 의미

let fruits = ['사과', '바나나', '딸기'];
fruits.forEach(function (item) {
  console.log('item: ', item);
});

 

즉시 실행 함수

• ()를 사용하여 즉시 실행 함수를 만들 수 있음

(function () {
  console.log('Hello');
}) ()

(function hello() {
  console.log('Hello');
}) ()

 

파라미터 기본값

• ES6에서 매개변수에 기본값을 지정하는 기능 추가

function sum(num1, num2) {
  return num1 + num2;
}
sum(5);	// NaN 출력

function sum(num1 = 0, num2 = 0) {
  return num1 + num2;
}
sum(5);	// 5 출력

 

Arrow Function

• ES6에서 추가된 화살표 표기법 (자주 사용됨)
• function 예약어 생략 가능
• 함수에 매개변수가 단 하나뿐이라면 괄호()도 생략 가능
• 함수 바디 표현식이 하나라면 중괄호와 return 생략 가능

const f1 = function() { return "Hello"; }
// OR
const f1 = () => "hello";

const f2 = function(name) { return `Hello, ${name}`; }
// OR
const f2 = name => `Hello, ${name};

const f3 = function(a, b) { return a + b; }
// OR
const f3 = (a, b) => a + b;

 

콜백 함수

• 다시 호출되는 함수

btn.addEventListener('click', function() {
 // 콜백 함수
 })
 // addEventListener() 함수 호출 후 다시 콜백 함수(function(){...}) 호출됨
 
 let fruits = ['사과', '바나나', '딸기'];
fruits.forEach(function (item, index) {
  console.log('item: ', item);
});

 

함수명명 규칙

• 함수 -> 동사로
• 변수 -> 명사로

 

 

 

정리

• 함수를 사용하여 여러 개의 명령문을 한 번에 사용할 수 있음
• 함수 생성 방법에는 함수 선언식과 함수 표현식 두 가지가 있음
• 파라미터를 선언하여 함수 값을 전달할 수 있음
• return을 사용하여 함수 안에서 값을 반환할 수 있음
• 함수 스코프에 맞게 변수와 함수를 사용할 수 있음
• 함수의 이름을 안 적고 재활용할 필요 없는 익명 함수를 만들 수 있음
• ()를 사용하여 함수를 즉시 실행할 수 있음
• Arrow Function을 사용하여 함수를 쉽게 표현할 수 있음
• 함수를 다시 호출하는 콜백 함수가 있음
• 함수의 이름을 지을 때 동사로 변수의 이름은 명사로 짓는 규칙이 있음