JS(자바스크립트)의 함수에 대해서 학습하자

어느 언어든 함수는 중요하다고 생각합니다. 

여러 줄 작성해야할 코드를 많이 줄일 수 있고 어느 역할을 하는지 이름만 잘 부여한다면,

가독성도 좋다고 생각하니까요! 그러면 자바스크립트 함수를 알아보겠습니다!

---

Function(함수)

함수정의

• 함수 선언문
  • 함수 선언문은 가장 일반적인 함수 정의 방식
  • 함수 선언문으로 정의된 함수는 함수 호이스팅에 의해 코드 어디에서든 호출 가능

 greet('SAHA') // 가능
 
 function greet(name) {
       console.log(`Hello, ${name}!`);
     }

 

• 함수 표현식
  • 함수 표현식은 함수를 변수에 할당하는 방식으로 정의
  • 함수 이름은 생략이 가능하다.
  • 함수 표현식으로 정의된 함수는 변수 호이스팅에 의해 변수 선언 이전에는 사용할 수 없다.

const greet = function(name) {
   console.log(`Hello, ${name}!`);
 };
     
console.log(greet('SAHA'))
// 함수표현식 이후에 호출하자

 

 

• 화살표 함수
  • 화살표 함수는 더 간결한 문법으로 함수를 정의할 수 있는 방식
  • 매개변수가 하나인 경우 괄호를 생략가능
  • 함수 본문이 한 줄인 경우 중괄호와 return 키워드를 생략가능
  • 화살표 함수는 `this`가 정적으로 바인딩되는 특징이 있다.

const greet = name => console.log(`Hello, ${name}!`);

const SAHA = (age, licence) => {
	return console.log(age, licence)
}

// es6에서 새로나온 문법으로 간결하게 작성 가능

 

함수 호출

함수 이름과 함수에 전달할 인수를 괄호 ()안에 작성하여 함수를 호출한다(함수의 실행)

함수 호출 시 인수의 개수와 타입이 일치하지 않아도 암묵적 타입 변환이 일어나 함수가 실행됨

const greet = (some) => {
	return console.log(`Hello, ${some}!`)
}

greet('Alice'); // Hello, Alice!
greet(123); // Hello, 123!

 

 

• 메서드 호출
  • 객체의 프로퍼티로 정의된 함수를 메서드라고 부른다.(객체안에 보이는 함수는 메서드)
  • 객체의 메서드를 호출할 때는 객체 이름과 메서드 이름을 점 `.`으로 연결하여 호출
  • 메서드 내부의 `this`는 메서드를 호출한 객체를 가리킨다.

const person = {
   name: 'Alice',
   greet() {
     console.log(`Hello, ${this.name}!`);
   }
 };
 person.greet(); // Hello, Alice!
 
 // 객체의 메서드를 호출 메서드의 this.name은 호출한 객체의 name의 값

 

함수 내부

• this 키워드
  • this는 현재 실행 중인 함수 또는 메서드의 소유자를 가리키는 키워드
  • 함수 호출 방식에 따라 this의 바인딩이 달라짐

// 함수를 독립적으로 호출하면 this는 전역 객체(브라우저에서는 window, Node.js에서는 global)를 가리킴
// 메서드로 호출하면 this는 메서드를 호출한 객체를 가리킴
function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const person = {
  name: 'Alice',
  sayHello
};

person.sayHello(); // Hello, Alice!
sayHello(); // Hello, undefined!

// 화살표 함수의 바인딩
// 화살표 함수의 this는 lexical this로, 함수를 정의할 때의 this를 가리킴
// 따라서 화살표 함수 내부의 this는 전역 객체를 가리킨다
const person = {
  name: 'Alice',
  sayHello: () => {
    console.log(`Hello, ${this.name}!`);
  }
};

person.sayHello(); // Hello, undefined!

// 생성자 함수
// 생성자 함수 내부의 this는 새로 생성된 객체를 가리킴
// new 연산자로 생성자 함수를 호출하면 this가 새로운 객체로 바인딩
function Person(name) {
  this.name = name;
}

const alice = new Person('Alice');
console.log(alice.name); // Alice

• return 문
  • return 문은 함수 실행을 종료하고 값을 반환
  • return 문이 없는 함수는 undefined를 반환

function getSquare(x) {
   return x * x;
 }

 const result = getSquare(5);
 console.log(result); // 25

 

함수의 종류

• 일반 함수
  • 앞서 설명한 함수 선언문, 함수 표현식, 화살표 함수
• 메서드
  • 객체의 프로퍼티로 정의된 함수를 메서드
  • 메서드 내부의 `this`는 메서드를 호출한 객체를 가리킴
• 생성자 함수
  • new연산자로 호출하여 객체를 생성하는 함수
  • 생성자 함수 내부의 this는 새로 생성된 객체를 가리킴
• 콜백 함수
  • 다른 함수에 인수로 전달되는 함수를 콜백 함수
  • 비동기 함수 호출, 이벤트 핸들러 등에서 콜백 함수를 사용

 function greet(callback, name) {
   callback(`Hello, ${name}!`);
 }

 greet(console.log, 'Alice'); // Hello, Alice!

 

 

• rest 파라미터
  • 함수에 전달되는 인수들을 배열로 모아서 받을 수 있게 해주는 문법
  • 매개변수 이름 앞에 ...을 사용

// numbers 매개변수는 함수에 전달된 모든 인수들을 배열로 받고,
// reduce() 메서드를 사용하여 배열의 모든 요소를 합산
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7, 8)); // 30

// greeting은 일반 매개변수, names는 REST 파라미터
// REST 파라미터는 항상 마지막 매개변수여야 한다.
// 함수 호출 시 REST 파라미터에는 0개 이상의 인수가 전달될 수 있음
function greet(greeting, ...names) {
  return `${greeting}, ${names.join(', ')}!`;
}

console.log(greet('Hello', 'Alice', 'Bob', 'Charlie')); // Hello, Alice, Bob, Charlie!
console.log(greet('Welcome')); // Welcome!

---

함수는 종류도 많고 어려운 개념도 많이 나오는 부분이라 어렵긴 하지만 나중에 정리할 스코프나 클로저의 개념 같은 것과 함께 알고 사용한다면 분명 코드 공부에 많은 도움이 될것 같아 작성해 보았습니다!