JavaScript 기초부터 배우기 - 4

donggae·2023년 9월 21일

js study

JavaScript

목록 보기

4/7

텍스트## 1. 함수

특정 코드를 하나의 명령으로 실핼 할 수 있게 해주는 기능, 어떤 일의 단위
이 장에서는 함수를 알아보자

함수는 기본적으로 다음과 같은 형식이다.

function 함수이름 (매개변수) {
	함수가 할 일;
    return 반환
}

매개변수 - 함수에 전달해야되는 내용이 있을 때, 이 함수가 실행될 때 알아야되는 내용이 있을 때 매개변수를 통해 전달한다.
retrun - 반환값, 함수 완료 후, 반환되어야 하는 값이 있을 때 사용한다.

1-1. 함수의 기본

함수를 선언하고, 지역 변수와 외부 변수를 알아보자

함수 선언, 지역 변수

function showMessage() { // 함수 선언
	let message = "안녕하세요"; // 지역 변수
  	console.log( message ); // 안녕하세요가 출력 된다
};

showMessage(); // 안녕하세요가 출력 된다

console.log( message ); // ReferenceError: message is not defined

왜 이런 결과가 나올까?

message는 showMessage 함수의 지역 변수 이기에 외부에서는 호출이 되지 않는 성질을 가지기 떄문이다.
그럼 외부에서 호출이 가능한 변수도 있을까? 그게 외부 변수이다.

외부 변수

함수에선 외부 변수에 접근, 수정이 가능하다.

let userName = "John";

function showMessage() {
	userName = "Bob"; // (1)
  	let message = "hello" + userName;
  	console.log(message);
};

console.log( uesrName ); // (2) John이 출력된다.

showMessage(); // (3)

console.log( userName ); // (4) Bob이 출력된다.

(1) - 외부 변수 userName을 함수 내부에서 수정함
(2) - 수정한 함수를 호출하지 않기에 John이 출력된다.
(3) - 수정한 함수를 호출
(4) - 외부 변수를 수정한 함수에 의해 Bob으로 출력이 된다.

1-2. 함수 이름 짓기

동작을 수행하기 위한 코드

show - showMessage()
무언가를 보여주는 함수
get - getAge()
값을 반환
calc - calcSum()
무언가를 계산
create - createForm()
무언가를 생성
check - checkPermission()
무언가를 확인하고 불린값을 반환

함수는 동작 하나만 담당해야 한다.

getAge - 함수는 나이를 얻어오는 동작만 해야한다.
createForm - 함수는 form을 만들고 이를 반환하는 동작을 해야 한다.
checkPermission - 함수는 승인 여부를 확인하고 그 결과를 반환하는 동작만 해야한다.

2. 함수 표현식(Function Expression)

2-1. 함수 표현식, 함수 선언문의 다른점 - 문법

// 함수 선언문
function sum(a,b) {
	return a + b;
}

// 함수 표현식
let sum = function(a,b) {
	retrun a+ b;
};

2-2. 함수 표현식, 함수 선언문의 다른점 - 함수의 생성 시점

// 함수 선언문
greet("Hyun"); // 안녕하세요! Hyun님 출력

function greet(name) {
	console.log(`안녕하세요! ${name}님`);
}

함수 선언문 - 코드 실행전 호이스팅되어 함수가 정의된 위치에 상관없이 코드 어디서든 호출이 가능

// 함수 표현식
greet("Hyun"); // TypeError: greet is not a function

const greet = function(name) {
	console.log(`안녕하세요! ${name}님`);
};

함수 표현식 - 함수를 변수에 할당하기에 변수가 할당된 이후에 호출이 가능하다
변수에 값이 할당되기에 변수에 대한 스코프 규칙을 따른다.

3. 콜백함수(Callback Function)

어떠한 함수가 실행이 끝난 뒤 호출되는 함수

함수가 어떤 이벤트가 발생, 특정 시점에서 호출 되게끔 하는 함수

주로 비동기 작업에서 사용이된다.

function fetchData(url, callback) {
	console.log(`데이터를 ${url}에서 가져오는 중..`);
  	setTimeout(function() {
    const data = "가져온 데이터";
   	callback(data); // 콜백 함수 호출
    }, 2000);
}

fetchData("https://example.com/data", function(result){
	cosnole.log(`데이터를 가져오는데 성공했습니다 ${result}`);
})

fetchData 함수가 호출되면서 데이터를 가져오는 중.. 메시지 호출
2초 후 setTimeout 내부의 콜백 함수가 실행되고, 가져온 데이터가 callback을 통해 전달
fetchData 함수 완료 후 데이터를 가져오는데 성공했다는 메시지 출력

-> 콜백 함수는 주로 비동기 작업의 완료를 처리하거나 특정 이벤트가 발생할 떄 실행되어야 하는 작업을 할 때 사용한다.

4. 화살표 함수(Arrow Function)

함수 표현식보다 단순하고 간결하게 함수를 만들기

let func = (arg1, arg2, ... argN) => experssion

arg1, ..argN을 인자로 받는 함수 func 생성
func 함수는 => 우측의 표현식(expression)을 평가하고 결과를 반환

함수 표현식을 화살표 함수로 변경하기

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

let ask = (question, yes, no) => confirm(question) ? yes() : no();

ask(
  "동의하십니까?",
  () => alert("동의하셨습니다."),
  () => alert("취소 버튼을 누르셨습니다.")
);

5. 함수 내용 정리하는 문제

이름 매개변수로 전달받아 다양한 이름 프린트하는 함수 만들기

const greet = function (name) {
  console.log(`안녕하세요 저는 ${name}입니다.`);
};

greet("동현");

다음 조건에 맞는 meetAt 함수 만들기

인자를 세개 받는다
첫번째 인자는 년도에 해당하는 숫자
두번째 인자는 월에 해당하는 숫자
세번째 인자는 일에 해당하는 숫자
년도 인자만 받았을 경우 -> "1111년"과 같은 형식의 문자열을 리턴
년도,월 인자 받았을 경우 -> 년도와 월을 조합 "1111년 1월" 같은 형식의 문자열 리턴
년도,월,일 인자 받았을 경우 -> "년도/월/일"과 같은 형식의 문자열 리턴

const meetAt = function (year, month, date) {
  let todayYear = year;
  let todayMonth = month;
  let todayDate = date;

  if (todayDate) {
    return `${year}/${month}/${date}`;
  }
  if (todayMonth) {
    return `${year}년 ${month}월 입니다.`;
  }
  if (todayYear) {
    return `${year}년 입니다.`;
  }
};

console.log(meetAt(1997, 08,22));

처음에 todayYear를 가장 위로 올리고 todayDate를 가장 밑에 했더니
계속 년도만 표시 되었다 return은 첫 번째 조건이 만족되면 함수가 즉시 반환되는
특성을 몰랐기에 발생한 문제였다.

findSmallestElement 함수 구현하기

위 함수의 arr 인자는 숫자 값으로만 이루어진 배열입니다.
arr의 값들 중 가장 작은 값을 리턴해주세요.
만약 arr 비어있다면 0을 리턴 해주세요.
ex) 다음과 같은 배열이 인자(input)으로 들어왔다면 0이 리턴 되어야 한다
[100, 200, 3, 0, 2, 1]

function findSmallestNumber(arr) {
  let result = arr[0];
  if (arr.length === 0) {
    return 0;
  }
  for (let i = 1; arr.length > i; i++) {
    if (result > arr[i]) {
      result = arr[i];
    }
  }
  return result;
}

let smallestNumber = findSmallestNumber([1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10]);

console.log(smallestNumber);

for문을 forEach문으로 바꿔보자

function findSmallestNumber(arr) {
  let result = arr[0];
  if (arr.length === 0) {
    return 0;
  }

  arr.forEach(function (num) {
    if (result > num) {
      result = num;
    }
  });
  return result;
}

let smallestNumber = findSmallestNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

console.log(smallestNumber);

이 문제의 포인트는 비교를 해서 작은 값이 나오면 다음값과 비교를 하는 것 그러고 끝이 되었을 때 작은 값을 return하는 것이다.

돈을 바꿔주는 함수 만들기

매개변수로 돈의 금액이 들어간다
금액이 들어가면 몇 개의 지폐와 동전이 필요한지 최소 개수를 계산해준다.
지폐의 기준은 한국으로 한다. (5만원, 1만원, 5천원, 1천원, 500원, 100원)
ex) 12500인 경우
10000 X 1, 1000 X 2, 500 X 1

let unit = [50000, 10000, 5000, 1000, 500, 100];

function calcChages(money) {
  let result = "";
  for (let i = 0; i < unit.length; i++) {
    let count = Math.floor(money / unit[i]);
    if (count > 0) {
      result += `가장 최소 지폐는 ${unit[i]} X ${count}장 입니다.\n`;
    }

    money = money - unit[i] * count;
  }
  return result;
}

const chageDetails = calcChages(234500);
console.log(chageDetails);