728x90 📁𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞/JavaScript30 No Image 📷 [JavaScript] 원시 타입과 객체 타입의 차이점 + React..! Before we start 시작하기에 앞서 갑자기 원시 타입과 객체 타입의 차이점에 대해서 정리하게 된 계기는 다음과 같다. 2024.02.23 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] Examples of using useMemo [React .hook] Examples of using useMemo jrogrammer.tistory.com useMemo를 활용하기에 앞서 useEffect에서 의존성 주입을 해놓음에도 불구하고 의존성 주입을 하지않은 변수의 값이 변경되었는데, 리렌더링이 발생하는 문제가 생겼다. 여기서 주의할 점은 의존성 주입을 한 변수가 객체 타입 이었다. import React, { useEffect, useMemo, useState.. 2024. 2. 23. No Image 📷 [es6] 배열 기초 index.html 더보기 2023. 9. 7. No Image 📷 [es6] var, let, const var scope는 호이스팅 O, 중복선언 O, 함수형스코프 let 호이스팅 X, 중복선언 X, 블록스코프 const 호이스팅 X, 중복선언 X, 값변경 X, 블록스코프 스코프의 종류에 따라 클로저가 다르게 적용됨 var 버튼 let 버튼 const 버튼 함수형 스코프 var 버튼 블록 스코프 let 버튼 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 JavaScript더보기 document.querySelec.. 2023. 9. 5. No Image 📷 [ES6] 문법 맛보기 2023. 2. 7. No Image 📷 [메서드] => (Arrow함수) ES6에서 새롭게 추가된 함수 선언 방법. 함수 표현식에서 사용할 수 있다. //ES5 const plus = function (num1, num2) { return num1 + num2 } //원래 가장 평범한 함수 표현식을 ES6 화살표함수로 나타내면, ///////////////////////////////////////////////// //ES6 const plus = (num1, num2) => num1 + num2; //이렇듯 화살표 함수로 사용할 수 있다. 이렇거나 함수의 내용이 한 줄이고, 리턴밖에 없으면 return 키워드와 중괄호 생략 가능 //예제 const square = x => x * x; 단! 화살표 함수의 주의사항 또한 존재한다. 바로! 화살표 함수와 일반 함수 this 가.. 2023. 2. 7. No Image 📷 [메서드] forEach() 배열의 각 요소에 대해 함수를 실행하는 것. const arr = ['똘기','떵이','호치','새초미']; arr.forEach((x, i) => { console.log(x.repeat(i + 1)); }); // 출력 결과는 // 똘기 // 떵이떵이 // 호치호치호치 // 새초미새초미새초미새초미 배열 나열 순번 만큼 반복해주고있다. 2023. 2. 7. No Image 📷 [메서드] reduce() 배열의 값을 줄여서 하나의 값으로 만드는 것. const arr = [1 ,2 ,3 ,4 ,5]; const sum = arr.reduce((acc, cur) => acc + cur, 100); // 100 자리가 비어도 됨, default: 0 console.log(sum); // 출력 결과는 // 115 배열 index로 예를들면 index acc cur 0 100 1 1 101 2 2 103 3 3 106 4 4 110 5 return value 115 acc 초기값이 100이라고 하고 거기서 index 0 = 1, 1을 추가해준다 추가한 값을 101로 리턴하고 다시 index 1 = 2, 2를 추가해준다. 추가한 값 103을 리턴하고 다시 ... 해서 115가 나왔다. 2023. 2. 7. No Image 📷 [메서드] filter() 콜백의 조건에 충족하는 값만을 뽑는다. const arr = [1 ,2 ,3 ,4 ,5 ,6 ,7 ,8 ,9 ,10]; const oddArr = arr.filter((x) => x %2 === 1); console.log(oddArr); // 출력 결과는 // [1 ,3 ,5 ,7 ,9] filter 소괄호 안에 배열의 값을 넣고 화살표 함수를 실행했을 때 x 를 2로 나눈 나머지가 1일때를 oddArr 배열에 넣어주면 된다. 2023. 2. 7. No Image 📷 [메서드] map() 배열 안의 요소들을 처리하여 새 배열을 만들 때 사용. const arr = [1 ,3 ,5 ,7 ,9]; const mapArr = arr.map((x) => x + 1); console.log(mapArr); // 출력 결과 // [2 ,4 ,6 ,8 ,10] 배열 안의 요소들을 처리해서 새 배열을 만들어 주었다. 2023. 2. 7. No Image 📷 [메서드] join() join() 함수는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. arr.join([separator]) - separator는 옵션입니다. const str1 = ['Hello', 'world'].join(); const str2 = ['Hello', 'world'].join('♥'); document.write(str1); document.write(' '); document.write(str2); console.log(str1) => hello,world console.log(str2) => hello♥world 2023. 1. 30. No Image 📷 [메서드] split() split() 함수 string.split(separator, limit) split() 함수는, 문자열을 'separator'로 잘라서, 'limit' 크기 이하의 배열에 잘라진 문자열을 저장하여 리턴합니다. separator 필수 아님 문자열을 잘라 줄 구분자 (문자열 또는 정규식) 값이 입력되지 않으면 문자열 전체를 배열에 담아서 리턴합니다. limit 필수 아님 최대 분할 갯수 const str = 'The quick brown fox jumps over the lazy dog.'; const words = str.split(' '); console.log(words[4]); // Expected output: "jumps" const chars = str.split(''); console.log.. 2023. 1. 30. No Image 📷 [메서드] replace() str_text.replace("찾을 문자열", "변경할 문자열") 특정 문자 제거하기 str.replace('AB', ''); 문자열에서 'AB'를 찾아서 빈 문자열로 변환하여 문자열에서 'AB' 문자열을 삭제합니다. replace() 함수는, 문자열에서 찾은 첫 번째 'AB' 문자열만 치환합니다. 특정 문자 모두 제거하기 str.replace(/AB/g, ''); 파라미터로 정규식을 전달하여 문자열에 존재하는 모든 'AB' 문자열을 공백으로 변환하여 삭제하였습니다. 'AB' 문자열 앞뒤의 '/'는 정규식의 시작과 끝을 나타냅니다. '/'뒤의 'g'는 'Global Search'를 의미하는 플래그입니다. 'g' 플래그는 전역 탐색, 즉 전체 문자열을 탐색 하도록 합니다. 특정 문자 대소문자 구분없이 모.. 2023. 1. 30. No Image 📷 [메서드] sort() sort() 함수 Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다. arr.sort([compareFunction]) 파라미터 compareFunction 정렬 순서를 정의하는 함수. 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다. 이 함수는 두 개의 배열 element를 파라미터로 입력 받습니다. 이 함수가 a, b 두개의 element를 파라미터로 입력받을 경우, 이 함수가 리턴하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고, 이 함수가 리턴하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬합니다. 만약 0을 리턴하면, a와 b의 순서를 변경하지 않습니다. 리턴값 compareFunction 규칙에.. 2023. 1. 30. No Image 📷 [JavaScript 심화] JS Study 일지 (4일차) 1. this 01. this 생각해볼 것들 📌 🤔 : 아래의 내용들은 이번 장에서 얻을 수 있는 지식들입니다. 이러한 것들을 배운다고 생각하고 챕터를 읽어가주세요, 다 읽은 이후에 아래의 질문에 대한 답을 답할 수 있으면 완벽합니다. 1.전역 객체란 무엇을 의미하는 것 일까요? 2.다른 언어의 객체와 자바스크립트의 객체는 어떻게 다를까요? 3.그렇다면 this는 어떻게 달라질까요? 4.함수와 메서드의 차이에 대해서 조금 더 알게된게 있을까요? 지난번에 했던 답과는 어떻게 다를까요? 02. this KeyWord 📌 🤔 : 이번 장에서 가장 중요한 키워드입니다. 4장을 읽고 아래의 단어들을 조금 더 이해하는게 오늘의 목표입니다. 천천히 읽어보시고, 각 조원분들과 적당하게 나눠서 아래의 키워드를 직접 설명.. 2023. 1. 25. No Image 📷 [JavaScript 심화] JavaScript 심화 항해 12기 2주차 2023. 1. 24. No Image 📷 [JavaScript 심화] JavaScript 심화 항해 12기 1주차 2023. 1. 24. 이전 1 2 다음 728x90
