let numbers = [1, 2, 3, 4, 2, 6, 6, 5]; numbers이라는 배열 안에는 중복되는 숫자가 있다. 중복되는 숫자(2, 6)를 제거하는 방법은 무엇이 있을까? 1. indexOf() function getUniqueNumbers(numbers){ return numbers.filter((num, index) => index === numbers.indexOf(num)); } console.log(getUniqueNumbers([1, 2, 3, 4, 2, 6, 6, 5])); // [1, 2, 3, 4, 6, 5] indexOf() 메서드는 배열에서 지정된 요소가 존재한다면 해당 요소의 인덱스를 반환하고, 존재하지 않으면 -1을 반환한다. 이때 찾고자 하는 요소가 배열 안에 여러..
null 병합 연산자를 사용하면 짧은 문법으로 여러 피연산자 중에 그 값이 ‘확정되어 있는’ 변수를 찾을 수 있다. a ?? b a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b null 병합 연산자를 사용하지 않고 let x = a ?? b와 동일하게 동작하는 코드를 작성하면 아래와 같다. let x = (a !== null && a !== undefined) ? a: b 확실히 코드의 길이가 길어지는 것을 볼 수 있다. 이처럼 null 병합 연산자를 사용하면 코드를 조금 더 간단하게 작성할 수 있다. let firstName = null; let lastName = null; let nickName = "홍길동"; console.log(firstName ?? lastName ?..
user의 정보를 담고 있는 객체가 있다. user라는 객체의 name이라는 값이 확실하지 않을 때, 아래와 같이 조건문을 사용할 수 있다. 위 조건문은 조건 중 하나라도 참일 경우 'no name'이라는 값을 반환하고, 거짓인 경우 해당 객체의 name 값을 반환하게 된다. 그런데 undefined와 false, '', null, 0은 거짓같은 값(falsy)이기 때문에 항상 false로 평가되는 값이다. 때문에 조건문을 아래와 같이 작성할 수 있다. if(user.name){ console.log(user.name); }else{ console.log('no name'); } 여기서 OR연산자를 사용하면 코드를 더 간단하게 작성할 수 있다. console.log(user.name || 'no name..
순수함수는 함수형 프로그래밍에서 많이 사용되는 개념으로, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 순수함수가 되기 위해서는 사이드 이팩트가 없어야 합니다. Side Effect란? 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인을 말합니다. 대표적으로 네트워크 요청, API 호출이 Side Effect 입니다. 자바스크립트에서 순수함수를 만들기 위해서는 데이터의 불변성을 유지하는 것이 중요합니다. 함수의 전달인자로 참조 자료형이 전달되는 경우, 의도치 않게 해당 객체 자체를 바꾸는 사이드 이펙트를 만들 수 있는데, 이는 해당 데이터의 불변성을 손상시킬 수 있습니다. 그래서 배열의 불변성을 보장하는 map, filter, reduce 등을 많이 사용합니다.
const는 상수, 즉 변하지 않는 값을 갖는 변수를 선언할 때 사용합니다. let과 다르게 const는 재할당을 할 수 없다는 특징을 가지고 있는데, 그럼에도 불구하고 const로 선언한 배열과 객체의 요소나 속성을 추가할 수 있는 이유는 배열과 객체가 참조자료형이기 때문입니다. 참조자료형은 변수에 값이 아닌 주소를 할당하기 때문에, const 키워드로 선언 및 할당을 하더라도 해당 변수에는 해당 배열과 객체의 주소만 담겨 있기 때문에 요소나 속성을 추가할 수 있습니다.
문제 오름차순 정렬된 정수의 배열(arr)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. 출력 number 타입을 리턴해야 합니다. 주의사항 이진탐색 알고리즘(O(logN))을 사용해야 합니다. 단순한 배열 순회(O(N))로는 통과할 수 없는 테스트 케이스가 존재합니다. target이 없는 경우, -1을 리턴해야 합니다. 입출력 예시 let output = binarySearch([0, 1, 2, 3, 4, 5, 6], 2); console.log(output); // --> 2 output = binarySearch([4, 5, 6, 9], 100); console.log(output); // --> -1 문제 풀이 const binarySearch = function (ar..
Router : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 Routing 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말 다른 주소에 따라 다른 뷰를 보여주는 과정으로, "경로에 따라 변경한다"라는 의미 Page Routing 우리가 인터넷을 사용해서 웹 사이트에 접속한다는 것은 브라우저를 통해서 웹 서버에게 경로의 요청을 전달하고 웹 문서를 받아보는 과정이다. 웹 서버가 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고, 그 페이지를 반환해서 사용자가 해당 페이지에 접속하는 과정을 페이지 라우팅이라고 한다. MPA & SPA MPA(Multipage Application) 여러개의 페이지를 준비해 놓고 있다가 요청이 들어오면 요청에 맞게 적절한 페이지를 보내주는..
🌴 React State & Props State(상태)란 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값을 말한다. 🌱 Props vs State 🍃 Props props는 외부로부터 전달받은 값(위로부터 인자와 같이 넘겨받음) - 변하지 않는 값을 말한다. (컴포넌트의 속성(property)을 의미한다.) 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 자바스크립트 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더..
Helper Method Recursion Helper Method Recursion는 외부 함수(outer function)와 안에 있는 재귀함수, 두 개의 함수를 가지고 있다. function outer(input){ let outerScopedVariable = []; function helper(helperInput){ // modify the outerScopedVariable helper(helperInput--); } helper(input); return outerScopedVariable; } Helper Method Recursion는 배열이나 데이터 목록 같은 것을 컴파일(compile)해야 할 때 사용된다. 예를 들어 어떤 배열에서 모든 홀수 값을 수집하는 것과 같은 작업을 수행할 ..
재귀란? "A process(a function in our case) that calls itself" "자기 자신을 호출하는 함수를 의미한다." 재귀 함수를 호출하게 되면 자기 자신을 끝없이 호출하게 된다. 이러한 재귀 함수를 잘 활용하면 반복적인 작업을 해야하는 문제를 더 간결한 코드로 풀어낼 수 있다. 재귀 함수는 계속해서 새로운 함수를 call stack에 추가한다.(동일한 함수를 계속 추가하고, 추가된 함수는 호출을 기다린다.) The call stack 함수를 호출하면 호출 스택의 꼭대기에 쌓이는데, 마치 책상 위에 쌓여있는 종이 더미와 같다. 종이 더미에 종이를 가장 위에 올려 놓듯이 우리가 새로 추가하는 함수가 제일 꼭대기에 위치하게 된다. 자바스크립트가 반환 키워드(return keyw..
