📝 오늘 한 것

1. javascript 복습 및 exercise 해결

2. 자바스크립트 강의 수강 (함수)

📖 학습 자료

1. 드림코딩 유튜브

• 자바스크립트 강의 5편 (함수의 선언과 표현) (~16분까지)
• 자바스크립트 기초 강의 1 (원시타입 vs object)
• 자바스크립트 기초 강의 2 (함수의 정의와 호출, 함수를 다른 변수에 할당, 콜백함수)

2. 노마드 코더 유튜브 '바닐라 자바스크립트' 강의

• 1-8 (원시 타입)
• 1-10 (object)
• 2-1 (매개변수, 인수)

3. 사전 학습 가이드 step 2 (Exercise, Function)

📚 배운 것

📌 Exercise

---

1. FizzBuzz

for (let i = 1; i < 101; i++) {
  if (i % 3 === 0 && i % 5 === 0) {
    console.log('fizzbuzz');
  } else if (i % 3 === 0) {
    console.log('fizz');
  } else if (i % 5 === 0) {
    console.log('buzz');
  } else {
    console.log(i);
  }
}

2. Biggest Number

var x = 10;
var y = 20;
var z = 30;

if (x / y > 1) {
  console.log(x);
} else if (y / z > 1) {
  console.log(y);
} else if (z / x > 1) {
  console.log(z);
}

📌 함수(function)

No.6 function(함수) 참고

---

💡 함수란?

• 프로그램을 구성하는 기본적인 빌딩 블럭
• 하나의 함수는 하나의 작업만 하도록 만드는 게 좋다
• 함수의 이름은 동사 형태로 지정하는 게 좋다
• 자바스크립트에서 함수는 object이다
  따라서 함수를 다른 변수에 할당할 수도 있고, 함수를 다른 함수의 매개변수에 전달할 수도 있고, 함수를 return 할 수도 있다

• 함수를 구성하는 요소
  • input 받기 : 매개변수 없어도 됨
  • 기능 수행
  • output 반환 : return 명시 안 해줘도 됨

💡 함수를 만드는 방법

• 함수 선언식

  hoisting이 된다.
  즉, 함수를 정의하기도 전에 함수를 호출할 수 있다.

foo();

function foo () { // 이 줄에서 foo는 함수 이름
  //function body...
}

• 함수 표현식

  함수를 변수에 할당한 다음에야 변수를 함수 호출하듯 작성해 함수를 호출할 수 있다.

const foo = function () { // 이 줄에서 foo는 변수 이름
  //function body...
}

foo();

1. 함수 선언식

1) 함수 선언 · 실행

함수 뜯어보기 ❕

// 함수 선언
function foo (a) {
  // function body...
  }

// 함수 실행 - 함수 호출, 함수 내부 코드 실행
foo(1);

• function = 이것이 함수임을 나타내주는 키워드
• foo = 함수 이름
• { } = 코드 블럭
• a = 매개변수
• function body... = 함수 내부 코드, 기능, 구현 로직
• 1 = 인수

💡 함수의 이름은 함수를 가리키고 있는 주소(ref)를 가지고 있다.
💡 함수를 호출하기 위해서는 함수 실행문의 ( ) 안에 필요한 데이터(인수)를 전달해주면 된다.
❗ 함수를 선언(정의)하고 호출(실행)하지 않으면 함수는 아무런 기능도 수행하지 않는다 ❗

2) 매개변수 · 인수

(1) 매개변수

• 원시 타입 매개변수

  원시 타입 데이터는 메모리에 값이 그대로 저장되기 때문에 매개변수에 값이 전달됨

• object 매개변수

  object는 메모리에 reference가 저장되기 때문에 매개변수에 reference가 전달됨
  자바스크립트에서 함수도 object이다

function changeName(obj) {
  obj.name = 'coder';
}
// 전달된 object의 name을 coder로 변경하는 function

const syong = {name: 'syong'};
changeName(syong);
console.log(syong); // {name: 'coder'}

• 기본 매개변수(default parameters)

  매개변수에 값이 전달되지 않았을 때 기본으로 출력될 매개변수를 설정할 수 있다.

기본 매개변수 설정 안 한 경우

function show (message, from) {
  console.log(`${message} by ${from}`);
}

show(`hi`);
// hi by undefined → from 매개변수에 값이 전달되지 않았기에 undefined이라고 뜬다

기본 매개변수 설정해준 경우

function show (message, from = 'sorry') {
  console.log(`${message} by ${from}`);
}

show(`hi`);
// hi by sorry

• 나머지 매개변수(rest parameters)

  매개변수가 배열 형태로 전달됨

1번 (나머지 매개변수 이용)

function printALL(...args) {
  for (let m = 0; m < args.length; m++) {
    console.log(args[m]);
  }
}

printALL('my', 'name', 'is', 'syong');
/*
my
name
is
syong
*/

2번 (for of 문법 이용)

function printALL(...args) {
  for (const arg of args) {
    console.log(arg);
  }
}
// args의 모든 값들이 차례대로 지정된 변수 arg에 대입되어 출력된다

3번 (배열의 함수형 언어 'forEach' 이용)

function printALL(...args) {
  args.forEach((arg) => console.log(arg));
}
// 배열 파트에서 자세히 배울 것!

📌 1번 = 2번 = 3번

(2) 매개변수와 인수 비교

• 매개변수(parameters)

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

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

• 인수(arguments)

  • 함수를 실행할 때 넘겨지는 정보들

중복되는 부분들 가운데 다른 부분을 매개변수로 설정한다.

for (let a = 1; a <= 3; a++) {
  console.log(a);
}

for (let b = 1; b <= 5; b++) {
  console.log(b);
}

for (let c = 1; c <= 7; c++) {
  console.log(c);
}

위와 아래는 결과가 같다

function repeatLog(count) {
  for (let a = 1; a <= count; a++) {
    console.log(a);
  }
}

repeatLog(3); // 1 2 3
repeatLog(5); // 1 2 3 4 5
repeatLog(7); // 1 2 3 4 5 6 7

이때 함수 선언식의 repeatLog( ) 안에 있는 'count'가 매개변수이고, 함수 실행문의 repeatLog( ) 안에 있는 '3', '5', '7'이 인수이다

(3) 매개변수가 없는 경우

• 매개변수를 꼭 쓰지는 않아도 된다. 다만, 매개변수를 어떤 단어로 지정해준 경우에는 꼭 {} 내부에서도 같은 단어를 써야 한다.
• 함수 선언식에 매개변수가 공란일 경우, 함수 실행문에서 인수를 아무리 지정해도 출력값에는 변화가 없다

function write() {
  console.log('write');
}

write(1, 5, 10...);
// 출력값은 write로 고정

한편,

function print(x, y) {
  console.log(`${x} ${y}`);
}

print(1, 2); // 1 2

3) return 구문

• return 구문은 상황에 따라 있을 수도 있고, 없을 수도 있다.

💡 여기서 잠깐 !

• return은 반환의 의미를 가질 뿐 console.log처럼 출력하라는 명령어는 아니다. 따라서 console 창에 아무런 값도 찍히지 않는다.
• return 값은 함수 호출 시 함수가 반환하는 값으로 대체된다.
• 즉, return의 대상은 특정 데이터, 쉽게 말해 '함수명()'이 되며 이를 console.log 안에 넣으면 비로소 console 창에 찍히게 된다.

// 위에 print() 함수가 선언되었다고 가정
console.log(print());

• return은 output이 분명하기 때문에 변수에 할당이 가능하다. 그러나 console.log는 변수에 할당할 수 없다.

function add () {
  const syong = 'LeeSyong';
  return 'Hi,' + syong;
}

const num3 = add(); // return 값은 변수에 할당이 가능함
// 그러나 const num3 = console.log(add()) 불가능
console.log(num3); // Hi, LeeSyong

(1) 기능

• 함수 종료

  그 즉시 return 구문이 속해 있는 해당 함수를 종료한다.
  즉, return;보다 아래에 있는 코드는 실행되지 않는다.

• 값 반환

var a = 1;
console.log(a); // 1

위와 아래는 사실상 동일한 코드를 다른 방식으로 쓴 것이다

function getA () {
  return 1;
}
// getA () 함수의 반환값 = 1

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

→ 최종적으로 getA () 함수의 반환값 1이 console 창에 출력된다

(2) undefined 출력

• return 뒤에 어떤 값도 지정해주지 않은 경우 (= return;)

function foo (a, b) {
  if (a < b) {
    console.log(a)
    return;
  }
}

const result1 = foo(10, 20);
const result2 = foo(20, 20);

console.log(result1);
// 10 undefiend
console.log(result2);
// undefined
// → (20 < 20)이 false이므로 console.log(a) 실행 X
// → return;으로 인해 undefined 값만 나오게 된다

• 조건에 맞는 return 되는 값을 지정해주지 않은 경우

function very (c, d) {
  if (c < d) {
    console.log(c)
    return c;
  }
}

const result3 = very(10, 20);
const result4 = very(20, 20);

console.log(result3);
// 10 10
console.log(result4);
// undefined
// → (20 < 20)이 false이므로 console.log(c) 실행 X
// → (20 = 20)일 때의 반환값은 지정되어 있지 않아 undefined 값이 나오게 된다

(3) Early return, early exit

• 이럴 때는 빨리 return을 하여 함수를 종료하고, 필요한 로직은 그 뒤에 작성하도록 한다

  • 조건이 맞지 않는 경우
  • 값이 undefined인 경우
  • 값이 -1인 경우

function upgradeUser(user) {
  if (user.point <== 10) {
    return;
  }
  // 구현 로직...
}

2. 함수 표현식

💡 일급 함수

• 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현한다

• 일급 함수는 변수에 할당할 수도 있고, 다른 함수에 매개변수로 제공할 수도 있으며, 함수가 함수를 반환할 수도 있다.

• 함수를 선언함과 동시에 변수에 할당한다

const print = function () { // 익명 함수
  console.log(`print`);
}
print(); // 변수에 함수를 호출하듯 () 호출한다

const printAgain = print; // 이를 다시 다른 변수에 할당한다
printAgain(); // = print();

1) 함수를 변수에 할당

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

const doSomething = add;
// doSomthing이란 변수에 add를 할당

설명 ❗❗

add라는 함수의 이름에는 그 함수가 정의되어 있는 곳을 가리키는 주소(ref)가 들어 있다.
그런데 add라는 함수의 이름을 doSomething이란 변수에 할당하게 되면
메모리에 doSomething이란 변수가 차지하는 공간이 생기는데
그 공간에는 add라는 함수의 이름에 들어있는 주소(ref)가 복사되어 들어오게 된다.
즉, doSomthing과 add 모두 같은 함수를 가리키게 된다.

따라서,

const resultOne = doSomething(1, 3);
console.log(resultOne); // 4

const resultTwo = add(1, 3);
console.log(resultTwo); // 4

// resultOne과 resultTwo는 같은 값을 가짐을 알 수 있다.

2) 함수를 다른 함수에 매개변수로 전달

function add (num1, num2) {
  return num1 + num2;
} // 일단 add 함수 정의해놓음

function surprise(operator) {
  const result = operator();
  console.log(result);
}

surprise(); // error

함수 실행문에서 매개변수인 operator에 어떤 값(=인수, 여기서는 함수)도 전달하지 않았기 때문에 operator는 함수가 아니라고 error가 뜬다.

function surprise(operator) {
  const result = operator();
  console.log(result);
}

surprise(add); // NaN

매개변수인 operator에 add라는 함수를 전달했다.
즉, add가 가리키고 있는 함수의 주소(ref)가 복사되어 surprise 함수의 매개변수인 operator로 전달된 것이다.
따라서 operator()는 곧 add()를 의미하게 된다.

그러나 num1, num2에 어떤 데이터(=인수, 여기서는 숫자)도 전달해주지 않았기 때문에 Not A Number을 의미하는 NaN 값이 뜬다.

※ 최종 코드 (함수를 다른 함수에 매개변수로 전달)

function surprise(operator) {
  const result = operator(2, 3);
  console.log(result);
}

surprise(add); // 5

2. 1) 2) 포인트 정리 🔥

함수의 이름을 1)다른 변수에 할당하든 2)다른 함수에 매개변수로 전달하든 간에
함수의 이름을 어딘가에 전달한다는 것은 그 함수의 이름이 가리키고 있는 함수의 주소(ref)를 전달한다는 뜻이다.
이를 통해서 함수를 호출할 수 있게 된다.

✨ 내일 할 것

1. 함수, 객체 학습

2. 문자열 메서드 학습