프론트엔드 개발/JavaScript 35

자바스크립트) 배열

0. JS 의 배열은 희소배열이기 때문에 일반적으로 자료구조에서 의미하는 밀집배열이 아니다. 자바스크립트와 다르게 일반적인 프로그래밍 언어에서는 배열을 선언할 때 배열의 크기를 알려준다. 아래와 같이 배열을 선언했다면, 운영체제는 메모리에 숫자 10개가 들어갈 수 있는 연속된 빈 공간을 찾아서 순서대로 1,2,3,4,5를 할당한다. 할당하지 않은 나머지 부분은 의미없는 쓰레기 값이 저장되어있다 int arr[10] ={1,2,3,4,5} 운영체제는 배열의 시작주소 숫자 1이 들어간 주소만 기억한다. 그래서 배열의 세번째 원소에 접근하고 싶을 때 arr[2] 인덱스로 한번에 접근가능하다. 운영체제는 배열의 시작주소를 알고있기 때문에, 배열의 시작주소인 1에서부터 두번째 떨어진 주소에서 데이터를 가져온다. ..

자바스크립트) 자주 쓰이는 메서드 총정리

맨날 외워버리면 잊어버리는 메서드...ㅠㅠㅠㅠ그냥 한번에 정리해버리자!!! ✅ 배열에 사용되는 메서드 1) 특정 조건에 맞는 요소 탐색 🔸 find - 배열에서 주어진 조건을 만족하는 첫번째 요소를 찾아 반환하는 메서드. - 조건을 만족하는 요소를 찾으면 해당 요소를 반환하고, 그렇지 않으면 undefined 를 반환 const numbers = [1, 2, 3, 4, 5]; const evenNumber = numbers.find(function(number) { return number % 2 === 0; }); console.log(evenNumber); // 출력: 2 (첫 번째 짝수인 요소) const numbers = [1, 3, 5, 7, 9]; const evenNumber = number..

자바스크립트) 배열 원소 누적 합 구하기

맨날 까먹네..더이상 까먹지 말자!!!! 1. forEach 로 합치는 방법 // 배열의 모든 수 합치기 let arr = [1,2,3,4,5] let result = 0; arr.forEach(num=>{return result +=num}) result //15 2. reduce let arr = [1,2,3,4,5] const result = arr.reduce((prev,cur)=>{ return prev + cur; // 누적된 계산값에 현재값을 더한다 },0) // 초기값 0 result // 15 3. for of let arr = [1,2,3,4,5] let answer = 0; for(i of arr){ answer+=i } for of / for in : 1) 배열의 요소 개수만큼 반복..

자바스크립트) 원시타입 VS 참조타입 / 얕은복사 VS 깊은 복사

1. 데이터타입(값의 종류) - 자바스크립트의 모든 값은 데이터 타입을 가짐 - ES6 는 7개의 데이터 타입을 제공함 구분 데이터 타입 원시형 1) 숫자 2) 문자열 3) 불리언 4) undefined 5) null 6) 심벌 참조형 1) Array 2) Function 3) Date 4) Map,WeakMap 5) RegExp 6) Set,WeakSet 1-1) 원시형 VS 참조형의 차이 원시형 참조형 원시 값이 변경 불가능하다. 불변성 : 한번 만든 원시값을 바꿀수 없는 것이 불변성이다. 즉 변수의 값을 변경하려면 재할당만 가능하다. (원시값을 바꿀 수 없으니) 할당된 메모리 공간에 이미 존재하는 원시값을 변경할 수 없음을 의미한다. 다시 말해, 변수에 새로운 원시값을 할당하려면 기존의 메모리 공간..

이벤트 버블링 (자식 태그의 이벤트가 부모 태그까지 적용될 때)

0. 문제 원인 - 리액트 블로그 프로젝트 중 자식 태그인 Delete 버튼만 눌렀을 뿐인데 부모태그에 적용된 onClick 이벤트가 같이 발생했다. Delete 버튼을 눌렀을 때 Delete 버튼에 적용된 onClick 이벤트인 콘솔창에 '버튼삭제' 글자만 띄우고 싶었는데 그 부모태그인 edit 페이지로 이동하는 이벤트까지 작용되었다. 1. 왜 자식태그를 눌렀는데 부모태그까지 적용돼? 이벤트 버블링 아래 gif 를 보면 나는 body 부분을 클릭했을때는 콘솔창에 body 만 나온다. 헌데, parent 부분을 클릭하면 parent, body가 같이뜨고 child 부분을 클릭하면 child,parent,body 까지 같이 콘솔창에 뜬다. 왜 자식 태그만 눌렀는데 부모태그까지 이벤트가 영향을 미치지?? c..

자바스크립트 기초) truthy, falsy, 단축 평가(단락회로평가)

1. truthy 공식문서에서는 아래처럼 설명하고 있다. 자바스크립트에서, truthy인 값(참 같은 값) Boolean(불리언) 문맥에서 true로 평가되는 값이다. falsy값으로 정의된 값이 아니면 모두 truthy값으로 평가된다. 즉, falsy 값이 아니라면 이를 truthy로 판단하여 내부적으로 True 불리언 값으로 형 변환을 해준다. falsy 가 아니라면 truthy 이니 falsy 먼저 알아보자. 직감상 falsy 가 외울게 별로 없기에 이렇게 설명하지 않았을까? 2. Falsy falsy인 값(거짓 같은 값)은 Boolean 문맥에서 false로 평가되는 값이다. 쉽게 말해서 if문의 조건으로 넣었을때 false로 변환되는 값이다. 총 6가지가 있다. if(0) if(NaN) if(f..