목록Javascript TIL (28)
coding etude
고차 함수 (HOF : Higher order function) : 다른함수를 인자(argument)로 받거나 다른 함수를 리턴하는 함수. @first class citizen(1급 시민의 조건) - 변수에 할당(assignment) 할 수 있다. - 다른 함수에 인자(argument)로 전달 할 수 있다. - 다른 함수의 결과로 리턴 할 수 있다. ※javascript에서는 함수도 1급 객체이다. @함수가 1급객체인 것이 중요한 이유. - 함수를 전달 할 수 있다는 것은 인자로 조건에 맞는 함수를 넣어주면 작업이 쉽게 처리되기 때문이다. ※함수 선언식과 표현식의 차이점. // 호이스팅을 제외하면 실행의 차이는 없으나 함수 표현식은 함수의 할당과 실행 위치가 중요하기 때문에 코드의 위치가 어느정도 예측 ..
DOM(Document Object Model) : javascript 를 이용하여 html 에 접근해 html을 조종 할 수 있는 model 1. 부모와 자식이 존재하는 트리구조의 html - 부모와 자식의 관계를 이해하고 찾을 수 있어야 한다. ※트리구조(tree strucment)에서 하위요소를 가지고 있다면 부모, 상위 요소를 가지고 있다면 자식, 동일한 부모를 가지고 있다고 있다면 형제의 구조를 가지고 있다. - 자식(children) 찾기 : document.부모.children // 부모 element에 속해 있는 자식 element 를 모두 찾을 수 있다. - 부모(parent) 찾기 : 변수에 자식객체를 선언한 후 변수.closest(조건) 을 이용하여 조건에 해당하는 부모를 찾을 수 있..
html(HyperText Markup Language) : 웹페이지의 틀을 만드는 마크업 언어 // tag들의 집합. 1. 태그(tag) : 태그 란 로 묶여있는 html의 기본구성요소. 태그를 열면 꼭 동일한 태그로 닫아주어야 한다. (tree structure/ 트리구조) 한줄을 모두 사용한뒤 줄바꿈한다. 내용이 끝나도 줄바꿈 하지 않고 연속 입력이 가능하다 내용(text)을 bold 시킨다. 줄바꿈을 진행 하이퍼 링크를 지정 숫자의 따라 text 의 크기가 지정된 text를 출력한다. 6까지 있다. 클릭할수 있는 버튼을 만든다. text를 강조(이테릭체로 변경) 한다. 주제 변경 시 단락 표시(하나의 선을 출력한다.) 외부 사이트를 참조해서 출력하는것 (ex 지도) 이미지를 삽입한다. type에 ..
[객체 지향 프로그램 Javascript] : 객체란(Object) 물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 속성(property)을 가지고 있으면서 식별이 가능한 것을 말합니다. 예를들어 자동차, 자전거 책, 사람 또, 추상적인 강의, 주문 등도 객체가 될 수 있습니다. 객체는 속성과 동작(method)로 구성이 되어 있습니다. 사람의 속성은 이름, 나이 , 키 , 몸무게 등이 될 수 있고 동작은 걷다, 먹다, 웃다 등을 예로 들수 있습니다.차(Car)로 비교 한다면 모델명, 색상, 바퀴, 기어, 등의 속성을 가지고 달린다, 멈춘다 와 같은 동작을 가지고 있을수 있겠죠? javascript 에서는 이러한 프로퍼티와 메소드를 가지고 현실 세계의 객체를 소프트웨어 객체로 설계하고 구동하게 ..
[TDD ( Test Driven Development] 해석 그대로 테스트가 개발을 주도해 나간다는 개발론으로, 보통 개발의 순서를 보면함수설계 -> 코드 작성 -> 수등 테스트위의 과정을 거치면서 진행 된다.하지만 개발 이후에 업데이트를 및 보수 등을 하기 위해서 어느 한부분을 변경했을 때 어떤 문제가 발생 할 수 있을지 아무도 모르고 또 오류를 수정하기 위서 많은 시간과 비용이 들어가게 된다.하지만, 처음 개발과정 부터 테스트를 진행하면서 원하는 값을 도출해 가며 개발을 한다면 조금 더 모듈화가 잘 될 수 있고 더욱 명료한 코드가 작성이 가능하다고 한다..그래서 이 TDD를 활용하여 함수설계 -> 테스트 코드 작성 -> 코드 작성 다음과 같은 과정을 거친다면 후에 발생 할 수 있는 오류와 문제점 등..
[scope] : scope는 javascript 변수의 접근가능 범위를 말하는 것입니다. scope는 크게 두 가지 종류가 있는데 global scope(전역 스코프) 와 local scope(지역 스코프) 입니다. [global scope( 전역 범위 )] : 변수가 함수 바깥으로 선언 되거나 { } 바깥에 선언 되면 global scope 에 해당 합니다.global scope에 선언된 변수는 언제든 참조가 가능하고 값을 재설정 할 수 있습니다. 심지어 함수 안에서도 사용이 가능합니다.( 전역 변수 )하지만, global scope 에는 변수를 선언 않는것이 좋습니다. 두 개 이상의 변수선언으로 충돌이 나거나(const / let 으로 선언 시) 값의 재설정(var 로 설정 시)으로 오류가 날수 있..
essential map() : 배열 내의 모든 요소각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환. filtet() : 주어진 함수의 조건을 모두 통과하는 요소를 모아 새로운 배열을 반환. reduce() : 배열의 각 요소에 대해 주어진 함수를 실행하고 하나의 결과값을 반환 // reduce 는 누적값, 현재값 중 하나를 가지고 시작할 수있고 초기값이 있을경우 초기값이 누적값이 되고 현재값이 첫번째 요소가 된다.[ ※ 초기값이 없다면 1번 인덱스에서 시작하고 0번 인덱스는 건나뜀.]ex)const array1 = [1, 2, 3, 4];const reducer = (누적값, 현재값) // 1 + 2 + 3 + 4 output : 10 (누적감 + 현재값) forEach() : 주어..
essnetial .split() : 문자열을 분할 () 안에 분할 기준을 넣는다. .reverse() : 배열의 순서를 거꾸로 바꾸는 역할..join() : 배열의 요소를 넣는 값을 기준으로 합치는 역할.indexOf() 문자열의 요소를 넣으면 index 값을 리턴 배열: 배열은 [ ] 를 사용하고 index 순서대로 데이터를 저장한다. 배열값 접근arr[index] 를 사용하여 index에 해당하는 배열값을 확인 할 수 있다 배열에 값 추가 하기.shift / .unshift : 배열의 첫번째 값을 삭제/추가 하는 메소드.pop / .push : 배열의 마지막 값을 삭제 / 추가 하는 메소드 배열에 값 추가 하기 (update)arr[index] = 값 객체: 객체는 { }를 사용하고 각 요소가 ke..