[javascript] Function

mook9288·2021년 1월 10일

javascript 기초 정리

목록 보기

8/9

Function - 함수

함수는 무언가를 실행하고 어떤 결과를 값으로써 반환한다.

재사용이 가능한 코드의 묶음으로 한번만 명시하면 몇번이고 실행이 가능하며, 코드의 반복을 줄일 수 있다. 하나의 로직으로 재실행 할 수 있도록 해주며, 코드의 재사용성을 높여준다. 따라서 수정, 변경, 개선 등의 문제 해결 할때 일괄적으로 해결 가능하다.(유지보수 용이, 가독성)

특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 함수는 하나의 데이터 타입으로 함수를 변수에도 할당 가능하고, 일반 객체처럼 값으로 취급된다. 함수를 프로그래밍에서는 1급 함수라고 부른다.
이 말은 함수도 객체라는 것이다.

자바스크립트에서 함수의 return 값이 명시되지 않는다면 기본적으로 undefined가 반환한다.

Parameters vs. Arguments

Parameters

매개변수(parameters)란 말 그대로 변수이다.
함수를 선언할 때 괄호(()) 안의 내용으로 특별한 변수라고 생각하면 된다.
유동적으로 선언해 줄 수 있고, 갯수에 제한이 없다.

Arguments

함수를 호출할 때의 괄호 안의 값을 인자(Argument)라고 부른다.
해당 함수가 호출될 때 들어온 인자(arguments) 정보를 갖고 있는 유사 배열이다.(array-like object)
함수 내부에서 지역변수처럼 사용할 수 있는 arguments 객체를 참조하며, 함수 외부에서 사용 불가하다.(지역변수처럼 사용)
함수 호출 시 함수 정의에 따라 인수를 전달하지 않아도 에러가 발생하지 않는다.

매개변수와 인자의 관계

매개변수(parameter)는 인수(argument)로 초기화되며, 매개변수의 갯수보다 인수를 적게 전달했을 때 인수가 전달되지 않은 매개변수는 undefined로 초기화한다.

function funcA(firstArg) {
  return firstArg;
}
funcA("one", "two", "three"); // one

매개변수(parameter)의 갯수보다 인수(argument)를 더 많이 전달한 경우, 초과된 인수는 무시한다.

Declaration vs. Expression

Function(함수)는 크게 두 가지 방법(함수선언식과 함수표현식)으로 선언하여 만들 수 있다.

함수선언식 (Function Declaration)

// 함수선언식 Function Declaration
function funcA() {
  return 'funcA';
}

함수표현식 (Function Expression)

변수 funcC를 선언하고 변수 funcC에 익명함수를 할당한다.

// 기명 함수표현식 named Function Expression
var funcB = function b() {
  return 'funcB';
}

//(익명) 함수표현식 (unnamed / annonymous) Function Expression
var funcC = function() {
  return 'funcC';
}

~~예전에는 함수명이 없을 경우 네임프로퍼티가 비어있었지만 요즘은 함수명이 비어있어도 자동으로 변수명을 네임프로퍼티에 할당해준다.~~

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

함수선언식과 함수표현식의 할당 여부에 따라 차이가 있다. 할당을 하지 않으면 전체가 호이스팅의 대상이 되고, 할당이 되면 함수는 그 자리에 남아있고 변수만 호이스팅의 대상이 된다. 즉, 호이스팅의 여부에 따라 차이가 발생하게 된다.

함수표현식은 안전하고 예측가능한 코드가 되기 때문에 더글라스 크록포드(Douglas Crockford)는 함수선언식 대신 함수표현식을 권하고 있다.

함수표현식은 실행문의 위치와 함수를 대입하는 구문의 위치가 중요하다.
함수선언식과 달리 선언과 호출의 순서에 따라 함수가 실행되지 않을 수 있기 때문이다.

함수선언식으로 사용할 때, 같은 함수명을 가진 함수가 여러개가 있고 서로 다른 기능을 하는 경우가 있다고 가정해보자.
함수선언식으로 선언된 함수는 호이스팅에 의해 맨위로 끌어올려지게 되고, 나중에 선언된 함수가 이전 함수를 덮어쓰게 될 것이다. 그 결과 원하는 방향과 다른 결과를 초래할 수 있다.

함수선언식이 꼭 필요한 경우는 즉시실행함수나 콜백함수에 대입하는 익명함수 선언이 있다.

Arrow Function - 화살표 함수

기존의 function 키워드를 사용하지 않아도 함수를 선언할 수 있다.

// 매개변수가 없는 경우
var funcA = () => console.log('a');
funcA(); // a

// 매개변수가 하나인 경우
var funcB = a => a;
funcB('b'); // b

// 매개변수가 여려개인 경우
var funcC = (a, b) => a + b; // "{}" 없이 간단하게 한줄로 표현 가능
var funcD = (a, b) => {
	var c = '두 수의 합은?';
	return c + (a + b);
}
funcC(1, 2); // 3
funcD(1, 2); // 두 수의 합은?3

위와 같이 함수를 생성할 수 있으며, 화살표 함수는 함수표현식(Function Expression)으로 생성해야 한다.

어떤 것에 값을 할당해 주는 방법으로 사용해야 하며, 함수 선언식으로는 사용할 수 없다.

화살표함수의 특징

매개변수가 없는 경우, 빈 괄호 사용한다.
매개변수가 하나일 경우, 괄호(())는 생략 가능하다.
함수의 본문 내용이 하나의 실행문일 경우, 중괄호({})를 생략하고 한 줄에 표기할 수 있다. 이때, 실행문의 결과가 함수의 반환값이 된다.
화살표 함수는 this, arguments 값을 갖고 있지 않는다.(존재하지 않음) 스코프체인을 통해 찾는다. 찾지 못한다면, 에러가 발생한다.

Constructor Function - 생성자 함수

new 키워드와 함께 어떤 함수를 실행하는 함수를 생성자 함수라고 부른다.
생성자 함수의 함수명은 "명사"로 짓고, 함수명의 첫 글자를 대문자로 표기하는게 규칙이다.

function Person (name, age) {
  this.name = name;
  this.age = age;
}

const mook = new Person("mook", 30);

console.log(mook); // Person {name: "mook", age: 30}

Person 생성자 함수 내에서 this는 Person의 instance가 되고 mook객체에 {name: "mook", age: 30}이 담기게 된다.

자바스크립트에서는 내장된 함수가 존해하는데 Object, Array, Function와 같은 것들이 내장된 생성자 함수이다.
~~내장 함수나 내장 프로토타입을 수정하여 사용하는 것은 주의해야한다.~~

const obj = new Object();
const arr = new Array();
const func = new Function();

인스턴스 - Instance

일반 함수와 달리 생성자 함수의 기본 반환값은 this를 반환하고, 일반적으로 반환값을 명시하지 않는다.
(생성자 함수의 return 값이 명시되지 않았더라도 자동으로 this를 반환)
생성자 함수의 this는 새로운 빈 객체를 가르키고, 그 빈 객체를 흔히 Instance(인스턴스)라고 한다.
정리하면, 함수를 생성자 함수로 실행하게 되면, 인스턴스 객체가 생성된다.

인스턴스는 본인을 만든 생성자 함수의 프로토타입 객체의 속성 및 메소드에 접근이 가능하다.

Return Value

함수의 결과값은 return 구문을 이용하여 결정할 수 있다.
자바스크립트의 모든 함수는 실행 후 결과값을 반환한다.
하나의 함수가 한번 실행되었다면 한 개의 결과값을 반환한다.
함수에 return 구문이 없거나 실행되지 않을 경우, undefined가 반환된다.(생략이 가능, 생략시 undefined 반환)
return에 도달하면 이후 코드는 무시하고 즉시 함수 실행을 종료하고 반환한다.

1급 함수, 1급 객체

함수는 일급 객체로 그 자체가 하나의 값으로 취급될 수 있다. 따라서 다른 함수에 의해 반환(return)될 수도 있다.

var a = function() {
  var b = function() {
    return 1;
  }
  return b;
};

var c = a(); // a의 실행결과로 b함수가 c에 담긴다.
var d = c(); // c의 실행 결과로 1이 d에 담긴다.

console.log(d); // 1