함수란?

함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다.
유사한 작업을 반복적으로 사용할떄 유용하죠

함수선언문 vs 함수표현식

함수 선언(function declaration) 은 아래와 같은 형태를 취합니다

function hello() {
  console.log( '안녕하세요!' );
}

자바스크립트에서의 함수는 이기 때문에 변수에다 할당할수 있습니다.

let hello = function() {
  console.log( '안녕하세요!' );
}

변수에다 할당하게 되면 그게 함수 표현식(Function Expressions)이죠

둘은 뭐가 다를까?🤔

첫번째로는 호이스팅의 차이 입니다.

hello();
function hello() {
  console.log('안녕하세요');       //성공적으로 출력
}

함수가 먼저 선언이 되어도
자바스크립트 엔진에서는 호이스팅을 통해 가장 위로 끌어 올립니다.
하지만 함수표현식은 에러가 발생합니다.😥

hello();
const hello = function(){
  console.log('안녕하세요');      //에러발생
}

화살표 함수

ES6 이후 문법에서는 함수 표현식을 좀더 간편하게 사용할수 있게되었는데
바로 화살표 함수 (arrow function) 입니다.

let sum = function(){}
위와같은 함수 표현식은 아래와 같이 표기할수 있습니다.
let sum = () => {}

본문 내용이 한줄이라면 아래와같이 중괄호를 생략할수 있습니다.
let sum = (a, b) => a + b;
하지만 본문내용에 중괄호를 사용한다면 리턴값을 넣어야합니다.

let sum = (a, b) => { // 중괄호
  let result = a + b;
  return result;      // return
};

즉시실행함수 (Immediately-Invoked Function Expression)

함수를 한번 정의하고 한번만 실행할때는 함수 이름을 정의하고 호출할 필요가 없습니다.
그자리에서 익명함수를 생성하고 실행하면 되기 때문이죠

(function (){
  console.log('안녕');     // 안녕
})()

즉시실행 함수를 쓰고 싶을때는 function(){} 구조에서 ()() 괄호 두개를 생성하고
앞에 괄호 안에 넣어주면 됩니다. (이곳)() 그러면 위와 동일한 형태가 되죠

(function (){
  console.log('안녕');     // 안녕
}());

마찬가지로 function(){} 구조에서 (()) 괄호 안에 괄호를 만들고
(이곳()) 앞부분에 넣어주면 즉시실행 함수가 됩니다.

중복된 객체

우리는 객체 리터럴을 통해 여러가지 객체를 만들수 있습니다.

const gildong = {
  firstName: 'Gildong',
  lastName: 'Hong',
  getFullName: function () {
    return `${gildong.firstName}${gildong.lastName}`
  }
}
console.log(gildong.getFullName());
const elon = {
  firstName: 'Elon',
  lastName: 'Musk',
  getFullName: function () {
    return `${elon.firstName}${elon.lastName}`
  }
}
console.log(elon.getFullName());

이때 또다른 사람의 객체를 만드려면 한번더 반복 해야합니다. 중복된 코드가 있음에도 말이죠😥
이럴때 사용할수 있는 함수가 생성자 함수입니다.

생성자 함수

생성자 함수는 일반함수와 기술적인 차이점이 없습니다.
다만 이것이 생성자 함수라는것을 알기위해 다음과 같이 약속합니다.

  • 함수의 첫번째 글자는 대문자로 한다.
  • 'new' 연산자를 붙여 실행합니다.

위에 코드를 아래와 같이 나타낼수 있습니다.

function User(first,last){
  this.firstName = first,
  this.lastName  = last
}
User.prototype.getFullName = function (){
  return `${this.firstName}${this.lastName}`
}
const elon = new User('Elon','Musk')
const gildong= new User('Gildong','hong')

console.log(elon.getFullName());
console.log(gildong.getFullName());

클래스

생성자 함수에서 더 진보된 것이 클래스 입니다.

class User {
  constructor() {}      // 기본구조
}
User.prototype.getFullName = function (){
  return `${this.firstName}${this.lastName}`
}

위에 썼던 프로토타입 부분을 내부에 정의합니다.

class User {
  constructor(first,last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
  return  `${this.firstName}${this.lastName}`}
}

그럼 생성자 함수보다 더 간편하게 정의되었습니다.
이외에도 클래스를 사용하면 상속과 같은 기능을 이용할수 있습니다.

profile
배우면 바뀐다

0개의 댓글

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN