함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다.
유사한 작업을 반복적으로 사용할떄 유용하죠
함수 선언(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
};
함수를 한번 정의하고 한번만 실행할때는 함수 이름을 정의하고 호출할 필요가 없습니다.
그자리에서 익명함수를 생성하고 실행하면 되기 때문이죠
(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());
이때 또다른 사람의 객체를 만드려면 한번더 반복 해야합니다. 중복된 코드가 있음에도 말이죠😥
이럴때 사용할수 있는 함수가 생성자 함수입니다.
생성자 함수는 일반함수와 기술적인 차이점이 없습니다.
다만 이것이 생성자 함수라는것을 알기위해 다음과 같이 약속합니다.
위에 코드를 아래와 같이 나타낼수 있습니다.
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}`}
}
그럼 생성자 함수보다 더 간편하게 정의되었습니다.
이외에도 클래스를 사용하면 상속과 같은 기능을 이용할수 있습니다.