본문 바로가기

JavaScript

 (36)
화살표 함수의 this # 일반함수의 this 먼저, 일반함수 내부의 this는 어떻게 동작하는지 살펴보자. const object = { name: '별코딩', main: function () { console.log(this); }, }; object.main(); // object 객체 main이라는 메서드가 있다. - 메서드 : 객체의 속성으로 넣어진 함수 main이라는 함수는 function키워드를 사용한 일반 함수. 이렇게 function키워드를 사용해서 정의된 일반함수의 경우에는 함수를 어떻게 호출하느냐에 따라서 this값이 바뀐다. this는 함수를 호출한 객체가 된다. 그렇기 때문에 이 함수를 어떤 객체가 호출했느냐에 따라 this값이 달라진다. main함수를 호출했더니, main함수 안에 this값은 obje..
자바스크립트 ES6모듈 내보내기/불러오기(export/import) 하나의 파일에서 다른 파일의 코드, 외부 라이브러리를 불러오고 싶다. example: import moment from "moment"; 위 코드는 MomentJS라는 라이브러리를 불러오는 작업을 수행하고 있다. # ES6 모듈 시스템의 이점 - import, from, export, default처럼 모듈 관리 전용 키워드를 사용하기 때문에 가독성이 좋다. - 비동식 방식으로 작동 - 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리한 측면이 있다. # 복수 객체 내보내기/불러오기 하나의 자바스크립트 모듈 파일에서 여러 개의 객체를 내보내고 불러오는 방법을 알아보자. ## 내보내기 import 키워드의 짝꿍인 export 키워드를 사용해서 명시적으로 선언한다. 이때 내보내는 변..
함수 호출 방식에 의해 결정되는 this - 1. 함수 호출 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달받는다. 자바스크립트의 경우, 함수호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 함수 호출 방식 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. apply/call/bind 호출 var foo = function () { console.dir(this); }; //1. 함수호출 foo(); // window // window.foo();와 동일 //2. 메소드 호출 va..
이벤트 리스너(event listener) : 특정 이벤트가 발생했을 때, 실행되는 함수. 이벤트 핸들러(event handler)라고도 한다. 여기서 이벤트는 웹페이지에서 발생하는 사용자의 행동(마으수 클릭, 키보드 입력 등)이나 웹페이지의 상태 변화(로딩 완료, 타이머 종료 등)를 나타낸다. JavaScript에서는 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener 함수를 사용. DOM객체.addEventListener(이벤트명, 이벤트리스너) const button = document.getElementById('myButton'); //HTML에서 id가 'myButton'인 요소 가져오기 button.addEventListener('click', function(){ // 버튼이 클릭 되었을때 실행되는 함수(이벤트리..
순수 자바스크립트를 왜 바닐라 자바스크립트(Vanilla JS)라고 할까? '바닐라 자바스크립트'라는 단어를 정말 많이 들었는데 정확한 의미를 몰랐다. 그래서 '바닐라 자바스크립트(Vanilla JS)'의 정확한 의미를 찾아보았다. 바닐라 자바스크립트란? : 프레임워크 또는 라이브러리가 적용되지 않은 '순수한' 자바스크립트를 의미한다. 즉, jQuery, Angular, Vue, React 같은 라이브러리/프레임워크를 사용하지 않은 순수한 자바스크립트를 말한다. 여기서 궁금한건, 이렇게 '순수한' 자바스크립트에 왜 '바닐라'라는 단어를 붙였을까? '바닐라'는 그 바닐라맛 아이스크림에서 그 '바닐라' 아닌가? 바닐라에 다른 의미도 있는건가? 궁금증이 많은 나는 또한번 구글링을 해보았다. 결론부터 말하면, vanilla에는 우리가 아는 그 바닐라맛의 '바닐라' 의미 뿐만 아니라 '..
객체지향 Class 문법 게임 LOL에 등장하는 캐릭터들에 대한 데이터들을 JavaScript로 정리를 하고싶다. JavaScript의 object 형태로 정리해보자. var 캐릭터1 = {name: '..'} var 캐릭터2 = {name: '..'} var 캐릭터3 = {name: '..'} var 캐릭터4 = {name: '..'} 이렇게 캐릭터가 100개가 필요하다. LOL에 등장하는 캐릭터들은 특징이 여러가지가 있다. 먼저 캐릭터 2개의 특징에 대해 정리해보자. var nunu = { q : 'consume', w : 'snowball' } var garen = { q : 'strike', w : 'courage' } 이렇게 100개의 캐릭터에 대한 특징을 정리하려면... 밤을 새야한다. 이런 작업을 쉽게 할 수 있는 ..
[JS] 연산자 - 산술연산자 산술연산자 : 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자. 덧셈, 뺄셈, 곱셈, 나눗셈이 있다. 순서대로 +, -, *, / 나누고 난 나머지를 계산해주는 연산자인 %도 존재. (%를 한국어로는 나머지 연산자, 영어로는 remainder operator 또는 modulo operator라고도 한다.) 산술 연산을 할 수 없는 경우에는 NaN을 반환. 산술 연산자는 '이항 산술 연산자'와 '단항 산술 연산자'로 구분할 수 있다. 1) 이항 산술 연산자 : 2개의 피연산자를 대상으로 연산하여 숫자 타입의 값을 만든다. 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과(Side Effect)가 없다. 다시 말해, 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 단지 새로운..
유사배열객체(array-like object) 정의 유사배열객체 : 배열처럼 보이지만 실제 key가 숫자이고 length값을 가지고 있는 객체. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사배열객체에 담겨서 온다. Example index.html(html파일) Hello World I'm Programmer javascript.js(js파일) let array = [1,2,3]; //[1,2,3] let nodes = document.querySelectorAll('.text');// NodeList[div, div, div,..] let els = document.body.children;// HTMLCollection[div,div,..,script] nodes, els값을 co..

티스토리툴바