211202 프론트엔드 스쿨 24일차

JIAH·2021년 12월 2일

멋사 프론트엔드 스쿨 1기

목록 보기

24/30

수업 내용 (이호준 강사님)

재귀 함수

자기 자신을 호출(재귀 호출)하는 함수
반복되는 처리를 위해 사용한다.
재귀 함수 중에 외워둬야 할 3가지

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') == reverse('ello') + 'h' == 'olle' + 'h'
// reverse('ello') == reverse('llo') + 'e' == 'oll' + 'e'
// reverse('llo') == reverse('lo') + 'l' == 'ol' + 'l'
// reverse('lo') == reverse('o') + 'l' == 'o' + 'l'
// reverse('o') == 'o'

// 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

즉시 실행 함수

함수의 정의와 동시에 실행되는 함수.
최초 한번만 호출되며 다시 호출할 수는 없다.
목적
- 최초 한번만 실행이 필요한 초기화 처리등에 사용.
- 변수명 또는 함수명의 충돌을 방지.

array.map()

map() 함수는 배열의 모든 요소에 콜백함수를 실행하여 새로운 배열을 만드는 메서드이다.

let arr = [1, 2, 3, 4, 5];

let 맵 = arr.map(el => el * 2);

arr // 기존 배열
> (5) [1, 2, 3, 4, 5]

맵 // 기존 배열에 function 실행하여 만든 새로운 배열
> (5) [2, 4, 6, 8, 10]

2차원 배열의 요소에 function 실행

let data = [[1, 2, 3],[4, 5, 6], [7, 8, 9]] 

let newData = data.map(a => a.map(n => n *2));

data 
> (3) [Array(3), Array(3), Array(3)]
	0: (3) [1, 2, 3]
	1: (3) [4, 5, 6]
	2: (3) [7, 8, 9]

newData
> (3) [Array(3), Array(3), Array(3)]
	0: (3) [2, 4, 6]
	1: (3) [8, 10, 12]
	2: (3) [14, 16, 18]

// 매핑을 한번만 하면 1차원 배열의 요소에만 function이 실행된다
// [1, 2, 3] * 2, [4, 5, 6] * 2, [7, 8, 9] * 2
let newData2 = data.map(a => a * 2);

newData2
> (3) [NaN, NaN, NaN]
	0: NaN
	1: NaN
	2: NaN

array.foreach()

map() 함수와 비슷하지만 차이점은 return하는 값이 없다.

array.filter()

배열의 요소에 오름차순으로 접근하여 콜백함수를 실행하고 true를 반환하는 요소만 모아서 새로운 배열을 만든다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

result 
> (3) ['exuberant', 'destruction', 'present']

연습 문제

let 회원정보 = [{
    아이디 : 'jjang',
    패스워드 : '5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5',
    성별 : '남',
    휴대폰번호 : '010-5004-0000',
    이메일 : 'hojun1@gmail.com',
    가입연도 : '2021-12-02',
    주접속위치 : '125.242.161.149'
}, {
    아이디 : 'jjang2',
    패스워드 : '5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5',
    성별 : '남',
    휴대폰번호 : '010-5004-0000',
    이메일 : 'hojun2@gmail.com',
    가입연도 : '2021-12-02',
    주접속위치 : '125.242.161.149'
}, {
    아이디 : 'jjang3',
    패스워드 : '5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5',
    성별 : '여',
    휴대폰번호 : '010-5004-0000',
    이메일 : 'hojun3@gmail.com',
    가입연도 : '2021-12-02',
    주접속위치 : '125.242.161.149'
}, {
    아이디 : 'jjang4',
    패스워드 : '5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5',
    성별 : '여',
    휴대폰번호 : '010-5004-0000',
    이메일 : 'hojun4@gmail.com',
    가입연도 : '2021-12-02',
    주접속위치 : '125.242.161.149'
}];

1번. 남자인 사람

회원정보.filter(el => el.성별 === '남');

2번. 남자이면서 2021년도에 가입자

회원정보.filter(el => el.성별 === "남" && el.가입연도.split('-')[0] === '2021');

3번 아이디가 jjang인 가입자

회원정보.find(el => el.아이디 === "jjang");

↳ filter는 조건에 맞는 걸 다 찾는다. find는 한번 찾으면 멈춰서 메모리 효율이 더 좋다. 고유값을 찾을 때는 find가 낫다.

call by value 📌다시 정리

자바스크립트에서는 call by value만 존재한다.
주소가 넘어가는 것이 아니라 주소값을 복사한 복사본이 넘어간다.
해당되는 자료형은 객체, 배열, 함수.

let x = [100, 200, 300];

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

test(x)
x
> [10000, 200, 300]

Map 📌다시 정리

Set 📌다시 정리

오늘의 TIP

참고 링크
velog - call by value
tistory - 교집합, 차집합, 배타적논리합
velog - window.onload
github - 프론트엔드 면접 질문(지식)

새로 알게 된 내용

앱/웹에서 회원정보를 틀리게 작성하면 회원가입 유무를 알 수 없도록 "아이디나 비밀번호가 틀렸습니다." 라는 문구를 사용한다. 뭐가 틀렸는지 명확하게 알려주지 않아서 가입 유무도 알 수 없다. 사용자 입장에서는 매우 불편했는데 이런 이유가 있을 줄은 몰랐다. 크고 작은 여러가지 변수들을 생각해야 하는구나 싶다.