STUDY/JavaScript32 일급객체(First Class Object) , 일급함수(First Class Function) 란? 일급 객체 (일급 함수) 란? 프로그래밍 언어에서 함수를 값으로 다룰 수 있는 특성을 가진 함수를 말한다. 이는 함수를 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환 값으로 사용 할 수 있는것을 의미한다. 일급함수를 가진 언어에서는 함수가 일반적인 데이터 타입처럼 취급 된다. 이는 함수를 생성하고 조작하고 전달하는 데, 좀 더 자유롭고 유연한 프로그래밍 스타일을 가능하게 한다. 1. 변수에 함수 할당 함수를 값으로 취급하여 변수에 할당 할 수 있다. const add = function (a, b) { return a + b; }; 2. 함수를 인자로 전달 함수를 다른 함수의 인자로 전달할 수 있다. function calculate(operation, a, b) { return ope.. 2023. 7. 4. [TypeScript] Partial ,Pick , Omit 차이 Partial 이란? 유틸리티 타입으로, 특정 타입의 부분 집합을 정의 할 수 있다. Partial 타입 예제 코드 type Partial = { [P in keyof T]?: T[P]; } type Person = { name: string; age: number; address: string; } type PartialPerson = Partial; // PartialPerson은 // { // name?: string; // age?: number; // address?: string; // } // 과 같이 정의 된다. Pick 이란? 특정 타입에서 특정 값만 뽑아 새로운 타입으로 정의 할 수 있다. Pick 타입 예제 코드 type Pick = { [P in K]: T[P]; } type Per.. 2023. 2. 2. [TypeScript] TypeScript 할때, DT와 TS의 차이! (별로 쓸데없음 주의) DT 와 TS 의 차이 DT this package has typescript declarations provided by @types/000 이 패키지에는 @types/000 에서 제공하는 타입스크립트 형식이 따로 있다 라는 얘기다. DT로고를 한번 더 클릭해주면 해당 types 패키지 파일로 이동을 할 수 있다. 두개의 패키지를 내려받아야 한다. $ yarn add bcryptjs @types/bcryptjs TS this package conyains built-in TypeScript declarations 해당 패키지에는 기본적으로 ts가 선언 되어있다. 라는 뜻이다. 추가적인 패키지를 내려받을 필요가 없다. $ yarn add class-validator 이상 쓸데 없는 지식이었다고 한다. 2023. 1. 2. [JavaScript] Array.prototype.reduce() | 리듀서 함수 Array.prototype.reduce() 배열의 요소들을 하나의 결과 값을 반환합니다. let arr =[ 1, 2, 3, 4 ]; console.log( arr.reduce((a,b) => a + b) ); // 10 console.log( arr.reduce((a,b) => a - b) ); // -8 리듀서 함수는 4개의 인자를 가진다. 누산기 (acc) accumulator → 콜백의 반환 값을 누적한다. 콜백의 이전 반환 값은 initialValue 이다. 현재 값 (cur) currentValue → 처리해야 할 요소 값. 현재 인덱스 (idx) → 처리해야 할 현재 요소의 인덱스. initialValue 를 제공한 경우 0, 아니면 1이다. 원본 배열 (src) array → reduce.. 2022. 12. 2. [JavaScript] 서버사이드 렌더링 개념정리 서버사이드 렌더링 개념정리 출처 [ https://www.youtube.com/watch?v=iZ9csAfU5Os ] Sites history Static Sites ( 1990s ) 서버에 html 문서를 저장하고, 도메인 주소로 접속 시 , 그 html 문서를 보여주는 형식. 문제점 페이지 내의 다른 링크를 클릭 하면 서버에서 다시 해당 페이지 html 문서를 받아와서 업데이트를 해 출력 해주기에 사이트가 클 수록 사용성이 떨어진다. iframe ( 1996 ) 문서 내에서 또 다른 문서를 문서를 담을 수 있는 iframe 태그가 도입이 되었다. 부분적으로 문서를 받아와서 업데이트를 할 수 있게 되었다. XMLHttpRequest ( 1998 ~ ) fetchAPI의 원조이다. HTML 문서 전체가 .. 2022. 11. 28. [JavaScript] Array(배열) JS 함수 정리(2) 배열(Array) 이란? 배열은 연관된 데이터를 모아서 관리하기 위해서 사용되는 데이터 타입. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 저장하기 위한 것이라고 할 수 있다. 배열은 순서가 있는 값들을 의미 한다. 배열의 값은 요소(element) 이다. 배열의 순서는 인덱스(index) 이다. 배열의 순서는 0부터 시작한다. 배열의 정의는 대괄호 [] 로 한다. 배열 안에 요소는 쉼표로 구분한다. 배열에 접근하는 방법 배열을 조회 하려면 index 를 이용한다. // 두번째 인덱스 번호 값을 가지고 온다. let array = [1,2,3,4,5]; console.log(array[2]) // 3 // 세번째 인덱스 번호 값을 변경 array[3] = 200 console.. 2022. 11. 28. [JavaScript] 문자열 함수 실행 eval() , new Function() eval() eval()은 문자로 표현된 JavaScript 코드를 실행하는 함수이다. MDN 사이트를 확인해보면 해당 문제로 사용을 권장하지 않는다. 절대 사용하지 말라는 문구까지 사용 할 정도이다. 그럼 eval()의 대체를 알아보자 new Function() 새 함수 객체를 만든다. 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 eval과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수 있다. 하지만 eval과 달리, Function 생성자는 전역 범위로 한정된 함수만 생성하기에 대체로 사용한다. const icon1 = 'hi1' const icon2 = 'hi2' const icon3 = 'hi3' const icon4 = 'hi4' for(let i = .. 2022. 11. 27. [JavaScript] ID , Class 제어 Element.id Element.className Element.id 요소의 식별자를 나타내며, HTML의 전역적인 id 속성을 반영한다. Element.ClassName 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다. 사용 방법 Element.id = '아이디명' Element.className = '클래스명' 2022. 11. 27. [JavaScript] 속성값 제어 Element.setAttribute() Element.setAttribute() 지정된 요소의 속성 값을 설정한다. 속성이 이미 있는 경우 값이 업데이트가 된다. 그렇지 않으면 지정된 이름과 값으로 새 속성이 추가된다. 사용 방법 Element.setAttribute("className", "클래스명"); Element.setAttribute("id", "아이디명"); Element.setAttribute("name", "이름"); Element.setAttribute("href", "#"); 2022. 11. 27. 이전 1 2 3 4 다음 728x90
