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

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

PART2 - CH01 함수 기초

lesson01 함수 소개

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

함수를 사용하면 좋은 점은 두 가지로 꼽을 수 있습니다.

코드 중복 제거 및 코드 재사용

유지보수 용이성

< 함수를 사용하지 않은 경우 >

< 함수를 사용한 경우 >

02_함수란?

특정 기능을 하는 구문(알고리즘, 로직)을 독립된 부품으로 만들어 재사용하고자 할 때 사용하는 문법으로 일종의 포장기법이라고 할 수 있습니다.

03_함수의 구조 3가지

매개변수

지역변수와 전역변수

리턴 값

함수 호출

함수 정의

함수 리터럴

함수 이름 규칙

// 일반적임 함수
function sampleFunc1() {
  alert('안녕')
}

// 매개변수가 있는 함수
function sampleFunc2(str) {
  alert(str)
}
sampleFunc2('안녕');

// 리턴 값이 있는 함수
function sampleFunc3(num) {
  alert('입력한 값은', num);
  return num * 2
}
var sum = sampleFunc3(3); // 9를 반환

lesson02 가장 쉬운 함수 만들기

function

변수를 만드는 var키워드와 마찬가지로 function은 함수를 만들 때 사용하는 키워드 입니다.

함수 이름

함수 이름은 변수 이름과 마찬가지로 유일해야하며 마들려 하는 함수의 기능을 함축한 의미가 담긴 이름으로 만들면 됩니다.

{}

함수 영역을 나타냅니다.

함수이름()

함수이름 뒤에 ()를 붙여 작성하면 함수가 동작합니다. 우리는 이 작업을 함수 호출이라고 부릅니다.

function 함수이름() {
  alert('함수영역');
}

함수이름();

lesson03 지역변수 VS 전역변수

지역 변수와 전역 변수의 구분은 변수가 선언되는 위치이며 지역과 전역의 구분은 (var키워드 기준) 함수 입니다.

전역변수

전역영역(window)에 만들어지는 변수로서 영역에 상관없이 사용할 수 있는 변수를 의미합니다.

지역변수

지역변수는 지역 영역에 만들어지는 변수로서 오직 만들어진 영역에서만 사용할 수 있습니다.

< 사용 예 >

var global = '전역';

function test() {
  var local = '지역';
  console.log(global, local);
}

test();

< ES5에서의 지역, 전역변수 >

< ES6에서의 지역, 전역변수 >

lesson04 매개변수가 있는 함수 만들기

매개변수는 함수 내부로 데이터를 전달할 때 사용하는 변수로 매개변수를 사용하면 유연한 함수를 만들 수 있습니다.

// 함수 키워드(function) / 함수명 / (매개변수)의 순서로 사용 
function func1(arg1, arg2, arg3, arg4, arg5) {
  // 매개변수의 갯수에는 제한이 없습니다.
  var sum = arg1 + arg2 + arg3 + arg4 + arg5;
  
  alert(sum);
}
func1(10, 20, 30, 40, 50);


// 매개변수의 값이 많은 경우 Array(배열), Object(객체)를 사용하면 유연하고 편리합니다.
function func2(arr) {
  var sum = 0;
  
  for (var i = 0; i < arr.length; i++) {
    sum+= arr[i];
  }
  
  alert(sum);
}
func2([10, 20, 30, 40, 50]);

// 매개변수는 함수안에서 사용되므로 지역변수입니다.
function func3(num) {
  var number = num;
}
func3(10);

// 에러 발생
alert(number);

< 매개변수 사용 예 >

***arguments
매개변수로 무엇이 들어올지 모르는 경우에 사용하는 값으로 함수를 실행한 시점의 모든 매개변수를 배열의 형태로 가져옵니다.

< arguments의 사용 예 >

편리하지만 코드를 볼 때 어떤 값이 들어오는지 작업자가 알 수 없으며 작성자의 의도와 다르게 사용될 수 있으므로 사용에 주의가 필요합니다.

lesson05 리턴 값이 있는 함수 만들기

외부에서 함수내부의 값에 접근한 수 없으므로 매개변수를 통해 값을 전달하고 리턴 값을 통해 값을 반환 받을 수 있습니다.

< 함수 내부의 변수를 가져와보기 >

// 리턴 값의 선언은 return 값(변수명)
function sum(num1, num2) {
  return num1 + num2
}

// 함수 sum을 통해 반환된 값(리턴 값)을 value에 할당
var value = sum(10, 10);

< 리턴 값을 사용한 함수 예 >

< 계산기 만들기 >
[http://windfanta.ivyro.net/study/calc/]

자바스크립트 jquery 완전정복 스터디 1 - PART2 - CH01 함수 기초