개념 함수 실행(해석) 과정 자바스크립트에서 가장 많이 사용하는 오브젝트는 단연 함수(function) 오브젝트일 것이다. 단순 반복을 줄여주는 함수는 개발에 있어 필수적인 도구지만, 함수가 어떻게 작동하는 지는 알지 못했고 굳이 함수가 어떤 원리로 구현되는지 알려고 하지도 않았다. 자바스크립트를 사용하는 개발자 입장에서, 단순히 "함수는 그냥 그런 애니까~"라며 함수의 작동 원리를 그냥 지나쳐버리는 건 굉장히 모순적인 일이다. 그냥 함수를 코드로써 치기만 했다면, 이번에는 개발자 입장이 아닌 스스로가 자바스크립트 엔진이 되었다고 생각하고 내 몸의 함수를 접했을 때 어떻게 반응을 보이는지 이해해보자. function book(){ var title = "Good"; // 변수 선언 function get..

개념 indexOf() 생긴 것부터 인덱스의 위치를 알려주는 것처럼 생긴 함수가 있다. 이름은 indexOf()로, String 타입과 Array 타입에서 파라미터안에 있는 특정 문자의 위치를 찾아주는 역할을 한다. 예를 들어, str.indexOf('가')라고 하면 str 변수 안에서 '가' 문자의 인덱스 위치를 반환해준다. (Number 타입에서는 indexOf() 함수가 통하지 않으니 주의해야 한다.) 그냥 인덱스 위치만 알려주는 데 쓸모가 있냐라고 물어본다면, "매우!"라고 대답할 수 있다. 그 이유는 바로 indexOf() 함수를 통해 문자 혹은 배열에 특정 문자가 있는지 "체크"할 수 있기 때문이다. let arr = ['가', '나', '다']; arr.indexOf('가') // 0 arr..

개념 프로퍼티 디스크립터란, ES5부터 지원하는 기능으로 프로퍼티의 속성 이름과 값을 정의한다. 일반적으로 객체를 만들 때, 혹은 객체를 수정할 때 쓰는 기능이라고 생각하면 된다. 그런데 객체를 만들 때 간단하고 쉬운 방법이 많은데, 디스크립터도 꼭 알아야 할까? 디스크립터는 객체의 속성을 추가, 삭제, 금지 할 수 있지만 역으로 하지 못하게 할 수도 있다. 즉, 디스크립터는 보안에 강점을 가지고 있으며 이 뿐만 아니라 알아두면 여러모로 쓸 일이 많은 기능이니까 알아두는 게 좋다. 프로퍼티 디스크립터에는 3가지 분류가 있다. 1) 데이터 프로퍼티 디스크립터 : value, writable 2) 액세스 프로퍼티 디스크립터 : get, set 3) 공용 프로퍼티 디스크립터 : enumerable, confi..

개념 자바스크립트의 DOM을 공부하다보면, 이벤트 핸들러라는 개념을 쉽게 접할 수 있다. 이벤트 핸들러란, '어떤 이벤트를 실행했을 때, 해당 코드를 실행시켜라'에서 "어떤 이벤트"를 담당한다. 그중에서도 쉽게 접할 수 있는 게 onclick과 onsubmit인데, 처음 이벤트 핸들러를 접하는 사람의 경우 이 두 개념을 혼동할 수 있어서 쉽게 정리해보려고 한다. onclick 동의1 동의2 동의3 submit.onclick = function (){ if (agree1.checked && agree2.checked && agree3.checked){ alert('제출이 완료되었습니다.') } else { alert('모두 동의해주세요.') } } onclick은 말그대로 '클릭 되었을 때'를 뜻한다. b..

개념 this란 객체에서 빼놓을 수 없는 속성이라고 할 수 있을 정도로 중요한 개념이다. 하지만, 중요한 만큼 헷갈리는 부분도 많다. 우선 쉽게 말하자면 this는 코딩하는 그 순간에는 당장 의미가 없는 아이지만, 호출당하는 순간 그 의미가 발하는 게 this이다. 호출당한 this는 호출당한 객체 그 자신으로 변신하며 그 객체 안의 키 값을 불러오는 역할을 한다. this는 쓰면 유용한 아이지만, 그렇다고 무작정 쓰는 아이도 아니다. 그렇다면 this는 어떨 때 어떤 방식으로 쓰는 게 맞을까? 아래의 4가지 방식만 기억하면 된다. 일반 함수 방식 function hello(){ console.log(this); } hello(); // window 객체가 아닌 일반적인 함수 안에 this를 사용하게 되..