💻Front-end 🎨UI, UX 📒Log

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

자바 스크립트 ES ES? Javascript는 원래 넷스케이프에서 시작된 언어인데, 프로그래밍 언어들의 근간이라고 볼 수 있는 C언어보다 훨씬 나중에 개발된 언어이다. 결과부터 말하면 ES라는 것은 'Javascript의 표준 규격'을 의미하는데 실제로 서로 사용자를 끌어들이기 위해 이것저것 기능을 추가하다 보니 Javascript와 JScript는 점점 다 달라지는 경향을 보였고, 이에 보다못한 European Computer Manufacturers Association (ECMA, 현 ECMA International)에서 Javascript에 대한 표준을 정하게 되었다. 또, ECMA에서는 Javascript의 표준만 정하는게 아닌 다른 표준안도 정하기 때문에 그것들과 구분하기 위해 숫자를 붙였..

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 }