2021-12-02 TIL

🦁 Day25

💻 오늘 배운 것

1. 함수 정의 방식

// 함수 선언문
function mul(x, y){
  return x * y;
}

// 함수 표현식
let mulXY = function(x, y){
  return x * y;
}

console.log(mulXY(2,5)); // 10

// 콜백 함수
function calc(x, y, c) {
  c(x + y);
  return x + y;
}

function write(x){
  document.write('콜백함수 ',x);
}

calc(10, 20, write); // 콜백함수 30

2. 재귀함수(recursive function)

자기 자신을 호출(재귀 호출)하는 함수. 반복되는 처리를 위해 사용된다.

<재귀함수 예시>

// factorial
function factorial(n){
    if(n <= 1) {
        return n
    }
    return n * factorial(n-1)
}

// factorial(5) == 5 * factorial(4) == 5 * 24
// factorial(4) == 4 * factorial(3) == 4 * 6
// factorial(3) == 3 * factorial(2) == 3 * 2
// factorial(2) == 2 * factorial(1) == 2 * 1
// factorial(1) == 1


// 문자열 뒤집기
function reverse(text){
    text += ''
    if(text.length <= 1){
        return text
    }
    return reverse(text.slice(1))+text[0]
}
reverse('hello')
'olleh'

// fibonacci
// 1, 1, 2, 3, 5, 8, 13, 21

function fib(n){
    if(n <= 2) {
        return n
    }
    return fib(n-1) + fib(n-2)
}

// 왼쪽 function만 따라갔으니
// fib(4) == fib(3) + fib(2)
// fib(3) == fib(2) + fib(1) == 3
// fib(2) == 2
// fib(1) == 1

// 오른쪽 값인 fib(2)를 다시 해야하는 상황!!
// fib(2) == 2

3. 함수의 다양한 형태

1) 즉시 실행 함수

• 즉시 실행하고 외부에서 컨트롤할 필요가 없는 함수.
• 단 한번만 호출되며 다시 호출할 수 없다.
• 메모리 효율적으로 관리하기 위해 바로 실행해야 하는 것들을 즉시 실행함수로 관리.

// 익명 즉시 실행 함수
(function () {
  var a = 1;
  var b = 2;
  return a + b;
}());

// 기명 즉시 실행 함수
(function foo() {
  let a = 3;
  let b = 5;
  return a * b;
}());

foo(); // ReferenceError: foo is not defined
// foo() 함수가 그룹 연산자인 () 내에 있으므로 () 밖에서 참조 할 수 없어서 외부에서 호출할 수 없다.

4. map() 메소드

배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출하고 콜백함수의 리턴값들로 구성된 새로운 배열을 반환한다. (원본배열은 변경되지 않는다!)

const array = [1,2,3];
const newArray = array.map(elem => elem * 2)

console.log(newArray); // [2,4,6]
console.log(array); // [1,2,3]

5. 값에 의한 호출(Call by value)

const x = [10, 20, 30];

function test(a) {
    a[0] = 10000;
}

test(x);
console.log(x); // [10000, 20, 30]

 
const y = 10;
function test(a) {
    a = 10000;
}
test(y)
console.log(y) // 10

6. '아이디 또는 패스워드가 일치하지 않습니다.' 문구의 숨은뜻(?)

로그인 실패했을 때 보통 '아이디 또는 패스워드가 일치하지 않습니다.'라는 문구가 표시된다.
왜 아이디나 패스워드 둘 중에 무엇을 잘못 입력했는지 알려주지 않을까? 이는 보안상의 이유로, 아이디나 패스워드 둘 중 어느 걸 잘못 입력했는지 유추하는 것을 방지하여 해킹 등의 정보보안 이슈 발생을 막기 위해서이다. 예를 들어 'tina'라는 아이디가 어떠한 웹사이트에서 사용되고 있을때 다른 사이트에 가서 동일 아이디를 사용해서 로그인 시도를 하여 로그인 실패시 '패스워드가 틀렸습니다' 라고 알려준다면 아이디는 맞게 입력했다는 뜻이 되므로'tina'라는 아이디로 그 사이트에 가입이 되어있다는 것을 알아낼 수 있다. 계속된 로그인 시도로 해당 계정을 사용하지 못하게 될 수도 있고 해킹의 위험성도 있으므로 구체적으로 어느 것을 잘못 입력했는지 알려주지 않는다.

---

💭 오늘 하루 느낀점

오늘 수업에서 Map을 배웠는데 선생님이 Map이 나온 배경을 설명해주셨다.

const obj = {
  a: 'a',
  b: 'b',
}

위와 같은 객체가 있다고 했을때 keys() 또는 values()를 사용해서 해당 객체의 key값만 혹은 value값만 알아내고 싶은데 자바스크립트에서는 obj.keys(), obj.values()처럼 쓸 수 없다. 그럼 그렇게 사용할 수 있게끔 수정해주면 되는데 수정하는대신 Map의 개념을 새로 만들었다고 한다🤦‍♀️
자바스크립트라는 언어는 참... 알면 알수록 흥미롭기도 하지만 한편으로는 이해할 수 없는 부분도 많은 것 같다ㅎㅎ
사실 수업을 많이 못 따라갔다.. Map 부분 진도 나갈때 거의 따라가지 못했다.. 재귀함수와 call by value 부분도 설명을 들으면 이해는 되는데 나에게 그걸 다시 설명해보라고 하면 못할 것 같다. 그렇다는 건 완전히 이해를 못했다는 뜻이겠지...
이번주 주말에 이해못한 부분 다시 보면서 공부해야겠다