흰둥씨의 개발장

##이번장의 핵심 내용 : 배열을 다루기 위한 함수형 도구 알아보기 1. 함수형 도구 : map(); [1,2,3,4,5].map((item) => { //여기서 사용한 콜백함수를 "사용할 곳에서 바로 정의한 익명함수(=인라인함수)" return item + 1; }) //[2, 3, 4, 5, 6] ㄴ 배열에 null이나 undefined를 미리 거르고 싶은데 map()은 그게 안되네 => filter()를 쓰자 2. 함수형 도구 : filter(); [1,2,3, null, undefined, 4,5].filter(item => item !== null && item !== undefined) //filter함수 안에 '술어(true, false를 리턴하는 함수)'를 넣음 // [1, 2, 3, 4,..

일급함수(first-class function) ? 함수를 "일급객체"로 여긴다는 의미 일급 객체 ? 아래 조건 만족하는 객체 1. 무명의 리터럴로 생성할 수 있음. (런타임에 생성가능하다) 2. 변수나 자료구조(객체, 배열등)에 저장 가능. 3. 함수의 매개변수에 전달 할 수 있음 4. 함수의 반환값으로 사용가능 자바스크립트의 함수는 위 조건을 모두 만족하기 때문에 일급객체 임 ㄴ 함수를 객체와 동일하게 쓸 수 있다는 뜻 ㄴ 객체는 값이기 때문에 함수도 값과 동일하게 취급 ㄴ 함수는 값을 사용할 수 있는 곳은 어디든 리터럴로 정의가능하고, 런타임에 함수 객체로 평가됨 ㄴ 일급객체 함수의 특징 : 일반 객체처럼 함수의 매개변수로 전달 가능 / 함수의 반환값으로 사용가능 (고차-콜백함수생김) => 함수형 ..

계층형 설계 : 소프트웨어를 계층으로 구성하는 기술 => 추상화 //계층형 설계 getsFreeShopping(); cartTax(); //비즈니스 규칙 \ | removeItem(); calcTotal(); addItem(); setPrice(); // 장바구니를 위한 동작들 | / | remove_items(); add_item(); | //카피온 라이트 | / | .slice(); --------------------------| //언어를 지원하는 배열관련기능 계층형 설계감각을 키우기 위한 입력 단서 함수본문 계층구조 함수시그니처 길이 화살표 길이 함수명 복잡성 응집도 인자이름 구체화 단계 구체화 단계 인자값 함수 호출 리턴값 프로그래밍 언어의 기능 사용 계층형 설계 감각을 키우기 위한 출력 조직..

클린코드란 무엇인지에 대해 생각하게 됨 ⇒ 결국 말하고자 하는 바가 프로그램의 재사용성 높이고, ⇒ 테스트단계에서 에러를 잡아내기 용이하도록, ⇒ 가독성이 좋은 코드로 유지 보수에 용이하도록, ⇒ 성능향상도 생각해보기 등… 하는 것의 일환 아닌가! 비즈니스 요구사항과 동작 코드를 분리하는 것 (추상화) 액션, 계산, 데이터로 나누어 생각하는 것 (가독성측면?) 액션보다는 계산을 주로 사용하기(암묵적 입 출력을 명시적 입 출력으로 바꿔서 / 테스트 용이하도록) 하나의 함수가 하나의 일을 수행하도록 설계하기(단일책임) 원본 데이터 보존하고, 변경 사항은 복사본 만들어 리턴 하기 (카피 온 라이트, 원본데이터를 계속 변경하면 결합도가 높아짐...) 전역변수 가급적 사용하지 말 것 (모듈화, 독립성 높이는 것)..

동작을 읽기, 쓰기 , 읽기쓰기 로 분류하기 1. 읽기 : 데이터를 바꾸지 않고 정보를 가져오는 것 / 데이터가 바뀌지 않기 때문에 다루기 쉬움 2. 쓰기 : 데이터를 바꾸는 것 / 바뀌는 값은 어디서 사용될 지 모르기 때문에 바뀌지 않도록 원칙 필요 (=> 불변성 원칙 필요) 예시) 장바구니 동작 과정을 읽기, 쓰기로 나눠보기 ㄴ읽기/ 제품 개수 가져오기 ㄴ읽기/ 제품이름으로 제품가져오기 ㄴ쓰기/ 제품 추가하기 ㄴ쓰기/ 제품이름으로 제품빼기 ㄴ쓰기/ 제품이름으로 제품 구매수량 바꾸기 쓰기에서 필요한 불변성 원칙 : 카피 온 라이트(copy-on-write) ㄴ자바스크립트는 불변성 적용하려면 직접 구현해야함 카피 온 라이트의 원칙 1. 복사본 만들기 2. 복사본 변경하기(원하는 만큼) 3. 복사본 리턴하..

javascript의 sort는 자바스크립트의 sort가 아닌 "브라우저엔진의 sort"임 => ECMAscript에서 정렬 알고리즘을 규제하고 있지 않고, 브라우저 벤더사에 정렬 알고리즘을 맡겨서, 실행브라우저마다 결과 다를수 있음 ㄴChrome70(2018.10배포버전)은 Timsort (그전에는 삽입정렬(10개이하)과 퀵정렬(10개초과)을 동시 사용했음) ㄴMozilla는 병합정렬 ㄴsafari는 선택정렬 아래의 예시는 브라우저사마다 발생할수있는 에러 없이 사용할수 있는 정렬방뻐 단순 숫자열 정렬시 data.sort(); // [1, 10, 11, 2, 20, 22, 30, 40] //자바스크립트의 정렬은 앞자리부터 비교하기 때문에 위와 같은 결과 나옴 data.sort((a,b)=> a - b);..

1) 일급객체 1. 무명의 리터럴로 생성할수 (=런타임에 생성가능) 2. 변수나 자료구조(객체, 배열...)에 저장할 수 있음 3. 함수의 매개변수에 전달가능 4. 함수의 반환 값으로 사용가능 위 조건을 만족하는 객체는 "일급객체" 자바스크립트의 함수는 일급객체임 함수의 특징 1. 함수를 객체와 동일하게 사용할 수 있음 2. 객체는 값이므로 함수도 갑과 동일하게 취급 = 값을 사용할수 있는 곳이라면 어디든 리터럴로 정의가능 3. 함수는 런타임에 객체로 평가됨 => JS의 함수는 일반객체와 같이 매개변수 전달 가능, 함수의 반환값으로 사용가능 해서 '함수형 프로그래밍' 가능 함수와 객체의 차이 1. 일반객체는 호출불가, 함수는 호출가능 2. 함수객체는 일반객체에 없는 고유의 프로퍼티를 가지고있음 2) 함수..

리팩토링 => 재사용 유지보수,테스트를 쉽게 하기 위해 하는 것 0. 중복된 코드가 없을수록 GOOD 1. 암묵적 입력과 암묵적 출력은 적을수록 GOOD(계산 뿐 아니라 액션에도 적용되는 내용) ㄴ 암묵적 입력 : 인자가 아닌 모든 입력 => 인자로 바꾸자 ㄴ 암묵적 출력 : 리턴값이 아닌 모든 출력 => 리턴값으로 바꾸자 2. 함수를 작은 단위로, 한개의 함수가 1개의 일을 하는 것이 좋음 ㄴ 재사용, 유지보수, 테스트 면에서 쉬워짐 ㄴ 카피-온-라이트 패턴을 빼내기 (아래 예시 참고) //카피온 라이트를 빼내기 전 function add_item(cart, name, price) { let new_cart = cart.slice(); // 1. 배열 복사 new_cart.push({ // 2. 복사..

절차적 방법 구현 ? 순차적 처리를 중요시 함 (컴퓨터가 처리하는 방향대로 코드를 작성함) ㄴ단점 : 순서 바꾸면 결과 값 이상해질 수 있음 / 유지 보수 어렵다고 하고 코드가 길어질수록 가독성이 떨어짐 (대형 프젝 부적합함) 액션이 뭘까? ㄴ 외부에 영향을 줄 수 있는 것 (ex. 전역변수, DOM에서 읽고, 바꾸는 것) ㄴ 액션이 하나만 있어도 그 함수 전체가 액션이 됨 ㄴ 부수효과가 있는 함수 ㄴ 암묵적 입력 : 인자외 다른 입력 (부수효과) ㄴ 암묵적 출력 : 리턴값 외 다른 출력 (부수효과) 함수의 입력과 출력 ㄴ명시적 입력 : 인자 ㄴ명시적 출력 : 리턴값 ㄴ함수에 암묵적 입력과 암묵적 출력이 있으면 액션이 됨 ㄴ암묵적 입력을 명시적입력(함수의 인자)으로/ 암묵적 출력을 명시적출력(리턴값)으로..

액션 : 실행시점과 횟수에 의존함 (ex)이메일 보내기, 데이터 베이스 읽기 계산 : 입력과 출력을 계산함, 어떤 일을 결정하는 것 (ex) 최댓값 찾기, 이메일 주소가 올바른지 확인하기 데이터 : 이벤트에 대한 사실 (ex) 사용자가 입력한 메일주소, 은행 API로 읽은 달러 수량 1. 문제에 대해 생각할 때 ㄴ 코딩 시작전, 문제 고민단계에서도 문제를 액션, 계산, 데이터로 나눠볼 수 있음 2. 코딩할 때 ㄴ액션과 계산과 데이터를 분리해서 코드작성하도록 고민할 것 3. 코드 읽을 때 ㄴ액션은 시간에 의존하기 때문에 ㄴ숨어있는 액션까지 잘 파악하고, 계산, 데이터로 나눠지지 않은 부분을 리팩토링 하도록 생각해보기 ***참조 투명(referentially transparent) ? 계산의 결과값은 동일한..

생성자 함수? new연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 ㄴJS는 Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise...등의 빌트인 생성자 함수 제공 인스턴스 ? 생성자 함수에 의해 생성된 객체 1) Object 생성자 함수 ㄴnew연산자와 함께 Object생성자 함수를 호출하면 빈객체를 생성하여 반환 ㄴ빈객체 생성이후 프로퍼티 or 메서드 추가해서 객체완성가능 const people = new Object(); //생성자 함수 이용해서 빈객체 생성 people.name = 'Zzanggu'; //프로퍼티 추가 people.sayhi = function () { //메서드 추가 console.log('Hi, ..

함수형 사고 ? ㄴ1) 액션, 계산, 데이터 => 계층형 설계 ㄴ2) 일급 추상 => 타임라인 다이어그램(분산시스템을 이해하기 위해 사용), 일급함수(함수를 인자로 받음) 피자집 예시 1)번 적용예시 ㄴ액션, 계산, 데이터를 구분하고, 계층형 설계하기 ㄴ계층형 설계는 유지 보수를 잘하기 위해 사용(각 계층은 코드의 변경 가능성에 따라 나눔) 액션 - 반죽 펴기 - 피자 배달 - 재료 주문 자주바뀜 | | | | 자주안바뀜 피자 조리법 --------------- 이번주 사야 할 것 조리법 순서 ----------------- 재료 목록 JS 객체 / 배열 --------------JS 객체 / 숫자 계산 - 조리법에 나온것을 두배로 만들기 - 쇼핑목록 결정 데이터 - 고객 주문 - 영수증 - 조리법 계층..