일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 캡슐화 (encapsulation)
- 문자열을 객체로 만드는법
- Math.floor()
- justfiy-content
- 화살표함수 기본 개념
- css 정리
- align-content
- 다형성 (polymorphism)
- class
- flex-direction
- 재귀적으로 생각하기
- display
- 클래스 문법 구조
- Promise Chaining
- probs.children
- probs
- 상속 (inheritance)
- Promise all
- 추상화 (abstraction)
- 첫번째 미니 프로잭트
- 재귀함수 탬플릿
- async/await
- Instanc
- 객체지향 프로그래밍 특징
- 얕은복사와 깊은 복사
- props비구조화 할당
- 참조자료형
- string
- 조건문
- align-iitems
- Today
- Total
목록프로그래밍/자바스크립트 꿀팁 개념 (10)
희락코딩
코딩테스트 문제 80% 이상 차지하는 재귀함수 어떻게 해결해야 될까요 ? 재귀함수 정말 난해하고 어려운 내용 중 하나라고 생각합니다. 뿐만아니라 재귀적으로 해결 하기 위해서는 문제를 쪼개고 나누는 연습을 습관처럼 해야 논리적 사고가 함양되고 재귀문제를 수월하게 해결 할 수 있습니다. 그래서 오늘은 재귀적으로 생각하기에 대해 블로깅을 하겠습니다! # 재귀의 이해 재귀는 어떤 문제를 해결 할 때, 구조는 동일 하지만 더 작은 경우를 해결함으로써 그문제를 해결 하는 방법을 재귀 라고 합니다. 재귀는 주어진 문제가(구조가 비슷) 더 작은 문제로 나뉘어 질 수 있는 경우와 중첩된 루프가 많거나 중첩의 정도를 미리 알 수 없는 경우에 사용하기 매우 적합합니다. # 재귀적으로 사고하기 1. 재귀 함수의 입력값과 출력..
자바스크립트를 공부 하다보면 콜백함수라는 말을 많이 들어보셨을 겁니다. 과연 이 콜백함수는 무엇일까요 ?? 이번 블로깅은 setTimout( ) 함수를 예를 들어 콜백함수가 어떻게 쓰이는지 알아보도록 하겠씁니당 콜백(callback) 함수 콜백함수는 함수의 인수로 사용되는 함수를 콜백 함수라고 합니다! 콜백 함수를 이해하기 좋은 예시가 setTimeout(함수, 시간) 이 있습니다. 간단하게 설명하자면 타이머라고 생각하면 됩니다. 깊게 알고 싶으면 참고 https://developer.mozilla.org/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout WindowTimers.setTimeout() - Web API | MDN WindowTimers.setT..
고차함수 map , filter , reduce 원리 이해하기!!! 이번 블로깅은 고차함수에 많이 사용 하는 map, filter, reduce에 대해 알아보는 시간을 갖도록 하겠습니다.... map , filter, reduce는 꼭 알아야 나 중에 객체 데이터들을 효율적으로 다룰수 있어 확실하게 개념을 잡는 것이 중요하다고 생각합니다!!! 들어가기 앞서 map 과 filter에 대해 간단하게 공통점과 차이점을 설명하자면 공통점 새로운 배열을 만듭니다. 차이점 filter는 조건을 통해 배열안의 값을 삭제 합니다. 쉽게 말해 걸러냅니다. map은 원하는 데로 배열안의 값을 변경 합니다 # filter filter는 위에 설명을 했듯이 배열안에 원하는 값을 걸러 내고 나머지 값들은 삭제합니다. 예를 들어..
정규표현식 정규표현식은 개발하면서 자주 사용되는 것이 아니고 그냥 검색해서 사용하는 용도로 쓰입니다. 복잡한 기호와 가독성이 아주 불편해서 그냥 지나쳐야징~@~@ 하지만 우리는 정규 표현식을 왜? 사용하는지는 알아야 합니다! 이번 블로깅은 정규표현식에 대해 간단한 설명과 유용하게 쓰이는 정규표현식을 소개하고자 합니다!!! 정규표현식이란 ? 정규 표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 언어(패턴)입니다. 크게 문자검색(search), 문자 대체(replace), 문자 추출(extract) 을 수행합니다. 정규식 패턴은 가독성이 많이 떨어져 너무 어렵게 느껴지는 경향이 있습니다. 그래서 패턴을 이해하려는 것 보다 이미 제공 된 정규표현식을 가져다 쓰는 것을 권장합니다. 하지만 본인은 아주 세세..
얕은 복사와 깊은복사 (Shallow copy, Deep copy) 이번 블로깅은 얕은복사와 깊은 복사에 대해 개념을 정리 하였습니다. 다소 너무 생소하고 어렵게 느껴지는 부분이 많았던 내용입니다. 하지만 이개념을 알아야 나중에 데이터를 다룰때 유용하게 쓰일 수 있기때문에 꼭 알아야할 개념중 하나입니다! 우선 이개념을 알기전에 객체는 참조자료형입니다! 어떤 하나의 변수가 객체를 담고 있고 그변수에 또 다른 변수를 할당을 하면 같은 주소를 바라보고 있어 객체의 데이터를 수정하면 똑같이 수정이 됩니다. 예시를 통해 알아 봅시다!! 1 2 3 4 5 6 7 8 9 10 11 12 // 참조자료형 객체 데이터 활용 const joy = { name : 'joycoding', age : 99, gender : '..
화살표 함수 화살표 함수는 코딩을 이제 막 시작한 사람들에게 매우 난해하고 어렵게 생각 할 수 있습니다. 저 또한 너무 어려웠습니다... 하지만 개념을 알고 조금만 익숙해지면 엄청 편리한 기능이라는 것을 알수 있습니다. 이번 블로깅은 화살표 함수에 겁이 많은 사람들을 위해 기본 개념을 정리해보도록 하겠습니다. 화살표 함수는 왜 사용하나요 ? 화살표함수는 일반함수와 달리 기본적인 로직을 축약형으로 나타낼수 있어 직관적입니다. 또한 간단한 코드라면 불필요한 코드를 줄여 가독성도 좋습니다. 일반함수와 화살표함수의 구조 차이는 ? 1 2 3 4 5 6 7 8 9 10 11 12 // 일반함수 const addNum = function (x) { return x + 5 } console.log(addNum(5))..
원시 데이터와 참조 데이터 (Primitive & Reference) 알면서도 헷갈리는 원시자료형과 참조 자료형!!! 메모리 주소를 활용해서 이해 해보는 시간을 갖겠습니다! 원시데이터 String, Number, boolean, undefined, null 참조형데이터 object, array, function 원시데이터는 쉽게 말해 생긴 값이 같으면 true이지만 정확한 표현으로는 같은 주소를 바라보고 있다라고 표현 할 수 있겠습니다. 하지만 참조형 데이터는 원시 데이터와 다른점이 있어 어떻게 다른지 직관적으로 이미지를 통해 블로깅을 하겠습니다! 1. 코드가 실행된 후, x의 값은 무엇일까 ? 1 2 3 let x = 2; let y = x; y = 3; cs 정답은 2 입니다. 이문제는 숫자와 같은 ..
MUTABLE과 IMMUTABLE 구분 코딩 공부를 하면서 mutable 과 immutable이라는 개념을 본적있습니다. 이개념들이 너무 생소하고 어렵게 느껴져서 최대한 쉽게 정리해 이해 할 수 있도록 정리하였습니다. mutable과 immutable 의 차이점 ▶ mutable → 변하다 유동적이다. → 참조타입 → 해당 데이터 주소를 찾아 값을 변경 ▶ immutable → 불변, 변하지 않는다. → 원시타입 → 해당 데이터 주소와 별개로 새로운 메모리 주소에 할당 → 문자열 우선 mutable 과 immutable 의 차이를 나타내는 키워드입니다. 가장 핵심적인 것은 mutable은 원본데이터를 변화 시키려는 속성이 있고 immutable은 원본데이터를 유지하려는 속성이 있습니다. String Me..