일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- html5
- DOM
- object
- developerlife
- API
- JS
- hatso
- AI
- react
- 햇소
- 함수
- git
- next.js
- 최적화
- github
- 변수
- 선택자
- CSS
- es6
- JavaScript
- array
- dev
- ES5+
- This
- Python
- 우아한테코톡
- ES6+
- hooks
- learn next.js
- gitCLI
- Today
- Total
목록전체 글 (98)
codinghatso
화살표 함수는 ES6에서 새롭게 도입된 함수 표기 방법입니다. 기존 함수 표기방법은 function add(a,b){ return a+b; } 화살표 함수 표기방법은 let add = (a,b) =>a+b; 입니다. 화살표 함수는 몇 가지 간단한 표기 규칙이 있습니다. 규칙 조건 파라미터 0개- 빈괄호 () 반드시 표기 -()=>{} 1개- ()생략가능 - arg1=>{} 2개 이상- ()로 파라미터들을 감싸서 표기 -(arg1,arg2)=>{} return 구문사용 블록({}) 으로 코드를 감싼 경우 반환할 값이 있으면 반드시 return문으로 반환해야 함. 블록으로 감싼 코드에 return문이 없을 경우 "undefined"가 반환됨. 블록을 생략한 경우 "return" 또한 생략 가능
ES6에서 추가된 함수 파라미터를 확장하는 기능입니다. 가변 파라미터를 사용할 수 있도록 해 사실상 함수 파라미터를 무한대로 활용할 수 있습니다. 나머지 파라미터를 사용하면 함수의 파라미터 개수 별로 별도의 함수를 정의할 필요가 없어집니다. 함수 내부에서 가변 파라미터를 처리할 수 있도록 추가 파라미터 배열을 제공하기 때문에 가변 파라미터에 대한 대응도 가능합니다. // 함수 정의 방법 예 // 파라메터를 args 변수(배열)에 담아 함수 내부로 넘김 function restparams(...args) { console.log(args); } restparams(1, 2, 3, 4, 5, 6, 7, 8, 9); 파라미터 개수가 필수 파라미터 개수보다 작은 경우 나머지 파라미터는 빈 배열로 전달되며, 부족..
펼침 연산자는 변수명 앞에 마침표 3개를 연달아 붙여(...) 표시합니다. 펼침 연산자는 적용한 객체의 개별 속성, 요소를 펼쳐서 각각의 개별 요소, 또는 속성이 순서대로 적용되도록 합니다. 펼침 연산자는 확산 연산자, 또는 스프레드 오퍼레이터, spread syntax 등으로 부릅니다. let calc = function (x, y, ...restparams) { return ( x + y + restparams.reduce(function (sum, param) { return sum + param; }) ); }; let arr11 = [0, 1]; console.log(calc(-1, ...arr11, 2, ...[3])); // 배열로 넘어가는 인자들을 펼쳐 파라메터에 순서대로 적용함. let ..
한 번에 인수를 하나만 받는 함수를 커링(Curring)이라고 하며, 또는 파샬 어플케이션(partial application) 이라고도 합니다. 커링은 복잡한 파라메터를 넘겨서 복잡한 처리를 하는 하나의 자바스크립트 함수를 단순하고 읽기 쉬운 여러 개의 나누어진 부분으로 만드는 기법입니다. 커링은 n개의 파라미터를 n차 뎁스(Depth)를 가진 함수로 분리를 하는 것이다. 장점은 중간 단계까지만 실행한 결과를 변수로 받아 다음 파라미터를 다양하게 확장할 수 있기 때문에 중간 단계에서 여러 개의 인자를 넘겨 다양한 결과를 만들 수 있습니다. //unCurring function orderSet(burger, beverage) { console.log("세트: " + burger + ", " + bever..
파라미터는 함수 정의 시점에 정의하는 변수로 함수가 넘겨받는 값 들을 담기 위한 함수 내부에서 사용하는 변수입니다. 인자는 실제 함수를 호출하는 시점에 함수 호출과 함께 함수로 넘어가는 값(들)입니다. 자바스크립트는 파라미터 개수와 인자 개수가 일치하지 않아도 에러가 발생하지 않습니다. 파라미터 개수보다 인자 개수가 많을 경우 파라미터 개수만큼만 값이 전달됩니다. 추가의 인자 값은 함수 내부의 독특한 객체인 "arguments"를 통해 접근이 가능합니다. 파라미터 개수보다 인자 개수가 적을 경우 남는 파라미터에는 "Undefined"가 전달됩니다. 이런 경우를 위해 기본 파라메터 값을 정해줌으로써 인자 값이 전달되지 않으면, 기본 값이 대신 사용되도록 해 에러 발생 가능성을 현저히 낮출 수 있습니다. 기..
특정 실행문을 지정된 횟수만큼 여러 번 반복해야 할 때 사용하는 구문 중 하나입니다. 루프(Loop), 순환문 이라고도 합니다. for문은 조건에 충족하는 지정 횟수만큼 반복 실행하는 획수가 정해진 반복문입니다. 기본구조 for(시작값; 조건문; 간격조건){ //실행 구문 } for 루프문의 의미는 "시작 값에서 시작해 조건문의 조건을 충족(true)하는 동안, 간격 조건만큼 값을 순차적으로 증가시키면서 //실행 구문을 반복 실행한다."입니다. 기본 for 문부터 of, in, Each의 사용 예시입니다. *객체 friends를 공유하며 i=0으로 반복문에 사용됨 i를 구문이 끝날 때마다 초기화시켜준 모습입니다. //for 순환문 출력 예 let friends = [ { name: "라이언", age: ..
NaN과 Infinity는 실제 숫자 값은 아니지만 숫자 타입으로 정의됩니다. 자바스크립트 내장 예약어, 또는 별도로 정의된 숫자 타입의 한 종류이며, NaN은 문자열을 숫자로 변환할 수 없는 경우, Infinity는 숫자형으로 표현할 수 없는 큰 숫자인 경우(수학에서 말하는 무한한 값이 아니라 자바스크립트로 표현 가능한 최대 정수보다 큰 경우) Infinity를 대신 표시합니다. let nanVar = NaN; Number.NaN; Number.isNaN(); Number.isInfinite(); Number.EPSILON; // 두 표현 가능한 숫자의 최소 간격. / 2.220446049250313e-16 Number.MAX_SAFE_INTEGER; // 안전한 최대 정수. / 900719925474..