Javascript 함수(선언식, 표현식, 화살표 함수)

목차

1. 함수

2. 함수 선언식

3. 함수 표현식

4. 화살표 함수

5. 콜백 함수

6. 함수의 기능   6.1. 일반 함수   6.2. 생성자 함수   6.3. 객체 메서드

 

 

1. 함수(function)

 

 

스크립트에 코드를 작성하여도 동작은 가능하나 한 번만 실행되고 다시 사용이 불가능하다.

 

다시 사용하고 싶은 동작(코드)이 있을 때,

 

함수로 선언하고 사용한다면 함수를 호출하는 것만으로도 언제 든지 재사용이 가능하다.

(실행시키고 싶은 코드를 모아 놓는다.)

 

 

자바스크립트에서는 3가지 방법으로 함수를 선언할 수 있다.

 

각 방법마다 조금씩 기능의 차이가 있으니 이에 유의하자.

 

 

2. 함수 선언식(function declaration)

 

 

function 키워드를 이용해서 함수를 선언할 수 있다.

 

function을 이용해 선언하면 선언한 코드위에서도 호출이 가능하다.

(이를 호이스팅이라한다)

 

문법(Syntax)

function 함수명 (매개변수, 매개변수, ...) {
        실행할 코드
        return (함수 호출시 남는 값)
}

 

예시(Sample)

function sum(x, y) {
    let result = x + y
    return result
}

sum(10, 20) // 30

console.log(sum(10, 20)) // 콘솔창에 30이 찍힌다.

 

함수명 뒤의 소괄호 안에 들어가는 부분을 매개변수라한다.

 

함수 내에서 매개변수를 이용하여 다양한 조작이 가능하다.

 

함수안에서는 반드시 return이 존재하며, return을 생략하면 return 값은 undefined가 된다.

 

return은 함수를 호출하고 난뒤에 남는 값이다.

 

따라서, return 값을 사용하려면 호출한뒤에 조작을 가하여야한다.

 

위의 예시에서는 sum(10, 20)으로 인해 return값이 30 이다.

 

 

지역변수

 

함수내(코드블럭 안)에서 선언한 변수는 함수 블럭 바깥에서는 사용할 수가 없다.

 

이를 지역변수라한다.

 

이에따라 다른 블럭내에서 같은 이름으로 변수 선언이 가능하다.

 

지역 변수

 

 

외부변수와 전역변수

 

함수 블럭 밖에서는 블럭 안쪽의 변수를 사용할 수 없지만, 안쪽에서는 바깥 쪽 변수에 접근이 가능하다.

 

이러한 접근에는 외부변수와 전역변수가 있다.

 

스크립트에 선언된 변수를 전역변수라고 하며, 어느 블럭 안에서든 접근이 가능하다. 

 

(전역에 변수를 선언해놓는 것보다 함수내부에서만 변수를 선언하는 것이 조금 더 바람직하다)

 

외부변수

 

전역변수

 

 

3. 함수 표현식(function expression)

 

 

다음은 함수 표현식이다.

 

기능은 함수와 다를바 없으나, 표현식으로 함수를 생성하면 선언식과는 다르게 선언부분 위에서 호출이 불가능하다.

 

또한, 대입연산자 오른쪽에 함수가 존재하여, 함수도 값이라는것을 알 수 있다.

 

함수를 호출하여 가져올때와, 함수 그 자체로 가져오는 것을 잘 구분해야한다.

 

문법(Syntax)

const 함수명 = function ( 매개변수, ... ) {
        실행할 코드
        return (함수 호출시 남는 값)
}

 

예시(Sample)

let sum = function (x, y, z) {
    let result = x + y + z
    return result
}

console.log(sum) // fucntion 함수 자체가 값이므로 대입 연산자 기준 오른쪽 모두를 가져온다.
console.log(sum()) // 함수가 실행되고 남은 return 값을 가져온다.

 

 

4. 화살표 함수(arrow function)

 

 

함수 표현식에서 좀 더 간편하게 줄여서 쓸 수 있도록 만든 화살표 함수다.

 

함수 표현식에서 function 키워드를 빼고, 화살표로 바꾸었으며 매개변수가 하나이거나,

 

실행부분 없이 리턴 값만 있는 경우 다양하게 생략이 가능하다.

 

다양한 기능이 있는 function 키워드와 달리, 오로지 함수로써의 역할을 위해서 사용한다.

 

 

문법(Syntax)

 

이전과는 달리 조건에 따라 다양하게 생략이 가능하다.

const 함수명 = ( 매개변수, ... ) => { 실행할 부분  return }
const 함수명 = 매개변수 => { 실행할 부분 return }
const 함수명 = 매개변수 => return값

 

예시(Sample)

let sum = (x, y, z) => {
    let result = x + y + z
    return result
}

//================================

let sum = (x, y, z) => x + y + z;

 

 

5. 콜백 함수(callback function)

 

 

함수를 다른 함수의 인수로 전달하여, 전달한 그 함수를 나중에 호출하는 것을 콜백함수라고 한다.

 

아래의 코드는 이름의 길이가 적당할 경우에 콜백을 실행시켜주는 코드이다.

 

일반적으로 call 안에서 정의된 변수 user에 접근할 수 없지만, 콜백(callback)함수를 이용하면 쉽게 접근할 수 있다.

 

예시(Sample)

function call(name, callback) {
    let user = name
    if (user.length <= 8) {
        callback(user)
    } else {
        console.log("이름이 너무 깁니다.")
    }
}

function sayHello(name) {
    console.log(`Hello ${name}`)
}

call("char1ey", sayHello) // "Hello char1ey"

 

 

 

6. 함수(function 키워드)의 기능

 

 

function 키워드로 사용할 수 있는 여러가지 기능이 있다.

 

1. 일반 함수
2. 생성자 함수
3. 객체 메서드

function 키워드에는 위와 같이 여러기능이 있다보니, 코드를 읽고 해석하는 데에 번거로움이 있었다.

 

위의 기능들은 각각

 

1. 일반 함수 : 화살표 함수
2. 생성자 함수 : class 문법
3. 객체 메서드 : 메서드 축약형

ES6 버전부터 각각의 기능을 구분하여 사용할 수 있도록 되었다.

 

기존의 function은 호이스팅 문제, 다양한 역할을 한 키워드로 가능해 원치않는 에러가 생기는 등의 문제가 있었다.

 

무엇보다 코드을 읽을 때 직관적이지가 않아 불편함이 있어, 기능을 대체할 수 있도록 된 것이다.

 

 

6.1 일반 함수

 

일반 함수로서의 기능의 위의 함수 선언식에서 다루었다.

 

위에서 말했듯이 일반 함수는 화살표 함수(Arrow Function)로 이용을 할 수 있도록 되었다.

 

 

6.2 생성자 함수

 

function으로 생성자 함수를 사용할 수 있고, 별 다른 문제도 없지만 function을 사용하기 보다

 

function 키워드의 문제점 때문에 class를 사용하여 객체를 생성하도록 하는것이 바람직해 보인다.

 

 

예시_1(Sample)

 

function을 이용한 생성자는 다음과 같이 선언이 가능했다.

 

function Foo(a, b) {
    this.arr = [a,b]
}

Foo.prototype.getArr = function() { // true
    return this.arr
}
                
const foo = new Foo(1,2)

 

예시_2(Sample)

 

class 문법을 이용해서 객체를 생성하는 방법이다.

 

class Foo {
	constructor(a, b){
        this.arr = [a,b]
	}
	
	getArr(){
        return this.arr
    }
}

const a = new Foo()

 

 

6.3 객체 메서드

 

객체 내에서 선언하는 함수는 메서드로 사용이 가능했다.

 

이 또한 function 키워드의 문제점으로 인해 메서드 축약형이라는 방법으로 대체되었다.

 

 

예시_1(Sample)

 

아래 예제 코드에서는 객체의 키와 값으로 메서드를 선언했다.

 

 

let bar = {
    method:function (a,b) {
    	return [a,b]
    }
}
bar.method(5,6) // [5,6]

 

예시_2(Sample)

아래는 메서드 축약형의 방법이다.

 

let bar = {
    name:'web7722',
    method(a,b){
        return [a,b]
    }
}

bar.method(1,2) // [1,2]