programming/beginner

[js] function

솧이 2022. 9. 11. 22:50

▶ 함수 (function)

다른 객체처럼 속성 및 method를 가질 수 있기에 일급(first-class) 객체이며 인자를 가질 수 있는 코드 블록이다

 

 

▷ 함수를 사용하는 이유

프로그래밍에서 동일한 내용의 코드가 반복될 때가 있다 

바로 이러한 코드 낭비를 없애기 위해 반복되는 코드를 하나의 함수로 정의하고 사용한다!

코드를 재사용할 수 있다 (한번 정의하고 여러 번 사용 가능하다)

다른 인자를 사용하여 동일한 코드를 여러번 사용할 수 있으며 다른 결과를 도출할 수 있다

 

1. 어떤 입력값을 주었을 때 (매개변수)

2. 어떠한 일을 수행하고 (본체)

3. 어떤 결과값을 돌려준다 (리턴값)

으로 함수를 작성하는 것이 일반적이다

 

 

함수의 특징

변수 안에 담길 수 있다 (함수가 값이기에)

객체의 속성 안에 method로 담길 수 있다

다른 함수의 인자값을 전달될 수 있다

함수의 return 값으로도 사용할 수 있다

배열의 값으로도 사용할 수 있다

 

 

함수 구문 

함수 내에 선언된 변수는 함수의 지역 변수가 된다

function name (parameter1, parameter2, ..) {
	// execution statement
}

 

 함수 선언식

function addOne(x) {
    var y = x + 1;
    return y;
}

 

  함수 표현식

변수를 선언하고 함수를 대입하는 방식이다

var addOne = function(x) {
      var y = x + 1;
      return y;
};

 

 

함수 이름 지정 방법

함수의 이름은 가능한 짧고 정확하게 함수의 기능을 설명해야 한다.

 

● show.. : 무언가를 보여준다.

 get.. : 값을 반환한다.

calc.. : 무언가를 계산한다.

create.. : 무언가를 만든다.

check.. : 무언가를 확인하고 boolean 등을 반환한다.

 

 

▷ 함수 선언

add라는 이름의 함수를 선언하는 코드이다. 즉, add란 단어가 저 함수가 실행되게 한단 것이다

function add (x, y) {
	var result = x + y;
    console.log(result);
    return result;
}

 

 

함수 호출

함수 호출 전까지 함수는 실행되지 않는다

add(3, 5);

 

 

즉시 실행 함수 

함수를 선언하고 그 함수에 대한 매개 변수를 선언하는 것은 매개 변수의 값을 정해주지 않는다. 

매개 변수의 정확한 값은 함수를 호출하는 순간에 결정된다.

실행하는 소괄호 안에 3, 5를 쉼표로 구분하여 넣었다. 

3과 5처럼 함수를 호출할 때 함수가 받는 값을 인자(argument)라고 부른다.

function add (x, y) {
    var result = x + y;
    console.log(result);
    return result;
}

add(3, 5);

 

순서!

1. result 변수가 선언된다.
2. x + y를 연산하고 8이라는 결과를 얻는다.
3. 8이라는 결과값을 result 변수에 할당한다.
4. 콘솔에 result 변수의 값을 로그한다.
5. result 변수의 값을 반환(return)한다.

 

 

 

  return 명령문

return 명령문은 함수 실행을 종료하고, 주어진 값을 호출 지점으로 반환한다

 

 

▷ return의 기능 - 함수 종료

함수 내부에서 return 명령문이 실행되면 해당 함수가 종료된다

 

▷ return의 기능 - 값 반환

return은 함수를 종료하는 기능과 더불어 어떠한 값을 반환할 수 있게 한다

const add = function(a, b){
  let result = a + b;
  return result;
};

add(10, 20);

let out = add(10, 20);
console.log(`out = ${out}`);
console.log(`out = ${add(150, 40)}`);  // add() 의 리턴값을 받아서 출력
console.log(`out = ${add(10, add(10, 20))}`);
var a = 1;
consol.log(a);

// 결과 : 1

function getA () {
  return 1;
}

var a = getA();
console.log(a);

// 결과 : 1

function doSomething () {
  var a = 3;
  var b = 2;

  if (a > b) {
    return;
  }

  return 3;
}

var a = doSomething();
console.log(a);

// 결과 : undefined

-> return 단어 뒤에 어떤 값도 지정해주지 않을 경우 undefined가 반환된다.

 

 

▶ 이름 없는 함수

함수 정의와 동시에 호출한다

이름 없는 함수를 호출하고 시행한다

(function(){
	console.log('익명함수');
});()

(function(a, b){
	console.log(`${a} + ${b} = ${a + b}`);
})(1, 3); // 1회성으로 호출하고 끝나는 함수이다

 

 

 

js에선 함수도 '데이터'

//함수도 데이터이기 때문에 이런 함수 배열이 가능하다

let arr = [sayHello2, sayHello3];
arr[0]('aaaa', 10000);

 

'programming > beginner' 카테고리의 다른 글

[js] template literal  (0) 2022.09.11
[js] null, undefined  (0) 2022.09.11
[js] object  (0) 2022.09.11
[js] datatype (literal, string, number, array, object, null, undefined)  (0) 2022.09.11
[js] operator  (0) 2022.09.11