자바스크립트 기초 함수

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

 + 여기저기

Part 2 - Chapter 1. 함수 기초

 

Lesson 1. 함수

함수 소개

특정 기능을 하는 구문을 독립된 부품으로 만들어 재사용하고자 할 때 사용하는 문법.

함수를 사용하므로써 코드의 중복을 줄이고 재사용성이 높아진다. 유지보수에도 용이하다.

p. 263 함수 사용 전, 사용 후 p. 311

 

함수의 구조 세가지

1. 일반적인 함수 function 함수명(){ 실행구문; }

2. 매개변수가 있는 함수 function 함수명(매개변수...){ 실행구문; }

3. 리턴값이 있는 함수 function 함수명([매개변수...]){ 실행구문; return 리턴값; }

 

Lesson 2. 함수 만들기 p. 268 p. 317

1. 함수로 포장할 내용 (냄새나는 중복코드 또는 로직) 찾기.

2. 빈 함수 만들기.

3. 중복코드를 빈 함수에 넣어 포장하기.

3-1. 중복코드에서 변경되지 않는 부분과 변경되는 부분 파악하기.

3-2. 변경되는 부분은 매개변수로 만들기.

4. 함수 호출. 함수명();

 

Lesson 3. 지역변수 vs 전역변수

지역변수와 전역변수 구분

만드는 방법은 동일하지만 만드는 영역이 다르다. 전역변수는 영역에 상관없이 사용 가능.

지역변수는 만들어진 영역 내에서만 사용 가능.

 

변수 생명주기

생명주기 : 만들어지고 없어지기까지의 기간

전역변수의 생명주기는 자바스크립트가 실행되는 페이지가 브라우저에서 실행되고 있는 한 사라지지않고 계속 남아있기 때문에 어디서든 사용 가능.

지역변수 : 함수 내부에 있는 지역변수는 함수 호출 이후 var가 해석이 되면서 만들어져서, 함수가 종료되는 시점에 완전히 사라지게 되므로 변수가 만들어진 지역에서만 사용 가능.

 

Lesson 4. 매개변수

함수 외부에서 함수 내부로 데이터를 전달할 때 매개체 역할을 하는 지역변수.

함수 호출시 데이터를 넣어 호출해 준다. P. 283

 

argument

p. 285 예제 : 함수 호출 시 매개변수값을 넘겼지만 정작 함수에는 매개변수가 선언되어 있지 않은 상태.

지역변수와 매개변수 중에서 해당 데이터를 찾고 없으면 전역변수에서 찾아서 사용. 전역에도 없으면 에러 발생.

 

매개변수를 선언하지 않고 매개변수값에 접근하기 위해서 자바스크립트 함수는 argument라는 객체를 기본으로 제공. 여기에는 모든 매개변수 값이 들어 있다.

배열은 아니지만 배열처럼 사용하면 되고, 매개변수의 개수는 length 프로퍼티를 이용하여 확인 가능.

p. 286 예제 참고

 

Lesson 5. 리턴값이 있는 함수

매개변수와 반대되는 개념으로 함수 내부에서 처리된 값을 외부로 전달하기 위한 출력값.

리턴값이 있더라도 항상 변수로 받을 필요는 없다.

리턴문의 또 다른 용도로는 함수를 즉시 빠져나오는 기능도 가능.

break문과 비슷해 보이지만 브레이크문이 루프만을 빠져나오는 것에 비해 리턴문은 함수 자체를 탈출한다.

 

Lesson 6. 함수 이름 만들 때 주의사항

변수와 동일~

 

Chapter 2. 함수 기능

Lesson 02. 함수 기능 1: 중복코드 제거, 코드 재사용 p.315

챕터1 레슨2에서 함수만들면서 중복코드를 제거하는 것 이미 확인.

 

Lesson 03. 함수 기능 2: 코드 그룹화 p. 320

연관 있는 코드는 따로 모아서 함수로 그룹화.

함수는 한 가지 기능만 하도록 만드는 것이 좋다 :

단일 책임 원칙 – 각각의 함수, 클래스 및 컴포넌트는 한 가지의 기능만 수행하도록 개발하는 것.

: 함수나 클래스가 두 가지 이상의 기능을 가지고 있다면 로직을 파악하는데 오래 걸린다(가독성 하락)

: 기능에 문제가 발생해서 해당 함수를 수정할 일이 생긴다면 한 가지 기능만 하기 때문에 유지보수가 쉬움

: 두 가지 이상의 기능을 수행할 경우 상대적으로 버그 발생 확률이 높다. (유지보수 어려움)

 

p. 322 예제를 보면 ready() 함수 안에 모든 기능이 구현되어 있다. 3가지 기능이 들어 있는데 이를 기능별로 나눔.

 

Chapter 3. 함수 중급

레슨 1. 변수와 함수의 관계

변수에 함수 저장하기 : var 변수명 = 함수명 p. 345

 

레슨 2. 매개변수에 함수 넣기

변수에 함수를 저장하는게 가능하듯 매개변수값에 함수를 넣는 것도 가능.

function hello() {

console.log(‘hello!’);

}

 

function execute(fn) {

fn();

}

 

execute(hello); // 실행결과 : hello!

 

위처럼 매개변수에 함수를 넣는 경우는 이벤트 등록할 때 많이 쓰임

$(‘#idid’).click(hello);

 

 

 

 

 

 

 

리턴값으로 함수도 사용가능

함수는 어떤 데이터든 리턴이 가능. p. 347 예제 05

function createHello(){

function hello(user) {

console.log(user+’님 환영합니다‘);

}

return hello;

}

 

var result = createHello(); // result에 리턴값 hello 가 저장됨

result(‘손’); // == hello(‘손’);

 

레슨 02. 함수 리터럴과 익명 함수

익명 함수 : 이름이 없는 함수. function(){}

 

리터럴이란? p. 348

데이터를 만드는 방법은 크게 리터럴 방식과 객체 방식 두 가지가 있음. 리터럴이란 원시라는 뜻을 가지고 있음.

리터럴 방식 var age = 10;

객체 방식 var age = new Number(10);

리터럴 방식으로 코드를 작성하면 자바스크립트 실행시 js엔진에 의해 객체방식으로 자동 변환됨. 일종의 암시적 형변환이 이루어지는 것.

 

그렇다면 함수 리터럴이란? p. 349

리터럴 방식 var hello = function(name) { alert(name+’님 환영합니다.‘) }

일반적인 방식 function hello(name) { alert(name+’님 환영합니다.‘) }

객체 방식 var hello = new Function(“name“, “alert(name+’님 환영합니다.‘)“);

 

여기서 리터럴방식 함수를 익명함수라고 부름. (우변만 보았을 때 함수이름이 없음)

익명함수를 활용하면 코드가 조금 더 간결해짐... p. 350 예제 02 참고

 

이름이 없는 익명함수를 쓰기 위해서 변수에 담아주는 것. 함수 표현식.

 

익명함수 vs 일반함수

상황에 맞게 함수를 만들고, 함수를 재사용하지 않을 경우에는 주로 익명함수를 활용한다.

 

함수 정의방법

표현식, 선언식은 앞에서 설명. 객체 방식은 거의 사용되지 않는다.

익명 함수 확장 : P. 356 함수 또는 제이쿼리 플러그인 간의 충돌을 방지하기 위해 사용. 2권에서 다룸.

 

레슨 4. 함수 종류

- 일반 함수 : 함수.

 

- 멤버함수(메서드) : 클래스 내부에 만들어진 함수.

 

- 중첩 함수 : 함수 안에 함수가 있는 경우. 안에 있는 함수를 중첩 함수라 한다.

지역변수와 마찬가지로 함수 내부에서만 사용 가능. 함수 내부에서만 사용할 기능을 중첩함수로 만들어 사용.

 

- 콜백 함수 : 함수 실행결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 콜백 방식에서, 매개변수로 넘어온 함수를 콜백함수라고 한다.

주로 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용. 리턴문과 비슷한 기능을 한다...

function greeting(name){

alert('반갑습니다. ' + name);

}

function processUserInput(callback){ // <- 여기 매개변수로 함수 넣기

var name = prompt('이름을 입력해 주세요.');

callback(name); // 콜백함수 호출

}

processUserInput(greeting); // <- 여기 매개변수로 함수 넣기

 

 

1. 함수 A의 매개변수로 콜백함수를 넘김

2. 함수 A 동작... 로직 실행...

3. 실행결과를 콜백 함수의 매개변수로 넘김

4. 콜백함수 호출

 

로직 구현부분과 처리부분을 나누어 코딩할 수 있게 됨. p. 365

로직구현부분은 동일하고 로직 처리부분이 다양해야 하는 경우 유용하게 사용할 수 있다. p. 369

 

콜백함수를 사용하는 또다른 이유 :

 

우선 동기 vs 비동기

동기 : 함수가 호출된 후 끝날 때까지 다음 구문을 실행하지 않고 대기하고 있는 경우.

비동기 : 함수가 호출된 후 끝날 때까지 기다리지 않고 바로 다음 구문을 실행하는 경우.

 

DB작업이나 데이터 입출력 등 시간이 걸리는 작업을 순차적으로 진행해야 하는데, 해당 작업이 비동기로 구현되어있다면 각 기능이 끝나는 시점에 따라 순서가 뒤바뀔 수 있다. 이 때 콜백함수를 사용하면,

첫 번째 작업이 완료되었을 때 호출될 콜백함수를 같이 주고, 해당 작업이 끝나 콜백함수가 호출되었을 때 그 콜백함수 안에서 두 번째 작업을 시작하게 하면 비동기 작업들을 순차적으로 실행할 수 있게 된다.

 

- 클로저 함수 : 함수 종료시 지역변수가 자동으로 사라지지만 그렇지 않고 남는 경우를 클로저라 하며, 이 현상을 일으키는 함수를 클로저 함수하고 함.

정해진 문법은 없고 일종의 현상으로 보면 된다.

 

접근하려고 하는 함수의 생명주기는 종료되었으나, 내부함수가 참조하고 있는 상태이기 때문에 접근이 가능하다.

p. 377 예제 02 참조

createCounter() 는 종료되었지만 지역변수 count는 사라지지 않고 있다.

var counter에 createCounter()의 리턴값인 addCounter가 담겨져 있고,

counter를 호출했을 때, addCounter()가 지역변수인 count를 사용하고 있는 상태에서 리턴되어 클로저 현상 발생.