프론트엔드/JavaScript
-
자바스크립트 고차함수 - filter()프론트엔드/JavaScript 2020. 10. 3. 09:08
filter 메서드란? filter메서드란 해당 메서드를 호출한 배열에서 특정 조건을 제외한 나머지로 새 배열을 만든다. Map 메서드는 원래 있던 배열을 그대로 복사하거나 요소들의 값만 살짝 바꿔서 새 배열을 만든다. 하지만 filter 메서드는 if문을 쓰는 것과 같다. 복사 대상이 되는 배열에서 조건에 맞는 요소만 추려서 새로운 배열을 만드는 것이다. 코드를 보면 다음과 같다. 위에서 보면 알겠지만 return을 할 때 조건을 정해주면 해당 조건에 true값을 걸러 그 값으로 새로 배열을 만든다. 즉 조건의 값이 true, 1인 경우 그 값이 새로운 배열의 대상 값이 되는 것이다. filter 메서드 또한 forEach와 Map과 마찬가지로 filter의 인자로 제공되는 함수는 filter 메서드를..
-
자바스크립트 고차함수 - Map()프론트엔드/JavaScript 2020. 10. 3. 07:32
Map 메서드란? for 문을 대신할 수 있는 메서드로 forEach뿐 아니라 Map()도 있다. forEach 메서드는 for를 대체하여 배열을 순회시키며 어떤 동작을 반복하기 쉽게 한다. 반면 Map 메서드는 for문을 대체하여 배열을 순회시키며 새로운 배열을 만든다. 즉 특정 배열을 복사하기 쉽게 만든 것이 Map() 메서드다. 기존 for문을 이용한 배열 복사는 위 코드와 같다. 배열을 별도로 선언하고 내용을 복사해주는 식이다. forEach를 써도 배열을 따로 선언하고 복사해야해서 번거롭다. Map 메서드를 쓰면 for문이나 forEach 메서드보다 편하게 배열을 복사할 수 있다. Map 메서드는 인자로 받는 함수의 인자로 Map메서드를 호출한 배열의 요소, 인덱스, 배열 그 자체를 전달받을 수..
-
자바스크립트 고차함수 - forEach()프론트엔드/JavaScript 2020. 10. 3. 05:03
forEach() 메서드란? for 문을 대체할 수 있는 메서드이다. 배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백 함수를 실행한다. 이때 반환값은 undefined다. 콜백 함수의 매개변수를 통해 배열의 요소 값, 인덱스값, forEach를 호출한 배열 그 자체를 전달받을 수 있다. 간단하게 사용법을 보면 다음과 같다. 일반적인 for문을 사용하면 위와 같다. forEach를 써주면 위와 같다. forEach 메서드는 함수를 인자로 받으며 배열을 통해 호출할 수 있다. 그리고 불러낸 함수는 배열의 요소, 인덱스, 배열을 인자로 제공받을 수 있다. forEach 뜯어보기 조금 더 콜백함수를 뜯어보면 다음과 같다. forEach 메서드는 호출한 배열이 가진 요소의 숫자만큼 실행된다. 그 과정..
-
자바스크립트 고차함수 - Sort(), reverse()프론트엔드/JavaScript 2020. 10. 3. 02:56
sort(), reverse()의 문제점 자바스크립트에서는 배열을 정렬하는 Sort()라는 메서드가 있다. 이 메서드를 이용하면 위 코드처럼 유니코드에 의거해서 배열의 요소들을 오름차순에 따라 정렬한다. 내림 차순으로 정렬하고 싶을 땐 reverse() 메서드를 사용하면된다. 그런데 뭔가 좀 이상하다. 숫자 배열의 경우 해당 숫자를 숫자로서 비교하는 것이 아니다. 유니코드로 변환하여 문자열처럼 비교하므로 결과가 이상하게 나온다. 배열이 문자열일때는 괜찮은데, 숫자 배열의 경우 단순 sort(), reverse()로는 정렬에 오류가 난다. 고차함수를 활용한 sort 활용법 이럴 때는 고차함수를 활용하여 sort 메서드의 정렬 기준을 다시 설정해주면 된다. 우선 코드를 보자. 위 코드를 보면 sort() 메..
-
고차함수(Higher-Order Function)에 대해서프론트엔드/JavaScript 2020. 9. 22. 00:15
함수형 프로그래밍(Functional Programming)이란? 함수형 프로그래밍은 자료의 처리를 함수의 계산으로서 취급하는 프로그래밍의 한 형태다. 기존의 프로그래밍이 직접 손으로 짜거나 불완전한 구조였다면 함수 프로그래밍은 함수를 적극 활용하여 외부 입력에 따라 결과가 달라지거나 하는 등을 지양하는 프로그래밍이다. 이때 사용되어야 하는 함수는 함수의 결과가 프로그램의 상태를 바꾸지 않고 함수의 결과값은 오로지 함수에게 주어진 입력된 인수에만 의존해야 한다. 또한 결과값은 항상 일정해야 한다. 고차 함수(Higher-Order Function)란? 함수형 프로그래밍을 하다보면 그 중 하나인 고차 함수를 쓰게 된다. 그리고 이 고차 함수의 조건은 다음과 같다. ● 하나 이상의 함수를 인수로 취할 수 있..
-
자바스크립트 배열(Array)프론트엔드/JavaScript 2020. 9. 21. 04:22
배열(Array)이란? 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바 스크립트의 배열은 객체이며, 유용한 내장 메소드를 가졌다. 이때 자바 스크립트 배열은 다음과 같은 특징을 갖는다 1. 배열 요소의 타입이 고정되지 않아 한 배열 안에도 배열 요소의 타입이 다를 수 있다. 2. 배열 요소의 인덱스가 연속적이지 않아도 되고, 특정 배열 요소가 비어있을 수 있다. 3. 자바 스크립트에서 배열은 Array 객체로 다뤄진다. 배열의 생성 1. 배열 리터럴 let animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; 리터럴 방식으로 배열을 만들 땐 대괄호 ( [ ] ) 안에 ( , ) 쉼표 기준으로 요소들을 써넣으면 된다. 2. 생성자를 이용한 배열 let worl..
-
Object의 분류 - 네이티브 객체, 호스트객체프론트엔드/JavaScript 2020. 9. 21. 02:01
Object는 앞서 말했듯 자바스크립트에서 굉장히 중요한 개념이다. 그런데 이 Object의 구조나 분류 등은 자바스크립트 상황에 따라서 달라진다. 다만 대체로 보면 ECMAScript에 따른 분류를 보면 다음과 같다. 네이티브 객체 네이티브 객체(Native Object)는 애플리케이션 전역의 공통 기능을 제공한다. 네이티브 객체는 어느 애플리케이션이든 관계없이 사용이 가능하다. Object, String, Number, Function, Array, RegEXP, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성된다. 네이티브 객체를 'Global Object'라고도 부르는데, 이것은 전역 객체(Global Object)와는 다른 개념이다. 네이티브 객체의 종류는 다음과 ..
-
기본자료형/객체 비교하기, 타입 확인하기프론트엔드/JavaScript 2020. 9. 19. 06:29
타입 확인하기와 자료 비교하기 C언어,자바는 코드 작성 중 변수에 데이터를 할당할 때 사용자가 직접 자료형을 지정해야 한다. 반면 자바스크립트의 경우 사용자가 변수에 데이터를 할당할 때 자료형을 따로 지정하지 않는다. 컴파일 과정에서 알아서 코드의 내용에 따라 데이터타입이 지정되는 동적 타이핑에 따른 결과다. 하지만 실제로 코드를 작성하다보면 자료형을 비교하거나 타입을 확인해야할 때가 있다. 그럴 때는 어떻게 해야할까? 타입 확인하기( typeof ) 타입을 확인할 때는 'typeof' 명령어를 써주면 된다. typeof + 변수명 위와 같이 명령어를 써주면 해당 변수가 가진 데이터의 데이터형을 확인할 수 있다. 객체 확인하기 ( instanceof ) 'typeof' 를 사용하면 변수가 가진 데이터의 ..