this와 $(this)의 차이점은 매일 찾아봐도 매일 헷갈립니다🙄
둘은 불리는 명칭도 같기 때문에 자바스크립트와 제이쿼리를 번갈아가면서 쓰는 사람(제가 그렇습니다)한테는 정말 복병과도 같은 친구들이죠. 얄미워죽겠습니다.
javascript에서 쓰던 this를 사용하기 위해 jQuery에서 $(this)를 선언했더니 내가 원하던 결과가 나오지 않네요. 이상합니다. 분명 javascript에서는 잘 사용됐는데 왜 jQuery에서만 이러는지🤨
그 이유는 (1) this가 나타내는 정보와 (2) $(this)가 나타내는 정보가 같지 않아서인데요.
솔직히 이렇게 말해도 이해가 안 되는 분들이 더 많을 거라고 생각합니다. 그렇다면 바로 콘솔에 찍어서 확인해볼까요?
(콘솔 짱! 콘솔을 생활화합시다!😙👍)
div 박스를 하나 만들고 this와 $(this)를 한 번 확인해볼게요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- div.box를 만들어봅시다--> <div class="box">
box
</div>
</body>
</html>
|
cs |
위와 같이 class로 box를 가지고 있는 div를 하나 만들어주었습니다.
그럼 이제 div.box 를 클릭했을 때 각각 콘솔로 this의 값과 $(this)의 값이 나오게 해봐야겠죠?
원랜 js 파일을 따로 분리해야하지만 너무 귀찮으니까 html 파일 안에 <script></script>를 작성해서 확인해보겠습니다.
$(this)를 확인하기 위해서는 jQuery파일이 필요해서 예전에 쓰던 jQuery파일을 가지고왔습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- div.box를 만들어봅시다 -->
<div class="box">
box
</div>
<!-- $(this)는 jQuery가 있을 때만 확인이 가능하기 때문에 가지고있던 jQuery 파일을 연결해주었어요 -->
<script src="./jquery-3.5.1.min.js"></script>
<script>
const box = document.querySelector('.box');
box.addEventListener('click',function(){
console.log(this);
console.log($(this));
});
</script>
</body>
</html>
|
cs |
<script>
const box = document.querySelector('.box');
box.addEventListener('click',function(){
console.log(this);
console.log($(this));
});
</script>를 추가로 작성해서 div.box 를 클릭했을 때,
(1) javascript가 받아오는 this 의 값과
(2) jQuery가 받아오는 $(this) 의 값이 console에 찍히도록 작성해보았습니다.
와, 둘이 완전히 다른 값을 받아오네요.
첫번째부터 살펴볼까요?
(1)
console.log(this); 를 해본 결과
" <div class="box">box</div>" 라는 html요소 값을 전달해줍니다.
즉, this는 이벤트가 발생했을 때, 해당 이벤트가 실행된 다시 말해 클릭당한 요소에 대한 정보를 전달해주는군요.
저는 방금 html에서 만든 <div class="box">box</div> 를 클릭했으니 console에서 정확하게 이벤트 정보를 받은 요소의 정보를 알려준다는 것을 확인할 수 있었습니다.
(2)
console.log($(this)); 의 결과는 어떨까요?
S.fn.init [div.box] 어쩌구저쩌구 하면서 console.log(this); 를 했을 때보다 더 많은 값을 주고 있습니다.
위와 같이 console.log($(this)); 를 했을 때 받아오는 정보값들은 객체(Object)로 표시가 되는데요, 쉽게 말해서 <div class="box">box</div>의 정보값을 알려주는 것입니다.
"length: 1" 이라고 하는 걸 보니 우리는 클릭한 div의 개수가 1개란 것을 알 수 있습니다🤗
그런데 잘 보면
▶ 0: div.box
라고 표시가 되어있죠?
div.box 라고 하는 걸 보니 왠지 console.log(this); 를 했을 때와 똑같은 정보값을 가져와줄 것 같은데
한 번 같은 값을 가지고오는지 확인해봅시다.
방금 작성했던 script 코드를 다시 열어주시구요,
console.log의 내용을 조금 수정해볼까요?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- div.box를 만들어봅시다 -->
<div class="box">
box
</div>
<!-- $(this)는 jQuery가 있을 때만 확인이 가능하기 때문에 가지고있던 jQuery 파일을 연결해주었어요 -->
<script src="./jquery-3.5.1.min.js"></script>
<script>
const box = document.querySelector('.box');
box.addEventListener('click',function(){
console.log(this);
console.log($(this)[0]);
});
</script>
</body>
</html>
|
cs |
console.log($(this)); 라고 적었던 것을
console.log($(this)[0]); 라고 수정해보았습니다. 그리고나서 console값을 확인해보면...
완벽하게 똑같은 값을 출력하는 것을 확인할 수 있습니다👍 멋지네요!
console.log($(this)[0])을 살짝 응용해서
length의 값인 "1" 을 가져와볼까요?
별 거 없습니다!
아래와 같이 적어주시면 돼요.
|
1
2
3
4
5
6
7
8
9
|
<script>
const box = document.querySelector('.box');
box.addEventListener('click',function(){
console.log($(this)[0]);
console.log($(this)['length']);
console.log($(this).length);
});
</script>
|
cs |
console.log($(this)['length']);
console.log($(this).length); 를 적어주시면 아래와 같은 값을 받아올 수 있습니다
완벽해요! div.box 의 length 값도 정확하게 받아왔네요.
정확히는 console.log($(this)['length']); 와 console.log($(this).length); 는 다른 것이지만 그건 다음에 기회가 되면 자세히 알아보도록 하겠습니다.
궁금증을 바로 해결하고 싶으신 분들은 "js object"를 검색하시거나, 혹은 아래의 참고링크에서 내용을 확인해보시면 될 것 같아요.
참고링크: TCP SCHOOL.com 객체의 개념
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
수고하셨습니다!😆
'📁 Language > 🟨 Javascript' 카테고리의 다른 글
| [Javascript] Object.keys() 객체 안 키값 개수 구하기 (0) | 2024.09.02 |
|---|---|
| [jQuery] focus 이동 (0) | 2024.08.29 |
| [jQuery] 숫자 증가 애니메이션 (0) | 2024.08.29 |
| [Javascript] 1000단위 ',' 표기 함수 (0) | 2024.08.29 |
| [Javascript] 금액 단위 한글 변환 함수 (0) | 2024.08.29 |
