emayom.log

ES6에서 새롭게 추가된 자바스크립트의 7번째 자료형! Symbol type에 대해서 알아보자앙 🤨 Symbol ? Symbol은 자바스크립트의 Primitive data type으로 ES6에서 새롭게 추가된 자료형이다. Symbol 생성 심볼 또한 다른 내장 객체처럼 new Symbol()과 같이 new 생성자를 사용할 것 같지만, Symbol() 함수로 생성하게 된다. const lets = Symbol(); const make = Symbol.for('target'); const symbol = Symbol.iterator(); //1. Symbol() //심볼은 String type의 ** optional ** parameter를 받는데, //해당 심볼 자체에 접근하거나, 자체의 고유한 값에 영향..

Ajax의 약자는 Asynchronous Javascript and XML으로 비동기식 자바스크립트와 XML이라는 의미를 가지고 있다. 동기와 비동기의 차이점, 그리고 Ajax 통신에 사용되는 XMLHttpRequest 객체에 대해 알아보자! 동기(Sync) vs 비동기(Async) ? 자바스크립트는 싱글-스레드 프로그래밍 언어로 단일 호출 스택을 가지며, 동기 방식으로 동작한다. ( one thread == one callstack == just one thing at a time !!! ) 그럼 동기 방식과 비동기 방식의 차이는 무엇일까? 동기적(Synchronous)인 처리 방식은 위의 그림처럼 먼저 들어온 요청부터 순차적으로 처리하는 방식으로 앞선 작업이 끝나고 결과 응답이 돌아온 것을 확인한 후..

이전 포스팅에서 함수 선언식과 표현식에 대해 알아봤다! 함수 표현식을 이용해서 함수를 보다 가독성 있게 표현할 수 있었다. 하지만, 화살표 함수를 사용하면 표현식을 좀 더 간결하게 표현할 수 있다. 🤔 (그럼 선언식은 ?????) 이전 포스팅에서 알아본 함수 표현식을 다시 한번 확인해보자. 함수 선언식과 비교해보면 음 나름 가독성 있는 ? 코드처럼 보인다. //함수 선언식 //function 키워드로 단독으로 함수를 선언한 것! function sum (a, b) { return a + b; }; //함수 표현식 //변수를 함수에 할당한 것 const sum = function(a, b) { return a + b; }; 화살표 함수 ? 익명 함수 ? 화살표 함수는 ES6에 새로 추가된 유용한 기능으로 ..

자바스크립트에서는 함수를 만들 때 사용할 수 있는 여러가지 문법이 있다. 오늘은 함수 선언식과 함수 표현식의 차이점에 대해 알아보자. 🤔 함수 선언식(Function Declarations) ? 함수 선언식은 자주 보게되는 기본적인 형태를 띄고 있다. 함수 선언 또는 함수 정의는 function 키워드로 시작한다. 그 뒤로 함수의 이름을 적고, 중괄호 사이에 함수의 기능?을 적게된다. function handleIt() { console.log("I can handle it!!"); } handleIt(); 함수 표현식 (Function Expression) ? 함수를 만드는 다른 방법으로 함수 표현식이 있다. 유연한 자바스크립트의 특징을 활용한 선언 방식으로 함수 표현식은 익명 함수를 만들며, 변수에 ..

리액트 공부를 하다 어쩌면 당연할 수도 있지만 생각지도 못했던 엥? 싶었던 부분이 있어서 글을 남겨보려고 한다. 🤔 form 태그 중 을 사용할 때 id와 name 속성을 지정하는데 name과 id 둘 모두 element를 식별? 참조하기 위해 사용된다. 여기서 name 속성은 form이 제출될 때 서버에 폼 값을 넘겨주기 위해 사용한다. (굳이 서버로 넘기지않은 값에는 name을 생략해도 무방하다,,!) 당연히 id는 유일한 값으로 사용되어야 하기 때문에 중복이 안되고, name은 중복이 가능한 값이다. 바로 여기서 오늘 적어보려는 주제가 등장한다! (아래 코드는 리액트 공부를 하며 작성하던 코드라 조금 다르다,,,!) const root = document.getElementById("root"); ..

[JS] 자바스크립트 스코프 ? : 변수의 유효 범위 자바스크립트는 다른 프로그래밍 언어와는 다르게 전통적으로 함수 레벨 스코프를 지원하였고, 블록 스코프는 지원하지 않았다. ES6 이후부터 let, const가 등장하면서 블록 레벨의 스코프를 지원 emayom.tistory.com 이전에 var, let, const의 스코프에 대해 포스팅했었는데 러닝 리액트 책을 보다가 var, let비교에 항상 보이는 예제가 있어 정리해보려고 한다! var의 문제점 var로 변수를 사용할 경우 유의해야할 점이 있다. 변수의 중복 선언 허용 변수의 유효 범위(함수 레벨 스코프) 아래는 var를 사용했을 때 변수의 유효범위로 인해 예상치 못하게 작동할 수 있는 부분에 대해 잘 이해시켜주는 예제이다. for문을 반복하며 ..

오늘은 자바스크립트 ES6에 추가된 배열 메서드 Array.from()에 대해서 알아보자! 🦖🦕 ... 우선 쉽게 예제로 바로 들어가 보자. 우연히 모던 자바스크립트 강의를 보다가 풀게 된 문제인데 내용은 아래와 같다. html 내부에 ul 태그를 살펴보면 문자열을 가진 li 요소들이 있다. 요소들을 자바스크립트 코드로 "e"를 포함한 요소들만 배열로 리턴하는 함수를 만들어라! (Array.from(), filter(), includes()를 사용!) 이걸 보시는 분이 계시다면,,,, 한 번 풀어보길 추천한다,,,,! ✳︎ let lists = document.querySelectorAll("li")으로 li 모두를 가져오게 되면 lists는 우리가 생각하는 배열이 아닌 NodeList라고 하는 유사 배..

자바스크립트 코드를 작성하며 클릭 이벤트에 이벤트 리스너(핸들러)를 등록하고 싶을 때 onclick과 같은 이벤트 핸들러로 처리를 할 수 도 있고, addEventListener()와 같은 메소드로 이벤트 리스너를 연결할 수도 있다! 그렇다면 둘의 차이는 무엇일까? 👇🏻 더보기 'on~ 이벤트 핸들러'의 경우, 하나의 이벤트에 하나의 콜백 이벤트만 발생시킬 수 있다. 'addEventListener() 메소드'의 경우, 하나의 이벤트에 여러개의 콜백 이벤트를 발생시킬 수 있다. 예시로 화면 어디든 클릭할 경우 이벤트로 alert()를 띄워주고싶을 때! 를 가정하고 코드를 작성해보자. 형식은 둘 다 비슷하다. 이벤트 리스너를 연결할 대상 + 어떤 이벤트에 반응할 것인지 + 콜백 함수 순서로 정의했다. 위의..

자바스크립트에서 html DOM에 접근하여 제어하기 위해 getElementById, querySelector, querySelectorAll 등의 Document 메소드를 통해 객체를 가져온다. querySelector ? getElementById는 주어진 id를 가진 엘리먼트(요소)를 찾아오지만, querySelector의 경우 id 혹은 class 중 주어진 선택자에 만족하는 요소를 찾아올 수 있다! //id 선택자 document.querySelector("#id"); //class 선택자 document.querySelector(".class"); 유의해야 할 점은 중복되는 id를 가진 경우 첫 번째의 요소만을 가져올 수 있는 것이다. 그렇다면 같은 선택자를 가진 모든 요소를 가져오고 싶을 때..

Date는 자바스크립트 표준 내장 객체로 날짜와 시간을 다룰 때 사용되는 객체이다. 생성자 정적 메소드 인스턴스 메소드 1. 생성자 (Constructor) - Date( ) 함수로 호출 할 경우, new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 '문자열'을 반환한다. - new Date( ) 생성자로 호출 할 경우, 새로운 Date 객체를 반환한다. 2. 정적 메소드 (Static methods) 인스턴스 생성 없이 아래와 그대로 사용! - Date.now( ) : 1970년 1월 1일 00:00:00 UTC로부터 현재까지 경과시간을 밀리초 단위 숫자 값으로 반환 - Date.parse( ) - Date.UTC( ) 3. 인스턴스 메소드 (Static methods) 인스..