순수함수 순수함수는 외부 상태에 의존하거나 변경하지도 않는, 온전히 독립적인 함수를 말한다. 여기서 외부상태는 전역 변수나 서버 데이터, DOM 등등.. 아래와 같은 경우에 모두 해당할 때 순수함수라고 할 수 있다. 동일한 입력에 대해 동일한 출력을 반환하는 함수. 사이드 이펙트가 없는 함수 같은 입력에 대해 같은 출력을 반환하는 함수 순수함수는 늘 같은 입력에 대해 같은 출력을 반환하기 때문에, 인자를 전달받지 않는 함수는 거의 상수 같은 느낌. 외부 상태에 의존하지 않기 때문에 늘 같은 출력을 한다. 아래와 같이 increase() 라는 함수를 만들었을 때, 이 함수는 순수함수라고 할 수 있다. function increase(n){ return ++n; } console.log(increase(1)..

함수를 쓰다 보면 parameter와 argument가 종종 헷갈리는 경우가 있다. 이번 기회에 명확하게 정리를 해보자. 🤔 우선 둘 다 함수의 호출과 관련된 키워드들이다. paramter 파라미터는 매개변수다. 좀 더 구체적으로는 함수를 정의할 때, 함수에 전달되는 값을 받는 변수를 말한다. function add(a,b){ return a+b; } add(1,2) 위 코드에서는 a, b가 함수 add의 파라미터다. 함수를 호출할 때 전달되는 값인 1,2를 a와 b라는 이름으로 받는다. 매개변수는 함수 내부에서만 유효하고 외부에서는 참조할 수 없다. argument 아규먼트는 인수 혹은 인자이다. 함수를 호출할 때 전달되는 실제 값이다. add(3,4) 위 코드에서 3,4가 인자에 해당된다. 이 인자들..

자바스크립트의 개념을 공부하다 보면 필수적으로 마주치게 되는 호이스팅에 대해 따로 정리해 본다. 호이스팅 Hoisting 자바스크립트에서 변수 선언이나 함수 선언이 해당 스코프의 최상단으로 올려지는 현상을 말한다. 변수의 호이스팅 먼저 변수에서의 호이스팅을 알아보자. var로 선언한 변수 console.log(hi); // undefined var hi = 'hello'; 위와 같은 코드가 있을 때, undefined가 출력되는 것을 확인할 수 있다. 그 이유가 바로 호이스팅 때문인데, 변수 hi의 선언문이 먼저 최상단으로 올라가 버려 선언되었지만 아직 'hello'라는 할당을 받기 전인 상태이다. var 키워드로 선언된 변수의 경우 선언과 동시에 undefined로 할당된다는 특징이 있다. let 또는..

자바스크립트의 '?' ES2020에서 도입된 새로운 문법들 중 옵셔널 체이닝 연산자 ?. 와 null 병합 연산자 ?? 는 모두 물음표를 쓴다. 사용되는 방식도 null이나 undefined 값을 체크할 수 있다는 점에서 비슷한 것 있는 것 같아, 이 둘을 한번 묶어서 정리해보면 좋겠다 싶어서 작성하게 되었다. 🙂 null 병합 연산자 우선 null 병합 연산자(nullish coalescing) ??은 간단하게 값이 할당되어 있는 변수를 쉽게 찾을 수 있다. 즉 undefined이나 null이 아닌 값이 할당된 경우를 말한다. a ?? b 이 연산자는 위와 같이 쓸 수 있는데, 이런 식으로 해석할 수 있다. a가 null 도 아니고 undefined가 아니라면 a 그 외(null이나 undefined)..

실행 컨텍스트를 알아보자! 실행 컨텍스트를 위해 책을 읽던 나날들... 그러나 텍스트만으로는 쉽게 이해할 수 없었던 나.. 하지만 이대로 넘어갈 수 없지.. 🤔 이번 기회에 자바스크립트를의 동작 원리를 보다 깊게 이해하기 위해 실행 컨텍스트에 대해 정리해보자! 실행 컨텍스트를 알기 위해서는 먼저 콜 스택에 대해서 알아야 한다. 콜 스택 우선 스택은 위와 같이 하나하나 차례대로 쌓고 빼고를 반복하는 자료구조다. 콜 스택은 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하여 코드의 실행 순서와 환경을 관리한다. 현재 실행중인 코드의 실행 컨텍스트가 콜 스택의 최상위에 존재한다! 이런 콘텍스트를 실행 중인 실행 컨텍스트 (running execution context)라고 한다. 그럼 컨텍스트가 뭐길래 콜 ..

참조형 데이터 먼저 자바스크립트의 데이터 타입 중 참조형으로는 이런 것들이 있다. Object Array 함수(function) Date 정규표현식 Map, Set 자료 구조 + null도 object 타입! 참조형 타입들은 아래와 같은 형태로 값을 참조하고 있다. 실제 객체 내 프로퍼티들이 담긴 주소 값들을 데이터로 갖고 있는 주소 값!.. 을 복사해서 참조하고 있기 때문에 참조형이라고 부른다. 1. obj1을 위한 별도의 데이터 영역 안의 프로퍼티들은 또 그 안에서 각각의 메모리를 할당받고 있다. (위의 주소 7103~7104 부분) 2. 데이터 영역 안에 프로퍼티들의 주소 값이 별도의 메모리 할당을 받는다. 3. obj1은 2의 주소 값을 참조한다. 결국 기본형과의 차이는 기본형은 값을 가리키는 주..

검색 기능을 만들다 보니.. 이렇게 구글에서 추천 검색어를 띄워주는 걸 만들면 좋겠다 싶었다. 완벽한 검색 기능을 만들 순 없겠지만!.. 일단 첫 글자라도 일치하는 모든 데이터를 가져와 보기로. filter 메서드를 통해서 걸러오면 되는데, 한글은 영문이 아니기 때문에 toLowerCase 같은 메서드를 사용하지 않아도 된다. 필터링된 해수욕장들을 li 태그 안에 넣는 작업을 거친다. 그리고 DOM 작업을 좀 거치면 이렇게 첫 글자가 일치하는 해수욕장들이 뜬다! +++ 완성 후 검색어가 가나다순으로 정렬되었으면 좋겠다는 피드백이 있었어서 추가 작업을 진행했다. 아래에서 볼 수 있다. https://i-ten.tistory.com/187 에러 수정 삽질 기록 (3) 지난 글 (https://i-ten.ti..

먼저 JSON 파일에서 데이터를 가져와서 필요한 형태로 가공해야 하는데... 배열 안의 객체 형태였고, 당시 이런 형태를 별로 다뤄본 적이 없었다. 내가 필요한 형태는 beach-num과 name을 매치시켜서 배열에 name만 쭉 가져오고 싶었다. 그리고 한참 동안 배열 메서드로만 삽질을 하는데 ( . . .) 그러다 mdn 문서를 보고 깨달았다. 아.. 구조 분해 할당을 사용해야 하는구나.. 🥹 Object.entries에 대한 페이지를 쭉 보다 보면, entires 메서드를 구조 분해 할당을 이용해서 key, value 값으로 가져올 수 있다는 걸 알 수 있다. 좋아 그럼 나도 이제 써보자..🥹 파일에 저장된 데이터를 다시 json화 해서 값만 가져온 뒤, entires 메서드를 이용해서 beachN..