Javascript 기초② - 함수

김가현·2021년 7월 7일

Javascript

목록 보기

2/7

✔️ 함수 기본값

매개변수에 값을 전달하지 않으면 그 값은 undefined가 된다.

function showMessage(from, text) {
  alert(from + ':' + text);
}
  
showMessage("Ann"); // "Ann:undefined" 출력

매개변수에 값을 전달하지 않더라도 그 값이 undefined가 되지 않게 하려면 '기본값(default value)'를 설정해주면 된다.

function showMessage(from, text="no text given") {
  alert(from + ':' + text);
}
  
showMessage("Ann"); // "Ann:no text given" 출력

//복잡한 표현식도 기본값으로 설정할 수도 있다.
function showMessage(from, text= anotherFunction()) {
	//anotherFunction()은 text값이 없을 때만 호출됨
    //anotherFunction()의 반환 값이 text의 값이 됨
}

함수 선언부에서 기본값을 설정하는 것 대신, 함수가 실행되는 도중에 기본값을 설정하는게 논리에 맞는 경우가 생긴다. 이럴 때엔 매개변수를 undefined과 비교하여 함수 호출시 매개변수가 생략되었는지를 확인한다.

//1
function showMessage(text) {
	if(text === undefined) {
      text = '빈 문자열';
    }
  	...
}
//2
function showMessage(text) {
	text = text || '빈 문자열';
  	...
}

✔️ 함수 표현식

자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 다른 언어에서처럼 '특별한 동작을 하는 구조'로 취급되지 않는다.

함수 기본값에서 활용했던 방식은 함수 선언문(Function Declaration) 방식이다. 이 외 함수 표현식(Function Expression)을 사용해서 함수를 만들 수 있다.

//함수를 만들고 그 함수를 변수 sayHi에 할당하기
let sayHi = function() {
  alert("hello");
};

alert(sayHi); //함수 코드가 보임

🙋🏻‍♀️ 세미콜론

함수 선언문에는 세미콜론이 없으나 함수 표현식의 끝에는 세미콜론이 필요하다.

if {...}, for { }, function f { } 같이 중괄호로 만든 코드 블록 끝엔 ; 이 없어도 된다. 함수 표현식은 코드 블록이 아니라 값처럼 취급되어 변수에 할당되기 때문에, 즉 구문의 끝이기 때문에 세미콜론이 붙는다.

👉 익명 함수

아래의 코드에서 ask(...) 안에 함수가 이름없이 선언되었다. 이렇게 이름없이 선언한 함수는 익명함수(anonymouse function)라고 부른다. 익명함수는 변수에 할당된 게 아니기 때문에 ask 바깥에선 접근할 수 없다.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

👉 콜백함수

위에 ask의 인자로 쓰인 익명함수들은 콜백 함수이다.
콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다.
이 함수를 매개변수로 일단 넘겨 받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

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

함수 선언 방식은 함수가 독립된 구문의 형태로 존재한다.

스크립트는 함수 선언문이 모두 처리된 이후에야 실행되기 때문에, 스크립트 어디서든 함수 선언문으로 선언한 함수에 접근할 수 있다.

다만 엄격모드에서 함수 선언문이 코드 블록 내에 위치할 경우, 블록 내에서만 어디서든 접근 가능하고 블록 밖에서는 접근 불가하다.

함수 표현식 방식은 함수가 표현식의 일부로 존재한다.

함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.

✔️ 메서드와 this

👉🏻 메서드

여기 user라는 객체가 있다.

let user = {
  name : "john",
  age : 30
};

이 때 객체 프로퍼티에 함수를 할당할 수 있고, 이를 메서드(method)라고 한다.

user.sayHi = function() {
  alert("안녕하세요~");
};

user.sayHi(); //안녕하세요~

sayHi는 객체 user에 할당된 메서드이다.
(함수를 미리 선언하고, 후에 메서드로 등록할 수도 있다)

객체 리터럴 안에 메서드를 선언할 때 단축 구문을 사용할 수 있다.

user = {
	sayHi() {
    	alert("hello");
    }
};

👉🏻 this

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있다. 대부분의 메서드가 객체 프로퍼티의 값을 활용한다.
메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.
this 값은 런타임에 결정되어 컨텍스트에 따라 달라진다.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함

즉, obj.f()를 호출했다면 this는 f를 호출하는 동안의 obj를 뜻한다.

자바스크립트에서 this는 메서드가 어디서 정의되었는지에 상관없이, '점 앞의' 객체가 무엇인가에 따라 자유롭게 결정된다.

👉🏻 화살표 함수는 this가 없다.

화살표 함수 본문에서 this에 접근하면, 외부에서 값을 가져온다.

~~다음 챕터에서..~~

✔️ 화살표 함수

화살표 함수를 활용하면 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다.

//함수 표현식 예시
let func = function(arg1, arg2, ...argN) {
  return expression;
};

//위의 표현식을 화살표 함수로 축약하면 다음과 같다.
let func = (arg1, arg2, ...argN) => expression

//함수 본문이 여러줄일 경우, 중괄호를 사용하고 
//이 경우에는 반드시 return 지시자를 사용해 반환값을 명기해야 한다.

//인수가 하나밖에 없을 경우, 인수를 감싸는 괄호를 생략할 수 있다.
let double = n => n*2;

alert( double(3) ); // 6

함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다.

아래 예시에서 화살표 함수는 함수 표현식처럼 함수를 동적으로 만들 수 있다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

👉🏻 화살표 함수의 기본 문법

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

//콜백함수로 사용한 화살표 함수
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]