공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

 

 

함수(Function)

  •  함수(function)  : 특정한 기능을 수행하는 소스코드를 따로 묶어 놓은 것 
  •  함수의 재사용성 : 함수를 한 번만 선언해두면 입력을 바꿔 여러 번 사용할 수 있는 성질

 

   함수의 종류 

  • 내장함수(built-in function) : 자바스크립트에 포함된 함수. 별도의 선언 없이 호출해서 사용하면 된다.
  • 사용자 정의 함수 : 프로그래머가 정의한 함수

 

 

  ■ 함수선언, return문

//1. 매개변수 X, return문 X
function [함수이름](){
    [함수 호출시 실행할 명령어];
}


//2. 매개변수 O, return문 X
function [함수이름]([매개변수 1], [매개변수 2], ... [매개변수 3]){
    [함수 호출시 실행할 명령어];
}

function addNumber(a, b){
    var sum = a + b;
    console.log(sum);
}


//3. 매개변수 X, return문 O
function [함수이름](){
    [함수 호출시 실행할 명령어];
    return [반환할 값, 변수 또는 식];
}


//4. 매개변수 O, return문 O
function [함수이름]([매개변수 1], [매개변수 2], ... [매개변수 3]){
    [함수 호출시 실행할 명령어];
    return [반환할 값, 변수 또는 식];
}
}

  함수를 선언할 때는  function 예약어를 사용하고 중괄호( { } )안에 함수에서 실행할 명령어를 묶는다. 필요에 따라 매개변수와  return 문을 지정하기도 한다. (웹 브라우저에서 자바 스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석하기 때문에) 함수 선언 위치는 프로그램 흐름에 영향을 주지 않는다. 그래서 한 문서 안에 여러 함수를 선언했을 때 앞부분이나 뒷부분에 함수 선언부를 모아놓고 필요할 때마다 호출해서 쓴다. 

 

   return 문은 함수 실행 후 결과값을 반환할 때 사용한다. 반환 위치는 함수를 호출한 위치이며  return 예약어 다음에 넘겨줄 값이나 변수 또는 식을 지정하면 된다.

 

 

 

  ■ [ES6] 함수의 매개변수 기본값 지정

function multiple(a, b = 5, c = 10){
    return a * b + c;
}

ES6에서는 매개변수가 있는 함수를 선언할 때 매개변수의 기본값을 지정할 수도 있다.

 

 

 

  ■ 함수 호출

addNumber(2, 3);
addNumber(10, 20);

매개변수가 있는 함수를 실행할 때는 이름 옆의 괄호 안에 인수를 넣어주어야 한다.

인수의 개수는 함수에 선언된 매개변수의 개수와 같아야 된다. 

 

  •  매개변수(parameter, 인자)  : 함수를 실행할 때 입력하는 값
  •  인수(agument, 전달 인자)  : 함수를 실행할 때 매개변수로 넘겨주는 값

 

var num1 = parseInt(prompt("첫 번째 숫자는 ? "));
var num2 = parseInt(prompt("두 번째 숫자는 ? "));
addNumber(num1, num2);

function addNumber(a, b){
    var sum = a + b;
    alert("두 수를 더한 값은 " + sum + "입니다.");
}

간단하게 함수를 선언하고 호출하는 예시이다.

 parseInt( ) 는 프롬프트 창에 입력한 값을 정수로 바꿔주는 함수이다. ( Number( ) 함수를 사용해도 결과는 같다.)

 

 

 

함수 표현식

  • 익명 함수 : 이름이 없는 함수
  • 즉시 실행 함수 : 함수를 정의하는 동시에 실행하는 함수
  • (ES6) 함수의 화살표 표기법(arrow notation) :  => 

 

 

  ■ 익명 함수

  익명 함수는 이름이 없는 함수를 말한다. 선언할 때 이름을 붙이지 않는다. 익명 함수는 함수 자체가 식(expression)이기 때문에 익명 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용하는 것이 가능하다.

 

//익명함수 선언 후 변수 add에 할당
var add = function(a, b){
    return a + b;
}

//변수에 할당시 변수이름을 함수처럼 사용하면 됨
var sum = add(10, 20);

익명 함수는 이름이 없으므로 만약 익명 함수를 변수에 할당했다면 해당 변수를 함수 이름처럼 사용해서 익명함수를 실행한다.

 

 

 

  ■ 즉시 실행 함수

// 선언방법 1
(
    function( ) {
    ...
    }
)( );


// 선언방법 2
(
    function( ) {
    ...
    }
());

// 선언방법 3
(function( ) {
	...
})( );

// 선언방법 4
(function( ) {
	...
}( ));

  즉시 실행 함수는 함수를 정의함과 동시에 실행하는 함수이다. 함수 선언 소스 전체를 괄호로 묶고 소스를 닫는 괄호 앞이나 뒤에 인수가 들어갈 괄호를 넣는다. 즉시 실행 함수는 식이기 때문에 소스 끝에 세미콜론( ; )을 붙여야 한다. 즉시 실행 함수도 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있다.

 

var result = (function(a, b) {	//매개변수
    return a + b;
}(10, 20));	//인수
console.log(result);

매개변수와  return 값이 있는 즉시 실행 함수의 예시이다.

 

 

 

  ■ (ES6) 함수의 화살표 표기법 (arrow notation)

기존 함수 표기법 화살표 표기법
var hi = function( ) {
    return "안녕하세요 ?";
}
hi( );		 let hi = ( ) => "안녕하세요 ?";
hi( );
var greet = function(name) {
    return name + "님, 안녕하세요 ?";
}
greet("경희");		 let greet = name => `$(name)님, 안녕하세요 ?`;
greet("경희");
var add = function(a, b) {
    return a + b;
}
add(10, 20)		 let add = (a, b) => a + b;
add(10, 20);

  ES6부터는  => 표기법(화살표 표기법)을 사용해 함수 선언을 더 간단하게 할 수 있다. 익명 함수를 변수에 지정할 때 많이 사용한다.  function 예약어를 사용하지 않고, 매개변수가 하나라면  ( ) 없이 매개 변수만 작성할 수 있다. 매개변수가 2개 이상일 경우는 기존 매개변수 표기법과 같다. (매개변수가 없는 경우는  ( ) 만 작성) 

 

 

 

 

 

스코프(Scope)

  자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 한다. 

  • 지역 변수, 로컬 변수(local variable) : 한 함수 안에서만 사용할 수 있는 변수
  • 전역 변수, 글로벌 변수(global variable) : 스크립트 전체에서 사용할 수 있는 변수
  • (ES6) 블록 변수(block variable)
    : 변수를 선언한 블록( { } 로 묶은 부분)에서만 유효하고 블록을 벗어나면 사용할 수 없는 변수

 

 

  ■ 지역변수, 로컬 변수(local variable)

  지역 변수는 함수 안에서 선언하고 함수 안에서만 사용한다. 함수 선언 시 지역변수는 예약어  var 와 함께 변수 이름을 지정해야 하는데,  var 가 없을 경우 함수 안에서 선언했어도 전역 변수로 취급되므로 주의한다.

 

var myVar = 100; 	//전역변수
test();
document.write("myVar is " + myVar);

function test() { 			
    var myVar = 50;	//지역변수
}

 

실행결과

 test( ) 함수 안의  myVar 는 함수를 벗어나면 사용할 수 없기 때문에  myVar 는  100 이 나온다. 이처럼 지역변수는 전역 변수에 영향을 주지는 않지만 이름이 같을 경우 헷갈릴 수 있으므로 변수 이름은 겹치지 않게 하는 것이 좋다.

 

 

 

  ■ 전역 변수, 글로벌 변수(global variable)

  스크립트 소스 전체( <script> 와  </script> 사이)에서 사용할 수 있는 변수를 말한다. 함수 안에서 새롭게 전역 변수를 선언하려면 변수 이름 앞에  var 예약어를 사용하지 않으면 된다.

 

var myVar = 100;	//전역변수
test();
document.write("myVar is " + myVar);

function test() { 			
    myVar = 50;	//전역변수
}

 

실행 결과

 test( ) 함수 안의  myVar 가 전역 변수로 바뀐 것 빼면 앞의 코드와 달라진 것이 없다.

이제는 둘 다 전역 변수가 되었기 때문에 값이  50 이 된다.

 

 

 

  ■ (ES6) 블록 변수(block variable) 

add("abc", "123");

function add(a, b){
	var local = a + b;	// 지역변수
    if(b != null){
    	let block = b + a;	//블록변수
    }
    console.log(local);	//지역변수 값출력
    console.log(block);	//블록변수는 블록을 벗어나면 사용할 수 없으므로 에러
}

변수를 선언한 블록( { } 로 묶은 부분)에서만 유효하고 블록을 벗어나면 사용할 수 없는 변수이다.

 let 예약어를 사용해서 변수를 선언하면 블록 변수가 된다.

 

 

 

저작자표시 비영리 변경금지

'Front end > Javascript' 카테고리의 다른 글

[Javascript] 객체(object)  (0) 2020.01.05
[Javascript] 이벤트(event)  (0) 2020.01.02
[Javascript] 제어문  (0) 2019.10.28
[Javascript] 변수, 자료형, 연산자  (0) 2019.10.26
[Javascript] Javascript의 특징, console, 입출력  (0) 2019.10.25

+ Recent posts

티스토리툴바