💻Front-end 🎨UI, UX 📒Log

Slice 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환 > nums = Array(20).fill().map((_, i) => i) nums.slice(5, 10) < [5, 6, 7, 8, 9] Splice 이 함수로는 배열로 부터 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체. 첫번째 인자로 시작 인..

unshift test = new Array; // test 변수를 배열로 선언 test = ['456', '789']; // test 변수가 배열값 456, 789을 가짐 test.unshift('123'); // test 변수의 맨 앞에 '123'을 추가하기 실행결과는 아래와 같습니다. test = ['123', '456', '789']; // 새로운 배열값 123이 앞에 추가되었음 push test2 = new Array; // test2 변수를 배열로 선언 test2 = ['123', '456']; // test 변수가 배열값 123, 456을 가짐 test2.push('789'); // test2 변수의 맨 뒤에 '789'를 추가함 아래는 실행결과입니다. test2 = ['123', '456',..

map array.map(callbackFunction(currenValue, index, array), thisArg) currentValue : 배열 내 현재 값 index : 배열 내 현재 값의 인덱스 array : 현재 배열 thisArg : callbackFunction 내에서 this로 사용될 값 //map = 요소 변환 할때 쓰임 (for문이랑 비슷) const array_num = [0, 1, 2, 3, 4, 5]; const new_array = array_num.map((array_item) =>{ //item : num 요소들 return array_item + 1; }); // 새 배열의 값은 원본 배열 원소에 +1 한 값 console.log(new_array); filter 어떤..

Class 리액트 2개의 컴포넌트 중 클래스형, 객채를 새로 생성 class Cat { // 생성자 함수 constructor(name) { //받아온 name을 Cat 넣는다 // 여기서 this는 Cat. this.name = name; } // 함수 showName(){ console.log(this.name); } } // new는 생성자 함수 // 네, new와 생성자 함수는 세트 let cat = new Cat('perl'); cat.showName(); console.log(cat); // perl 자식 클래스 만들기 // extends는 Cat 클래스를 상속 class MyCat extends Cat { // 생성자 함수 constructor(name, age) { // super를 메서드..

function 함수 표현식 // 함수 이름은 생략 let do_something = function [함수 이름]() { ... } 화살표 함수 // 화살표 함수는 함수 표현식의 단축형 // function까지 생략 가능 let do_something = () => { ... }

var, let, const var: 함수 단위 let: block 단위(변수: let으로 선언한 변수는 값이 변할 수 있습니다.) const: block 단위(상수: 한번 선언한 값은 바꿀 수 없습니다.) function scope(){ const a = 0; let b = 0; var c = 0; // {} 증괄호 안에 든 내용 = 블럭 if(a === 0){ const a = 1; let b = 1; var c = 1; console.log(a, b, c); //1, 1, 1 } // var는 함수 단위라서 if문 밖에서 선언한 값이 변함 // let과 const로 선언한 값은 안 바뀜 console.log(a, b, c); 0, 0, 1 }