Javascript로 함수를 만들고 이해하세요!

함수는 JavaScript의 기본 빌딩 블록 중 하나입니다.

JavaScript의 함수는 절차(작업을 수행하는 일련의 지침)와 유사합니다.

함수는 결과를 반환하거나 미래를 위해 특정 값을 수정하는 특정 알고리즘/작업/명령이 수행되는 명령 블록이라고 말할 수 있습니다.

또한 함수는 주로 반복되는 코드를 실행하는 데 사용된다는 점도 강조할 수 있습니다.

우리는 함수로 무엇을 할 수 있는지 여러 번 알고 있지만 어떤 식으로 선언해야 하는지 이해하지 못합니다. 이는 함수를 선언하는 여러 가지 방법이 있기 때문입니다. 따라서 살펴보겠습니다.

함수 선언

이것은 항상 다음과 같은 키워드 기능으로 구성된 전통적인 것입니다.

함수의 이름입니다.

괄호 안에 있고 쉼표로 구분된 함수의 매개 변수 목록입니다. 매개 변수가 없으면 괄호를 비워 둡니다().

중괄호 { ... }로 묶인 함수를 정의하는 JavaScript 선언.

function my_name(a, b, ...) {
  // javascript declaration, operations, etc.
  // simply what the function will do when called
  return a * b;
}

함수 표현

함수 표현식과 함수 선언의 주요 차이점은 여기에서는 예약어 function으로 시작하지 않고 마치 변수를 생성하는 것처럼 시작한다는 것입니다.

const variable = function(a, b) {
  // javascript statement...
}

우리는 이러한 함수(함수 표현식)가 익명일 수 있다는 것을 알 수 있지만, 이를 언급하거나 호스팅하는 변수의 이름으로 호출하도록 보낼 수 있습니다.

또한 이 두 함수와 관련된 또 다른 차이점은 함수를 선언하는 위치입니다.

alert(foo()); // "soylenin" ✅
function foo () {return "soylenin";}

함수 선언을 통해 우리는 이러한 함수가 선언되면 해당 범위 내에 있는 한 어디에서나 사용할 수 있으며 이전에 호출되었는지 이후에 호출되었는지는 중요하지 않다고 말할 수 있습니다.

그러나 함수 표현식(함수 표현식)은 다릅니다. 함수가 변수에 저장되어 있고 변수를 할당하기 전에 변수를 호출할 수 없다는 것을 기억하기 때문입니다. 그렇지 않으면 단순히 오류가 발생합니다.

alert(foo()); // ERROR! foo is not declared
const foo = function() {return "soylenin";}

화살표 기능

화살표 함수는 전통적인 함수 표현식에 대한 간결한 대안이지만 제한적이며 모든 상황에서 사용할 수는 없습니다.

함수라는 단어를 계속 사용하는 대신 생략할 수 있지만 대신 등호(=)와 닫는 괄호(>)[또는 더 잘 알려진 "보다 큼"]을 닫는 괄호 뒤에 넣어야 합니다.

const variable = () => {
  return "soylenin"
}

console.log(variable()) // "soylenin"

이 함수는 더 간결하고 나머지와 관련하여 고유한 이점이 있습니다. 단일 값만 반환하면 return이라는 단어와 중괄호를 제거할 수 있고 암시적으로 함수가 값을 반환하기 때문입니다.

const variable = () => "soylenin"

console.log(variable()) // "soylenin"

이것은 우리가 코드를 제거하고 기능이 여전히 효과적이기 때문에 매우 실용적이며, 화살표 기능을 이런 방식으로 사용할 수 있을 뿐만 아니라 세계에서 이 기능에 주어진 가장 일반적인 용도는 화살표 기능이 사용될 때입니다. 예를 들어 배열의 .map()과 같은 반복자 메서드 내에서.

const finalValue = arrayProduct.map((item) => item.id === 3)

여기서 단순히 변수 valueFinal에 id 3에 해당하는 배열의 값이 할당됩니다.

또한 다른 큰 이점 중 하나는 컨텍스트를 상속하는 데 사용된다는 것입니다.

기본적으로 코드에서 이것을 사용하는 번거롭고 이상한 방법을 제거하여 보다 직관적인 코드를 만드는 것이 었습니다.

기존 함수에서는 기본적으로 창 범위에 있습니다.

window.age = 10; // <-- can you feel me?
function Person() {
  this.age = 42; // <-- can you feel me?
  setTimeout(function () {// <-- The traditional function is running in the scope of window
  console.log("this.age", this.age); // generates "10" because the function is executed in the scope of window
  }, 100);
}

const p = Person();

화살표 함수는 이것을 창 범위로 기본 설정하지 않고 생성된 범위에서 실행됩니다.

window.age = 10; // <-- can you feel me?
function Person() {
  this.age = 42; // <-- can you feel me?
  setTimeout(() => {// <-- Arrow function executing in the scope of "p" (when the function is sent to be called and where it is hosted)
    console.log("this.age", this.age); // generates "42" because the function is executed in the scope of Person
  }, 100);
}

const p = Person();

콘텐츠가 마음에 들면 다음에서 저를 지원할 수 있습니다.




무료 비트코인과 도지코인을 얻고 싶으신가요? 배너를 클릭하세요!