클로리셔 작은 공간

reduce() 기본 문법 reduce() 메서드는 배열의 각 요소에 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환. reduce라는 이름은 배열들을 하나의 값으로 줄이는데 쓰이기 때문에 붙었다. 예로, 배열에 들어있는 숫자를 더하거나 평균을 구하는 것은 배열을 하나의 값으로 줄이는 동작이다. 하지만 reduce가 반환하는 값은 객체일 수도 있고, 다른 배열일 수도 있다. arr.reduce(callback[, initialValue]) 리듀서 함수는 네 개의 인자를 가집니다. 누산기 accumulator (acc) 현재 값 currentValue (cur) 현재 인덱스 currentIndex (idx) 원본 배열 array (src) ◻ accumulator - 콜백의 반환값을 누적한다..

requestAnimationFrame() 바닐라 자바스크립트로 애니메이션 개념잡기 간단하게 개념을 잡기위해 필요한 기본 HTML 코드는 버튼과 작은 박스 '#box' 를 준비했다. HTML click CSS button{padding: 10px 20px; margin: 50px; } #box{width: 300px; height: 300px; background: aqua;} 01. requestAnimationFrame() 이용해서 반복하는 스크립트 짜보기 JS const btn = document.querySelector('button'); const box = document.querySelector('#box'); let num = 0; btn.addEventListener("click", e ..

01. style(CSS) 속성값을 변경해보기 1) CSS 속성을 추가하기 - element.style.color * [ style.css속성명 ]은 기존 정의 된 style에서 새로운 속성 추가된다. Lorem ipsum dolor sit amet consectetur adipisicing elit. const text = document.querySelector("p"); text.style.color = "hotpink"; 2) CSS 속성 여러개 추가하기 - element.style.cssText * [ style.cssText ]는 기존 정의된 style 지우고, 새로운 속성으로 덮어쓴다. Lorem ipsum dolor sit amet consectetur adipisicing elit. co..

sort( ) / reverse( ) 함수로 순서 정렬하기 01. sort() : 알파벳 순서로 요소 정렬 const names = ["Chloe", "Andy", "Jake", "David"]; names.sort(); console.log(names); // ['Andy', 'Chloe', 'David', 'Jake'] 02. reverse() : 역순으로 요소 정렬 const names = ["Chloe", "Andy", "Jake", "David"]; names.reverse(); console.log(names); // ['Jake', 'David', 'Chloe', 'Andy'] sort( ) 함수로 올림차순/내림차순 최소값/최대값 반환 sort((a, b) => {return a-b}) : ..

문자를 숫자로 변환할 수 있는 내장함수 1. parseInt (변환할 값) - 해당값을 정수로 반환 const num = "5"; const num1 = "5.7" console.log(parseInt(num)); // 5 console.log(parseInt(num1)); // 5 // 반올림 상관없이 정수로 무조건 반환. 2. parseFloat (변환할 값) -해당값을 실수로 반환 const num = "5.8"; const num1 = "5.3"; console.log(parseFloat(num)); // 5.8 console.log(parseFloat(num1)); // 5.3 // 소수점 살려서 실수로 무조건 반환

1. indexOf( ) - 찾고자하는 문자열의 위치 반환 2. slice( ) - 문자열에서 특정 부분 찾아서 새로운 문자열로 반환 3. substr( ) - 문자열에서 특정 부분 잘라냄 4. replace( ) - 문자열에서 특정 문자값 바꿔치기 5. split( ) - 문자열을 배열로 반환 1. 문자열.indexOf() - 찾고자하는 문자열의 위치 반환 const txt = "Hello World"; console.log(txt.indexOf("apple")); // -1 apple이란 단어를 찾기했을 때, 값이 없으면 -1을 반환한다. 만약 글자가 있다면 그 글자의 위치를 찾아서 숫자로 반환. indexOf는 단어가 있는지 없는지 확인할 때 사용을 많이 한다고한다. 2. 문자열.slice() - ..

1. for() 반복문 1-1) 배열에서 for() 이용하기 // 배열에서 사용법 const colors = ["red","green","blue","aqua"]; for( let i=0; i < colors.length; i++ ){ console.log(colors[i]); //red green blue aqua } 1-2) 객체에서 for() 이용하기 // 객체에서 사용법 const classA = [ {name: "Chloe", age: 20, address: "Seoul"}, {name: "Andy", age: 25, address: "Busan"}, {name: "Jane", age: 18, address: "Daegu"}, ]; for(let num=0; num < classA.length;..

개념 JSON은 자바스크립트의 객체를 만들때 리터럴(Literal)과 프로퍼티(Property)를 표현한다. 따라서 JSON 데이터는 모양과 규칙이 매우 단순하다. 그래서 브라우저 영역에서 쉽고 빠르게 의미를 해석할 수 있으며, 다른 프로그래밍 언어에서도 구현하기 쉽다. JSON은 데이터 포맷일 뿐이라서 어떤 통신도 프로그래밍 문법도 아닌 단순한 데이터 표시하는 표현 방법일 뿐입니다. * 리터럴(literal) 개념 더보기 Click 더보기 리터럴(Literal)은 데이터(값) 그 자체를 뜻한다. 변수에 넣는 변하지 않는 데이터를 의미. 30 // 숫자 리터럴 "JSON이란" // 문자열 리터럴 true // 불리언 리터럴 리터럴 표기법이란, 변수를 선언함과 동시에 그 값을 지정해주는 표기법.. // 객..

배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소이며, 사용하는 방법이 다양합니다. 1.문법 var 변수명 = [값1, 값2, 값3......] 배열 사용하는 방법 01 배열을 선언하고 데이터를 순차적으로 선언하는 방법입니다. var arr1 = new Array(); arr1[0] = 100; //첫번째 배열 저장소에 100을 저장 arr1[1] = 200; //두번째 배열 저장소에 200을 저장 배열 사용하는 방법 02 배열을 선언과 동시에 데이터를 넣는 방법입니다. var arr2 = new Array(100,200); 배열 사용하는 방법 02 배열을 선언하지 않고 바로 데이터를 넣는 방법입니다. var arr3 = [100,200]; 2. 배열 객체의 메서드 / 속성 종류 설명 join()..