script 기초② - 함수
✔️ 함수 기본값
매개변수에 값을 전달하지 않으면 그 값은 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 ]
다음 챕터에서..
📚 출처 https://ko.javascript.info/
https://poiemaweb.com/es6-arrow-function
Author And Source
이 문제에 관하여(script 기초② - 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gadongkim/Javascript02-quiaqi0m저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)