[JavaScript] 기초(3)

 

▶ 함수

  : 논리적인 일련의 작업을 하는 하나의 단위

    반복해서 사용되는 동작을 하나로 묶어두었다가 필요할 때마다 호출하여 사용할 수 있다.

 

  함수선언문  -> 함수 선언 키워드인 function으로 함수를 '선언'

function greeting () { 
	console.log('hello world') 
};

greeting() // 'hello world'

  함수표현식  -> 변수에 함수를 할당하여 함수를 '표현'

let greeting = function () {
	console.log('hello world')
};

greeting() // 'hello world'

 

- 함수 내부에 있는 코드는 함수를 호출했을 때만 실행된다.

- 함수선언문으로 정의된 함수와 함수표현식으로 정의된 함수의 호출 방법은 동일하다.

  함수명 뒤에 소괄호( (  ) )를 붙여 호출하면 됨.

 

 

- 매개변수와 전달인자

function greeting (name) {
	console.log('hello ' + name);
}

greeting('kimcoding'); // 'hello kimcoding'

위 예시에서 매개변수는 name, 전달인자는 'kimcoding'이 된다.

 

 

☞ 구구단 n단을 출력하는 함수를 정의하고 호출하기

function multiplication (n) {
	for(let i = 1; i <= 9; i++) {
		console.log(n * i);
	}
}

multiplication (3)

 

- 매개변수를 여러 개 사용하는 것도 물론 가능하다.

  다만, 매개변수와 전달인자의 개수가 다른 경우, 아무것도 전달되지 않은 매개변수는 undefined로 초기화되어 있음.

  오류는 아님.

function getUserName (user1, user2) {
	console.log(user1);
	console.log(user2);
};

getUserName('kimcoding', 'parkhacker');
getUserName('kimcoding'); //'kimcoding' undefined

 

- 매개변수와 함수 안에서 선언된 변수는 함수 내부에서만 사용이 가능하다.

  ( 스코프 : 변수가 유효한 범위 )

 

 

 

( + ) 화살표 함수( arrow function ) -> 전통적인 함수 표현의 간편한 대안. 단, 몇 가지 사용상의 제한이 있음.

        https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

/* 아래 두 함수는 같은 의미이다. */

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

// 화살표 함수
let sum = (a, b) => a + b;

 

---

 

함수의 실행결과를 외부로 반환, 즉, 함수의 외부에서 함수의 결과값을 사용할 수 있으려면?

 

return문을 사용!

 

1. 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료된다. 다시 말해 return문 뒤에 나오는 코드는 실행되지 않음.
2. return문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴한다. 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있다.
3. 또는 함수 호출의 결과를 변수에 할당하는 것도 가능.
4. 조금만 더 응용해 본다면, 함수의 호출 결과끼리의 연산도 가능.

function add (x, y) {
	return x + y; // 반환문
}

let result = add(3, 2);
console.log(result); // 5

let result = add(3, 2) + add(5, 7);
console.log(result); // 17

 

 

 

 

 

---

 

 

 이번에는 하루 종일 페어 분이랑 조건문과 반복문에 대한 문제를 풀었다. 기본이 되는 내용이지만 알듯말듯한 느낌이 계속 들었다. 아무래도 많이 사용하면서 익숙해지는 수밖에 없을 것 같다.

 

- boolean 타입을 리턴하려면 그냥 return true; 또는 return false; 라고 쓰면 된다.

 

- 대소 비교 연산자는 합쳐 쓰지 않는다. &&을 이용해 붙여 쓴다. 

 

- 코드를 보기 좋게 쓰는 법에 대해 생각해 봐야겠다.

 

  작성한 코드 ↓

function convertScoreToGradeWithPlusAndMinus(score) {
  let s=7;
  let e=8;

  if(score>=90 && score<=100){
    if(100-s>score){
      return 'A-';
    }else if(90+e<=score){
      return 'A+';
    }
    return 'A';
  }else if(score>=80&&score<=89){
    if(90-s>=score){
      return 'B-';
    }else if(80+e<=score){
      return 'B+';
    }
    return 'B';
  }else if(score>=70&&score<=79){
    if(80-s>=score){
      return 'C-';
    }else if(70+e<=score){
      return 'C+';
    }
    return 'C';
  }else if(score>=60&&score<=69){
    if(70-s>=score){
      return 'D-';
    }else if(60+e<=score){
      return 'D+';
    }
    return 'D';
  }else if(score>=0&&score<60){
    return 'F';
  }else{
    return 'INVALID SCORE';
  }
}

  참조 코드 ↓

function plusOrMinus(score) {
  const extra = score % 10;
  if (extra <= 2) {
    return '-';
  } else if (extra >= 8) {
    return '+';
  } else {
    return '';
  }
}

function convertScoreToGradeWithPlusAndMinus(score) {
  let grade;
  if (score > 100 || score < 0) {
    return 'INVALID SCORE';
  }
  if (score === 100) {
    return 'A+';
  }
  if (score >= 90) {
    grade = 'A';
  } else if (score >= 80) {
    grade = 'B';
  } else if (score >= 70) {
    grade = 'C';
  } else if (score >= 60) {
    grade = 'D';
  } else if (score >= 0) {
    grade = 'F';
  }

  if (grade !== 'F') {
    grade = grade + plusOrMinus(score);
  }
  return grade;
}

 

 

- 1초 뒤 시간 구하기

function addOneSecond(hour, minute, second){
  second = second+1;
  if(second === 60){
    second = 0;
    minute = minute + 1;
    if(minute === 60){
      minute = 0;
      hour = hour + 1;
      if(hour === 24){
        hour = 0;
      }
    }
  }
  return `1초 뒤에 ${hour}시 ${minute}분 ${second}초 입니다`;
}

 

 

- 차례대로 문자열 3개를 입력받아 가장 짧은 문자열 리턴하기

 

  작성한 코드 ↓

function findShortestOfThreeWords(word1, word2, word3) {
  //각 길이를 구한 다음 짧은 길이를 return
  //동일한 경우 첫번째 word1을 return을 한다.
  let alength = word1.length;
  let blength = word2.length;
  let clength = word3.length;

  let minlength = Math.min(alength,blength,clength);

  if(alength === minlength){
    return word1;
  }else if(blength === minlength){
    return word2;
  }else if(clength === minlength){
    return word3;
  }else if(alength === blength !== clength){  //여기부터
    return word1;
  }else if(blength === clength !== alength){
    return word2;
  }else if(alength === clength !== blength){
    return word1;
  }else{
    return word1;  //여기까지
  }
}

지금 보니까 뒤쪽의 표시한 부분은 없어도 될 것 같다. 함수는 위에서부터 순서대로 실행되니 문자열의 길이가 같은 경우, 앞쪽의 문자가 리턴되며 종료되기 때문이다. 

 

이 문제와 관련하여 실시간 세션에서 팁을 얻을 수 있었다.

◆ 컴퓨터에게 가장 짧은 것, 가장 긴 것, 가장 큰 것, 가장 작은 것 등을 찾게 하려면?
→ 기준을 하나 만든 뒤, 그 기준과 비교해서 더 조건에 부합하면 기준을 교체하면 된다.

  참조 코드 ↓

function findShortestOfThreeWords(word1, word2, word3) {

  // 가장 짧은 단어를 할당할 변수 하나 선언
  let shortest = word1;

  // word1과 word2를 먼저 비교한다
  // word2의 길이가 word1의 길이보다 짧으면 변수에 word2 할당
  // 더 작을 때만 교체되기 때문에, 길이가 같더라도 먼저 나온 단어가 앞에 있음.
  if (word1.length > word2.length) {
    shortest = word2;
  }

  // word1과 word2를 비교하여 나온 결과와 word3을 비교
  // 더 작을 때만 교체되기 때문에, 길이가 같더라도 먼저 나온 단어가 앞에 있음.
  if (shortest.length > word3.length) {
    shortest = word3;
  }

  return shortest;
}

 

 

- 분 단위로 입력받은 미접속 시간 단위 바꿔 리턴하기

function makeLastSeenMsg(name, period) {
  if(period>=0 && period<=59){
    return `${name}: ${period}분 전에 접속함`;
  }
  else if(period>=60 && period<=1439){
    period = parseInt(period/60);
    return `${name}: ${period}시간 전에 접속함`;
  }
  else{
    period = parseInt(period/1440);
    return `${name}: ${period}일 전에 접속함`;
  }
}

  → Math.floor을 사용해도 됨.