script 기초② - 함수

22889 단어 JavaScriptJavaScript

✔️ 함수 기본값

매개변수에 값을 전달하지 않으면 그 값은 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()를 호출했다면 thisf를 호출하는 동안의 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 ]

다음 챕터에서..

📚 출처 https://ko.javascript.info/ https://poiemaweb.com/es6-arrow-function

좋은 웹페이지 즐겨찾기