FrontEnd(54)
-
[JavaScript] JavaScript 함수형 프로그래밍
1. 함수형 프로그래밍 Simple is the Best! 즉, 기능 동작을 위해 간단하고, 간결하고, 간소하게 작성하는 방법론 함수형 프로그래밍은 객체지향 프로그래밍과 비교되는 방법론으로 객체지향 프로그래밍에 비해 더 간결하고, 더 예측 가능하고, 더 테스트하기 쉬운 경향이 있다. 단, 이 장점들이 단순히 함수형 프로그래밍이 객체지향 프로그래밍에 비해 더 쉽다는 것은 아니다. 2. 함수형 프로그래밍의 3대 개념 ① 순수 함수(Pure Function) ② 불변성(Immutable state) ③ 1급 객체(First-class) 3. 순수 함수(Pure Function) - 같은 입력 값이라면, 항상 같은 결과 값을 반환한다. - 외부적인 것에 영향을 받지 않는다. - 예측이 가능해야 한다. 4. 불변..
2023.02.08 -
[JavaScript] DOM 노드 읽기, 탐색, 추가, 삭제
1. DOM 노드 - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델 - 브라우저의 문서에 객체(태그)를 의미 2. DOM 노드 읽기 - 노드 읽기 : 문서에 DOM 노드(객체)를 가져와 자바스크립트에서 읽거나 사용 getElementById() 요소에 지정된 id를 통해 객체를 가져옴 getElementsByTagName() 요소에 태그명을 통해 객체를 배열로 가져옴 getElementByName() 요소에 이름을 통해 객체를 배열로 가져옴 getElementByClassName() 요소에 지정된 클래스명을 통해 객체 배열을 ..
2023.02.08 -
[JavaScript] 문서 객체 모델(DOM)
1. 문서 객체 모델(DOM) - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델 - DOM 트리 구조 : 웹 문서의 요소를 부모와 자식 요소로 구성된 트리 구조 2. 여러 DOM 노드 https://en.wikipedia.org/wiki/Document_Object_Model 문서 노드(Document Node) - 트리의 최상위 존재하며, 하위 자식 노드에 접근하기 위해선 반드시 Document Node를 통해야만 한다. - DOM 트리에 접근하기 위한 시작점 요소 노드(Element Node) - 웹 문서의 태그 Eleme..
2023.02.08 -
[JavaScript] JavaScript Array 객체
1. Array 객체 생성 let arr = [값1, 값2, ...]; -> 생성과 동시에 초기화 let arr = new Array(); -> 배열을 생성하기만 함 let arr = new Array(배열크기); -> 생성과 동시에 공간을 만들어 둠 2. 주요 메소드 pop() arr.pop(); 배열의 마지막 요소를 제거 후 리턴 push() arr.push("안녕"); 배열의 마지막에 새로운 요소 추가 reverse() arr.reverse(); 배열의 요소 순서 반전 sort() sort((a ,b) => {return a - b} sort((a ,b) => {return b - a} arr.sort(); arr.sort((a ,b) => {return a - b}; arr.sort((a ,b) ..
2023.02.08 -
[JavaScript] typeof / instanceof, String 객체
1. typeof, instanceof - typeof : 피연산자의 데이터 타입을 반환하는 타입 연산자 - instanceof : 객체가 특정 객체 타입인지 확인하는 비교 연산자 2. String 객체 let str = "가나다"; -> String 변수 let str = new String("가나다"); -> String 객체 3. String 객체 주요 메소드 charAt(position) str1.charAt(1); 해당 인덱스 문자 반환 charCodeAt(position) str1.charCodeAt(1); 해당 인덱스 문자를 유니코드로 반환 concat(args) str1.concat("1234"); 매개변수로 입력한 문자열을 결합 indexOf(search, position) str1.in..
2023.02.08 -
[JavaScript] JavaScript 내장 객체, Object 객체, Number 객체
1. 내장 객체 - 브라우저의 자바스크립트 엔진에서 내장하고 있는 객체 - 우리가 만든 객체가 사용자 정의 객체가 아닌 자바스크립트에서 미리 만들어 놓은 객체를 의미 - 밑에 처럼 내장 객체의 종류는 어마무시하게 많다. AggragateError, Array, AsyncFunction, Atomics, BigInt, BingInt64Array, BigUinit64Array, Boolean, DataView, Data, Error, EvalError, FinalizationRegistry, Float32Array, Float64Array, Function, Generatior, GeneratorFunction, Infinity, Int16Array, Int32Array, Int8Array, Intermal..
2023.02.08