[ 자바스크립트+jQuery 완전정복 스터디 1 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=9650891)

PART2 - CH03 함수 중급

lesson01 변수와 함수의 관계

01_변수에 함수를 저장한 경우

// 함수 hello 선언
function hello(name) {
  alert(name + '님 환영합니다.');
}
// 함수 hello 실행
hello('홍길동');

// 변수 func에 함수 hello를 할당
var func = hello;
// 변수 func(=== hello)를 실행
func('고길동');

02_매개변수 값으로 함수 사용하기

// 함수 hello1 선언
function hello1() {
  alert('hello.');
}

// 함수 hello2 선언
function hello2() {
  alert('안녕하세요.');
}

// 함수 execute(매개변수로 값으로 함수를 받을 함수)
function execute(func) {
  func();
}

// execute를 통해 함수 hello1, hello2를 실행
execute(hello1);
execute(hello2);

< 매개변수로 함수를 전달하여 날짜를 출력하는 예제 >

03_리턴 값으로 함수사용하기

함수는 어떤 값(데이터)든 리턴할 수 있습니다. 이는 리턴 값으로 함수를 리턴할 수 있다는 의미이기도 합니다.

lesson02 함수 리터럴과 익명 함수

01_리터럴이란?

데이터를 만드는 방법은 크게 리터럴 방식과 객체 방식 두 가지가 있습니다.
(리터럴은 코드 상에서 데이터를 표현하는 방식을 말합니다.)

리터럴부터 클로저까지 - http://programmingsummaries.tistory.com/92

< 데이터 선언방식에 따른 차이 >

함수표현, 선언 - http://insanehong.kr/post/javascript-function/

02_함수 리터럴이란?

// 리터럴 방식으로 함수 선언(함수 표현식)
var hello1 = function(name) {
  alert(name + '님 안녕하세요');
};
// 일반적인 방식으로 함수 선언(함수 선언식)
function hello2(name) {
  alert(name + '님 안녕하세요');
}

hello1('홍길동');
hello1('고길동');

< 함수 선언 방식에 따른 호이스팅 >

03_익명함수란?

익명함수는 이름을 지정하지 않은 함수를 의미합니다.

< 함수 선언식과 표현식에 따른 호이스팅 >

< 익명 함수의 사용 예 >

lesson03 함수 정의 방법 4가지

// function 키워드의 사용(함수 선언식)
function hello1() {
  alert('안녕1');
}


// 함수 리터럴(함수표현식)의 사용
var hello2 = function() {
  alert('안녕2')
}


// Function 객체를 통한 생성(거의 안씀)
var hello3 = new Function("name", "alert(name)");


// 익명함수 확장을 이용한 정의(jQuery 플러그인 제작 시 자주사용)
(function(name){
  alert(name);
})('안녕');

lesson04 함수 종류

01_함수 분류

사용자 정의 함수 - 사용자가 필요한 기능을 직접 만든 함수를 말함
자바스크립트 코어 함수 - 자바스크립트가 기본적으로 제공하는 함수

02_사용 방법에 다른 함수 종류

함수 종류	내용
일반 함수	가장 일반적으로 사용한 함수를 말합니다.
중첩 함수	함수 안에 함수가 있는 경우 중첩되었다라고하며 이때 함수 안에 있는 함수를 중첩 함수라고 합니다.
콜백 함수	함수 실행결과 값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라하며 이때 매개변수로 넘어온 함수를 콜백 함수라고 합니다.
클로저 함수	일반적인 함수의 경우 함수 호출에 의해 함수 내부의 실행 구문을 모두 실행하게 되면 함수 내부에서 만든 지역변수가 자동으로 사라지지만 어떤 경우에는 사라지지 않고 남는 경우가 있습니다. 이 현상을 클로저라고 하며 이 현상을 일으키는 함수를 클로저 함수라고 합니다.
맴버함수(메서드)	맴버함수는 클래스 내부에 만들어지며 주로 메서드라고 불립니다.

lesson05 중첩 함수

중첩함수는 함수 내부에 만들어지는 함수를 중첩 함수라고 부릅니다.
중첩함수는 아래와 같은 경우 사용 합니다.

02_중첩함수는 이럴 때 사용해요

내부 전용 함수
함수 내부의 지역변수처럼 함수 내부에서만 사용할 수 있는 것으로 일반적으로는 이름 없는 이벤트 리스너에 많이 사용됩니다.

중복 코드 또는 코드의 그룹화
함부 내부의 커다란 기능이나 중복 코드를 내부 함수로 만들어 재사용할 때도 중첩함수를 사용합니다.

03_중첩함수와 중첩 함수를 포함한 함수와의 관계

중첩함수의 가장 큰 특징은 중첩 함수에서는 중첩함수를 포함하고 있는 함수의 지역변수에 접근해서 사용할 수 있다는 것입니다.

< 함수 유효범위에 따른 사용 예 >

위처럼 내부에서는 외부를 참조할 수 있으나 외부에서 내부는 참조할 수 없습니다.

lesson06 콜백 함수

01_콜백 함수란?

콜백함수는 주로 함수 내부의 처리결과 값을 함수 외부로 내보낼 때 사용하며 일종의 return 문과 비슷한 기능을 한다고 볼 수 있습니다.

// 콜백 함수의 예
$('button').on('click', function() {
  // callback function
});

< 콜백 함수의 사용 예 >

03_return VS 콜백 함수

< return을 사용하는 경우 >

function sum(num1, num2) {
  return num1 + num2;
}

var result = sum(10, 20);
alert('두 수의 합은' + result + '입니다.');

< 콜백 함수를 사용하는 경우 >

function sum(num1, num2, callback) {
  var result = num1 + num2;
  
  callback(result);
}
function sumAlert(num) {
  alert(num);
}

sum(10, 20, sumAlert);

04_동기 VS 비동기

동기란?
일반적으로 함수가 호출된 후 끝날 때까지 다음 구문을 실행하지 않고 대기하고 있는 경우를 우리는 동기라고 합니다.
(즉 실행한 함수가 끝나지 않았다면 다음으로 진행하지 않고 기다리는 형태를 말합니다.)

동기란?
동기와 반대 되는 개념으로 일반적으로 함수가 호출된 후 끝날 때 까지 기다리지 않고 바로 다음 구문을 실행하는 경우를 비동기라고 합니다.

< jQuery ajax 사용 예 >

< jQuery animate callback >

< 콜백 지옥의 예 >

lesson07 클로저 함수

01_클로저란?

클로저는 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태를 말합니다.
(함수의 생명주기가 종료되었지만 내부함수가 참조하고 있어 그 함수에 접근할 수 있는 함수라고 설명되기도 합니다.)
< 간단한 클로저의 예1 >

< 간단한 클로저의 예2 >

03_클로저를 사용하면 좋은 점

클로저를 사용하면 연관 있는 변수와 기능(중첩 함수)을 하나의 함수로 묶어 독립적으로 실행시킬 수 있다는 것으로 함수 내부에 데이터가 만들어지기 때문에 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있게 됩니다.
(객체지향 프로그래밍에서는 이를 private 데이터라고 부른다고 함)

자바스크립트 클로저 쉽게 이해하기 - http://chanlee.github.io/2013/12/10/understand-javascript-closure/

번외 - 어휘적 유효범위(lexical scope)

자바스크립트는 Lexical scope 특성을 지닙니다.
Lexical scope란 Scope가 함수 실행시점이 아닌 함수 정의 시점에 정해진다는 의미입니다.

// 전역변수 name을 선언하고 값을 'nero'로 할당
var name = 'nero';

function log() {
  alert(name);
}

function wrapper() {
  // 지역 변수 name를 선언하고 값을 '홍길동'으로 할당
  var name  = '홍길동';
  
  // 함수 log를 실행
  log();
}

// alert으로 무엇이 찍힐까요?
wrapper();

< 확인 1 >

< 확인 2 >

출처 - https://jae-kwang.github.io/blog/2017/11/13/js-closure/

자바스크립트 jquery 완전정복 스터디 1 - PART2 - CH03 함수 중급