자바스크립트 jquery 완전정복 스터디 1 - AD1 - 초보자를 위한 함수와 클래스

  • SUNGMIN SHIN
  • 9 Minutes
  • 2018년 1월 3일

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

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


APPENDIX 01 - 초보자를 위한 함수와 클래스


Lesson 01 - 초보자를 위한 함수

01_함수란?

함수는 특정 기능을 하는 구문(알고리즘, 로직)을 묶어 재사용하는 문법

함수 없이 일하기(아예 없진 않지만)

함수로 일하기

더 편하게 일하기

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

책 참고

03_함수의 생김새 ~ 06_리턴 값

함수의 선언 및 실행

1
2
3
4
5
6
7
// 함수의 선언(매개변수는 생략해도 무방)
function funcs(arg) {
alert(arg);
}

// 함수의 실행
funcs('안녕!!!');

리턴의 사용

1
2
3
4
5
6
7
8
9
10
// 리턴 값이 존재하는 함수
function funcs(arg) {
return arg * 10;
}

// 값을 반환하지만 저장하지 않았으므로 재사용 불가
console.log(funcs(10));

// 반환된 값이 val에 할당
var val = funcs(10);

리턴할 수 있는 값은 제한이 없음

1
2
3
4
5
6
7
8
9
function funcs() {
return [10, 20, 30];
}

// 값을 반환하지만 저장하지 않았으므로 재사용 불가
console.log(funcs());

// 반환된 값이 val에 할당
var val = funcs();

참고 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions

07_함수의 종류

1_ 자바스크립트 코어 함수

자바스크립트에서는 가장 기본이 되는 기능을 미리 구현해 제공합니다. 배열을 만드는 기능이라던지 숫자를 문자로 바꿔주는 기능, 타이머함수 같은 기능을 하는 함수를 모아둔 것을 자바스크립트 코어 라이브러리라고 합니다.

1
2
3
4
// 코어 함수의 예
alert('안녕');
parseInt('123901239');
document.write('새로 작성');

2_ 사용자 정의 함수

말그대로 사용자가 필요해서 만드는 함수

1
2
3
4
5
function alert2(str) {
alert(str);
}

alert2('아이고 의미 없다~');

Lesson 02 - 초보자를 위한 클래스

01_클래스란?

함수가 특정 기능을 하는 구문(알고리즘, 로직)을 묶을 때 사용하는 문법이라면 클래스는 연관 있는 변수와 함수를 하나로 묶을 때 사용하는 문법 입니다.

02_클래스는 이럴 때 사용해요

실무 개발을 하다보면 함수들이 적게는 수백 개에서 많게는 수천 수 만 개가 기본으로 만들어 집니다. 이렇게 많아지다 보면 특정 코드를 찾기도 어렵고 수정하기도 어려워져 관리하기가 힘들어 지며 이렇게 함수가 많아지다보면 개발자들마다 동일한 이름의 함수를 만들어 충돌이 발생할 수도 있다.
이러한 것을 방지하기 위해 목적에 맞는 함수들을 따로 모아 가지런히 정리한 것을 클래스라고 할 수 있으며 이렇게 정리해놓으면 함수단위로 관리할 때보다 훨씬 쉽게 찾아서 사용, 수정이 가능해집니다.

03_클래스 생김새

번외> 클래스를 활용 예