초보자를 위한 자바스크립트 함수 예제와 함께 자세히 알아보기

안녕하세요! 오늘은 자바스크립트 초보자들을 위해 함수에 대해서 자세히 알아보도록 하겠습니다. 자바스크립트는 웹 개발에서 매우 중요한 역할을 합니다. 함수는 자바스크립트에서 매우 중요한 부분 중 하나이며, 이를 잘 다루는 것이 웹 개발자가 되는 데 있어서 매우 중요합니다.

함수는 코드를 그룹화하고 재사용하기 쉽도록 만들어주는 방법입니다. 이 글에서는 자바스크립트에서 함수를 만드는 방법과 호출하는 방법, 그리고 함수에서 반환하는 값 등에 대해 자세하게 다루겠습니다. 또한 예제를 통해 어떻게 함수를 사용하는지에 대해서도 알아보겠습니다.

 

함수라는 개념 자체가 생각보다 어렵고 생소할 수 있어요!

그래서 자세하게 설명하려다 보니 다른 개념들보다 양도 많고 새로운 게 많을 거예요!

하지만 하나하나 예제와 함께 작성해 두었으니까 겁먹지 말고 천천히 차근차근 공부해 봅시다!! 

자바스크립트에서 함수 만들기

함수를 만드는 방법은 매우 간단합니다. 다음과 같이 "function" 키워드를 사용하여 함수를 만들 수 있습니다.

function functionName() {
  // 함수 코드
}

위 코드에서 "functionName"은 함수의 이름입니다. 함수 이름은 원하는 대로 지을 수 있으며, 함수 이름은 소문자로 시작하는 것이 좋습니다. 함수 코드는 중괄호 {} 사이에 작성됩니다.

자바스크립트 함수에 입력 값 전달하기

함수에 값을 전달하려면 다음과 같이 함수의 괄호 안에 매개 변수(parameter)를 지정해 주면 됩니다.

function functionName(parameter1, parameter2) {
  // 함수 코드
}

위 코드에서 "parameter1"과 "parameter2"는 함수에 전달될 값입니다. 함수에서 이 값을 사용하려면, 함수 내부에서 이 값을 사용하면 됩니다.

JS 함수에서 값 반환하기

함수는 값을 반환할 수 있습니다. 반환 값은 함수 코드 내부에서 "return" 키워드를 사용하여 지정합니다. 다음은 반환 값이 있는 함수의 예시입니다.

function addNumbers(a, b) {
  return a + b;
}

위 코드에서는 "addNumbers"라는 함수가 정의되어 있습니다. 이 함수는 "a"와 "b"라는 두 개의 매개 변수를 받고, 이 두 값을 더한 값을 반환합니다. 이 함수를 호출하면 다음과 같이 사용할 수 있습니다.

var result = addNumbers(2, 3);
console.log(result); // 5

위 코드에서는 "addNumbers" 함수를 호출하여 "2"와 "3"이라는 두 개의 값을 전달합니다. 함수에서는 이 두 값을 더한 "5"를 반환하고, "result" 변수에 저장합니다. 마지막으로, "console.log()"를 사용하여 결과값을 출력합니다.

자바스크립트 함수 호출하기

함수를 호출하려면, 함수의 이름과 괄호를 사용하면 됩니다. 다음은 함수를 호출하는 간단한 예시입니다.

function helloWorld() {
  console.log("Hello, World!");
}

helloWorld();

위 코드에서는 "helloWorld"라는 함수를 정의하고, 함수 내부에서 "console.log()"를 사용하여 "Hello, World!"를 출력합니다. 함수를 호출하면 이 메시지가 출력됩니다.

 

자바스크립트 매개 변수에 기본값 지정하기

함수를 정의할 때, 매개 변수의 기본값을 지정할 수 있습니다. 이렇게 하면 함수를 호출할 때, 값이 전달되지 않은 매개 변수의 기본값이 사용됩니다. 다음은 매개 변수에 기본값을 지정하는 방법의 예시입니다.

 

이 방법은 다른 방법들보다 나름 최신(?)의 방법이기도 하고, 다루지 않는 강의가 굉장히 많아요!!

그렇지만 알아두면 자바스크립트 실무자 입장에서 정말 큰 도움이 되는 자바스크립트 꿀팁이니 꼭 알아두시면 좋겠어요!

 

function sayHello(name = "World") {
  console.log("Hello, " + name + "!");
}

sayHello(); // "Hello, World!" 출력
sayHello("John"); // "Hello, John!" 출력

위 코드에서는 "name" 매개 변수에 기본값인 "World"를 지정합니다. 함수를 호출할 때, 매개 변수가 전달되지 않으면 기본값이 사용됩니다.

JS 함수에 객체 전달하기

자바스크립트에서는 객체(object)를 매개 변수로 전달할 수 있습니다. 이렇게 하면 여러 값을 하나의 매개 변수로 전달할 수 있습니다. 다음은 함수에 객체를 전달하는 방법의 예시입니다.

function printPerson(person) {
  console.log("Name: " + person.name);
  console.log("Age: " + person.age);
}

var person = {
  name: "John",
  age: 30
};

printPerson(person);

위 코드에서는 "person"이라는 객체를 정의하고, "printPerson" 함수를 호출하여 이 객체를 전달합니다. 함수 내부에서는 객체의 속성에 접근하여 값을 출력합니다.

자바스크립트 함수의 반환 값으로 객체 사용하기

함수는 값을 반환할 때, 객체를 반환할 수도 있습니다. 이렇게 하면 여러 값을 하나의 객체로 반환할 수 있습니다. 다음은 함수에서 객체를 반환하는 방법의 예시입니다.

function createPerson(name, age) {
  var person = {
    name: name,
    age: age
  };

  return person;
}

var person = createPerson("John", 30);
console.log(person.name); // "John" 출력
console.log(person.age); // "30" 출력

위 코드에서는 "createPerson"이라는 함수를 정의하고, 이 함수에서 "person" 객체를 생성하여 반환합니다. 함수를 호출하여 "person" 객체를 받고, 객체의 속성에 접근하여 값을 출력합니다.

자바스크립트 함수의 반환 값으로 함수 사용하기

자바스크립트에서는 함수도 값이므로, 함수의 반환 값으로 다른 함수를 사용할 수 있습니다. 이렇게 하면 함수를 반환하는 함수를 만들 수 있습니다. 다음은 함수의 반환 값으로 함수를 사용하는 방법의 예시입니다.

function add(x) {
  return function(y) {
    return x + y;
  };
}

var addTwo = add(2);
console.log(addTwo(3)); // "5" 출력
console.log(addTwo(4)); // "6" 출력

위 코드에서는 "add"라는 함수를 정의하고, 이 함수에서 다른 함수를 반환합니다. 반환된 함수는 매개 변수 "y"를 받아 "x"와 "y"를 더한 값을 반환합니다. 함수 "addTwo"는 "add" 함수를 호출하여 "x"값을 "2"로 설정하고, 반환된 함수를 받습니다. 이후 "addTwo" 함수를 호출하여 "y"값을 전달하면 "x"와 "y"를 더한 값이 반환됩니다.

 

 

처음 배우시기에는 어렵고 복잡한 내용일 수 있는데 여기까지 읽으시느라 고생 많으셨어요!!

 

더 깊게 들어가면 클로저나 다른 내용들도 더 있는데 이건 나중에 자바스크립트를 더 공부하신 이후에 같이 공부해보는걸로 해요!!