Programming/Java Script 33

[JS] 고차함수 : 커링함수

* * 작성 중인 글입니다. * * 고차 함수(higher order function)은 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수. # 빅보스 JS에서 함수는 1급 객체 함수. 콜백함수(callback fuction)는 다른 함수의 전달인자로 전달되는 함수 #제물 어떤 작업이 완료되었을 때 호출하는 경우가 많아서 답신 전화를 뜻하는 콜백함수라는 이름이 붙음. * 콜백함수를 전달받은 고차 함수는 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정 할 수도 있습니다. 아예 호출하지 않을 수도 있고, 여러 번 실행 할 수도 있다. 특정 작업의 완료 후에 호출하는 경우는 이후에 충분히 접할 수 있음. * 함수를 리턴하는..

[🍭JS기초] 원시값[primitive type]의 메서드 (자료구조와 자료형)

자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해줌. 원시값에도 객체처럼 메서드를 호출할 수 있다는 거임. 다만 객체처럼 사용하는 거지 객체는 아닌거임!! 원시값과 객체의 차이점 🔹원시값( primitive type) - 원시형 값이다. - 종류 (문자string, 숫자number, *bigint, 불린boolearn, 심볼symbol, null, undefined) 총 7가지 🔹객체 - 프로퍼티에 다양한 종류의 값을 저장할 수 있음 → 장점 중 하나 - { } 대괄호를 사용해 만들 수 있음! 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종. 자바스크립트는 날짜, 오류, HTML요소(HTMLelement) 등을 다룰 수 있게 해주는 다양한 내장 객체를 제공. 이 객..

[🍭JS 기초] 옵셔널 체이닝 " ?. " (Q)

옵셔널 체이닝(optional chaining) 을 사용하면 "프로퍼티" 가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 참고로 옵셔널 체이닝은 연산자가 아닌 함수나 대괄호와 함께 동작하는 특별한 문법 구조체 (syntax construct)입니다. 옵셔널 체이닝이 등장한 배경 사용자 중 몇 명은 주소 정보를 가지고 있지 않았을 때, use.address.street 을 사용해 주소 정보에 접근 하면 에러가 발생할 수 있습니다. 혹은 자바스크립트를 사용해서 페이지에 존재하지 않는 요소에 접근해서 요소의 정보를 가져오려고 할 때 문제가 발생하는 경우가 있습니다. 옵셔널 체이닝 존재 전에는 이러한 문제를 해결하기 위해 && 연산자를 사용했으나, 중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야..

[JS 기초문법] roadmap 따라가는 여기는" Variables " 정리 파트!!💪

@code.foreveryone님의 JS roadmap중 오늘은 Variables 파트에 대해서 정리해보겠습니다!! 이번 " Variables " 파트에서 공부할 내용은 다음과 같습니다. 1. var / let /const 2. scope ( global, function, block ) 3. How lexical scope works? 4. Hoisting 5. Terminal Dead Zone @code.foreveryone님의 JS roadmap은 클릭띠! Ⅰ. var / let / const JS에서 다루고 있는 변수에 대해 알아보기 전에 우선 " 변수 " 란 무엇인지 정의해봅시다. 🔆변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 위의..

[JS 기초문법] roadmap 따라가는 여기는" Basic " 정리 파트!!💪

@code.foreveryone님의 JS roadmap중 오늘은 Basic 파트에 대해서 정리해보겠습니다!! 이번 정리할 때 아예 기초를 아주 그냥 콱콱 머리 속에 박아둔다는 느낌으로 정리및 공부 예정입니다! Basic 파트에서 공부할 내용은 다음과 같습니다. 1. ECMA script 2. JS versions 3. Static and dynamic Language (정적 타입 언어와 동적 타입 언어) 4. Get familiar about the places where JS in using. @code.foreveryone님의 JS roadmap은 클릭띠! Ⅰ. ECMAScript ECMA란 녀석에 대해 이해하기 위해 1) ECMA 인터내셔널 2) ECMA-262 3) ECMAScript 에 대해 알..

왜 JavaScript에서 ES6(ECMA2015) 가 중심일까?

ES6은 현재 2022년 기준 최신 버전이 아님에도 불구하고 많은 기업에서 ES6을 강조하며 지원자들의 주요 자격으로 꼽는 것일까요?? 2022년 6월 ECMA2022가 최종 승인 되면서 ES13까지 나왔습니다. 다만, ES6은 ES5 이하 명세에서 문제가 되었던 부분들이 해결되었고 많은 기능들이 추가되면서, 가독성 유지보수성 향상으로 이어짐으로써 React나 Vue등의 유명 라이브러리들도 이에 맞추어 개발 환경을 ES6으로 바꾸게 되었던 것입니다. 아직까지도 인기가 많은 라이브러리들이 모두 ES6을 권장하고 있고 이로 인해 많은 개발자들이 많이 쓰고 있기 때문에 아직까지도 ES6이 중요시 하게 사용되고 있는게 아닐까 싶습니다.. 🔶ES6에서 지원하는 주요 기능들은 다음과 같습니다. 1. Class지원 ..

JS 기초 문법 순서 - Study roadmap

인스타에서 찾은 @code.foreveryone님의 javascript 추천 공부 roadmap입니다. Instagram에서 이 게시물 보기 Code.Abhijit || Web developer ||🎯10k(@code.foreveryone)님의 공유 게시물 💠Basic 👈 ECMA script JS versions Static and dynamic Language (정적 언어와 동적 언어) Get familiar about the places where JS in using 💠Running JS Script tag Link external file ( 외부 파일 링크 ) Browser console 💠Variables var / let / const scope (global, function, block..

[Coursera x K-mooc] JS2 : MD-02 [ jQuery - animation효과, Easing Plugin ]

◆ JS2 : MD-01 [ jQuery 란?, jQuery 적용하기, jQuery API, jQuery를 이용한 접히는 메뉴 바 ] ◆ JS2 : MD-02[ jQuery - animation효과, Easing Plugin] ◆ JS2 : MD-03 ◆ JS2 : MD-04 ◈ jQuery - animation 효과 ?? 왜 내 animate에서 left 움직이는 효과 내꺼는 왜 적용이 안 되지??? 참고 : naverD2 animation 효과를 html interface에서 사용하는 이유는, 그러한 작성이 사용자들에게 화면이 비주얼적으로 어떠한 효과를 나타내며 변하는지 보여주기 쉽기 때문이다. interface에 작성하는 것은 사용자가 제품의 작동 방식을 이해하는데 도움이 되는 방식으로 사용자가 i..

[Coursera x K-mooc] JS2 : MD-01 [ jQuery 란, jQuery 적용하기, jQuery API, jQuery를 이용한 접히는 메뉴 바 ]

◆ JS2 : MD-01 [ jQuery 란?, jQuery 적용하기, jQuery API, jQuery를 이용한 접히는 메뉴 바 ] ◆ JS2 : MD-02 [ jQuery - animation효과, Easing Plugin] ◆ JS2 : MD-03 ◆ JS2 : MD-04 ◈ jQuery 란?? " 존 레식"쓰가 2006년에 발표한 크로스 플랫폼을 지원하는 경량의 자바스크립트 라이브러리입니다. HTML 문서의 탐색이나 조작, 이벤트 핸들링, 애니메이션, Ajax등을 멀티 브라우저를 지원하는 API를 통해 더욱 간편하게 사용할 수 있습니다. ▶ jQuery의 특징 1. 어떠한 브라우저에서도 동일하게 동작합니다. : 브라우저 호환성을 고려해서 대체 코드(Polyfill) 을 작성할 필요가 없다는 뜻입니..

coursera week 4

왜 K를 눌렀을 때 innerHTML에 작동하지 않는지 모르겠음. CSS #white-space : https://aboooks.tistory.com/187 #input -value값 지정 : https://biio-studying.tistory.com/59 #CSS border 테두리 속성 : https://www.codingfactory.net/10620 DOM 객체로 인한 Script 적용 위치에 따런 에러 해결 :https://velog.io/@ahn-sujin/Uncaught-TypeError-Cannot-read-property-addEventListener-of-null # innerHTML : https://hianna.tistory.com/480