strawberry fields

♦️ filter는 해석 그대로 걸러주는 역할을 하는 함수이다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하며, 자바스크립트에서 filter는 배열에 사용한다. ✏️ filter란? let array = [3, 5, 1, 11, 0, 15, 'happy']; let result = array.filter((value) => value value..

♦️ 코딩테스트를 조금씩 풀다보니 for each 에 대해 알면 좋을 것 같아서 공부해 보았다. for each는 for 문과 마찬가지로 반복적인 기능을 수행할 때 사용한다. 하지만 for문 처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있다. forEach 기본적인 forEach 사용법은 아래와 같다. const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.forEach(function(element) { console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 }); arr 객체의 요소들이 callback 함수에 의해 순서대로 호출되는 모습 ! for문에 비해 조금 더 깔끔하..

♦️ 어떤 배열에 있는 모든 요소들의 값을 변경하여 새로운 배열을 써야 할 때가 있다. 이 때 루프를 사용하여 배열에 대해 수동으로 반벅을 처리하는 대신, Array.map() 메소드를 사용하면 된다. 예를 들어 아래와 같은 배열 요소가 있을 때, 각 요소에 3을 곱한 값을 출력한다고 하면 for 루프를 사용하려 할 것이다. 그런데 map() 함수를 사용하면 for 루프를 사용하지 않고도 동일한 결과를 얻어서 출력할 수 있다. let arr = [4, 5, 6, 7]; ✏️ for 루프를 사용한 배열 반복 for (let i = 0; i < arr.length; i++) { arr[i] = arr[i] * 3; } console.log(arr); // [12, 15, 18, 21]; ✏️ map() 함수..

WebStorage란? 데이터를 어딘가에 저장해야 할 때 사용하는 WebStorage. 보통 데이터베이스 서버나 클라우드에 저장하는 경우가 많지만, 저장해야 할 데이터가 별로 중요하지 않거나 유실 되어 상관 없는 데이터일 때 브라우저상에 데이터를 저장한다. 이를 WebStorage 라고 한다. 로컬 스토리지 vs. 세션 스토리지 웹스토리지에는 로컬 스토리지(LocalStorage)와 세션스토리지(sessionStorage)가 있다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저정된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터가 지워지지 않는다. 다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면 여러개의 세션 스토리지에 데어티가 서로 격리 되어 자장되며 각 탭이..

지난주 코딩테스를 풀다가 공부하게 된 split() 함수 (tmi..) .split() 은 문자열을 분할하는 메서드이다 아래 세가지 문법으로 사용할 수 있는데, separator에는 분할의 기준을 넣고(예를 들면 쉼표 등등) limit에는 최대 분할 개수를 정하여 넣는다. separator/limit은 모두 필수사항이 아님 ✔️ split() ✔️ split(separator) ✔️ split(separator, limit) 예제를 확인해 볼게요 1. 파라미터를 입력하지 않을 경우 파라미터로 아무것도 전달하지 않으면 문자열 전체를 하나의 배열에 담아서 리턴한다 이때 배열의 길이는 1이다 2. separator = " " (빈배열)로 입력할 경우 문자열을 잘라서 각각 잘라진 조각들을 배열에 저장하여 리턴한..

🌷 addEventListener() 함수 화면에 마우스를 올리거나, 키보드를 조작하거나 터치하거나 등등등.. 어떤 행위를 하면(?) 그에 대한 반응을 하는 것을 이벤트라 한다 자바스크립트에서 이벤트 처리하는 방법은 3가지가 있는데, 1️⃣ HTML 태그 안에서 이벤트 처리 연결하기 2️⃣ DOM 요소에 이벤트 처리 연결하기 3️⃣ addEventListener() 함수 사용하기 (오늘 제가 공부한 것은 이것입니다..네네..) 1, 2번은 이벤트를 하나만 지정할 수 있다는 단점이 있지만, addEventListener() 함수를 사용하면 여러개의 이벤트를 등록할 수 있다. 기본 문법은 아래와 같다 pic 이라는 변수가 있고, 이 변수에 지정된 요소에 이벤트를 처리하고 싶다면 'pic.addEventLis..

🌷 DOM(Document Object Model) 문서객체모델에 대하여 DOM에 대해 강조하는 분들이 꽤 있어서 열심히 공부해보려 했지만 처음 접했을 땐 이게 몰까.. 문서 객체 모델..? 단어 하나부터 어려워요.. 공부의 세계란 끝이 없다(?) 그래서 살짝 제껴 놓고 다른 강의 들을 듣다가 오늘 다시 공부를 했는데 제법 이해가 되어서 정리해 보려한다 😎 ✔️ DOM의 구조는 나무처럼 생김 ㅡ DOM 트리라고도 한다 Live DOM Viewer 아래 사이트에 들어가서 이것저것 실습해보면 쬐끔 감이 잡힘.. https://software.hixie.ch/utilities/js/live-dom-viewer/ Live DOM Viewer Live DOM Viewer ... Script not loaded. ..

🌷JavaScript 배열 무작위 추출하기 오늘 풀 문제는 ! 명언을 배열에 저장해 두고 배열에 있는 내용중 하나를 무작위로 화면에 표시하는 것 1️⃣ 배열안에 명언을 집어 넣는다 처음에 난 let words = ['딸기', '사과', '바나나']

🌷 JavaScript 배열의 합계 구하기 reduce () 를 사용할 수도 있지만, 아직 안 배웠기 때문에(?) 왠지 for 구문을 사용해야 할것 같아서 for문을 사용했어요 1️⃣ 처음에 numbers 라는 배열이 주어져서 이것을 사용해야 했음 2️⃣ for는 배열을 반복하는데 사용 되기 때문에, 배열의 모든 숫자를 꺼내어 더하고 변수에 저장할 수 있다 sum 변수를 만들고, (number.length는 각 배열의 요소들을 빼내기), sum+= 더하기 할당을 사용한다 3️⃣ numbers 배열에 push를 사용하여 sum(합계값)을 넣어주고, showArray(numbers) 기존에 있던 함수를 다시 돌려주면 => 배열이 더해진 값이 맨 뒤에 추가되어 나온다 ! 짜잔 요렇게 됩니다 2,4,6,8,10..