$의 의미, 변수 선언자, 사용자 동작 예시 코드

1. $의 의미

Javscript에서 $을 사용해서 동작을 제어하는 코드를 많이 볼 수 있다. $는 getElementById()의 줄임말이다. JQuery를 비롯한 많은 라이브러리에서 지원하며, 라이브러리를 사용하지 않더라도 사용자가 다음의 코드로 정의해서 사용할 수도 있다.

function $(x) {return document.getElementById(x);} 

1-1. JQuery 의 기초 문법

한편, JQuery에서는 $(function(){});와 같은 형태의 문법도 활용한다. 기존의 설명만 놓고 보면 'function을 id로 접근하는건가? 이상한데..' 라는 의문이 들었다. 찾아보니 이는 JQuery의 축약 문법이었다.

다음의 두 코드는 같은 의미이다.

$(document).ready(function(){ });

$(function(){ });

그러니까 document.ready가 생략이 된 것이다. 코드를 직역하면 "document가 준비가 되면, 함수를 사용해라" 정도가 될 것 같다.

Reference

https://www.thoughtco.com/and-in-javascript-2037515
The Dollar Sign($) and Underscore(_) in Javascript
https://theqoop.tistory.com/295
[jQuery] 시작과 기본 문법 $(function(){ });

2. Javascript의 변수 선언자

var, let, const 모두 javascript에서 변수를 선언하는 선언자이다.

var

let과 const가 나오기 이전에 널리 활용된 선언자이다. 그냥 선언하고 값을 집어넣으면 변수가 되는 장점이 있다. 코드 블럭 내부가 아닌 전체에서 선언되는 global variable이고, 이전에 선언했어도 다시 선언이 되어버리는 문제가 있다.

let,const

var의 문제를 해결하기 위해 ES6 버전부터 새롭게 지원하는 변수 선언자이다. 둘 다 block 단위에서 선언이 되는 변수이다. 차이가 있다면 let은 선언 후 값을 변경할 수는 있지만, const는 한 번 선언하면 값을 변경할 수도 없는 상수의 개념이다. 다만 const도 객체나 배열과 같은 참조 형태로 받게 되면, 그 참조 형태로 받은 자료의 내부는 바꿀 수 있다.

Reference

https://gmlwjd9405.github.io/2019/04/18/javascript-variable-and-type.html [JavaScript] 자바스크립트의 변수, 연산자, 타입의 종류

3. 예시 코드

$(function(){
    $('.next_btn').click(function(e){
        let divs = $(this).parent().prev().children();
        let inputs = divs.find('input:checked');
        if(inputs.length < 1){
            alert('문항이 선택되지 않았습니다.')
            return false;
        }
        e.preventDefault();
        scrollDown();
    });
});

오늘 배웠던 코드 중 일부를 떼어왔다. e.preventDefault();를 넣어서 이벤트 초기화를 해주는 부분은 기억해두면 좋을 것 같다.