Skip to content

Commit 8c70076

Browse files
dev-splindev-splin
committed
ADD : [Javascript] 알쓸신잡 포스팅 추가
1 parent 8c83e8b commit 8c70076

File tree

1 file changed

+197
-0
lines changed

1 file changed

+197
-0
lines changed

‎_posts/Javascript/2025-02-10-javascript-useful-to-know.md‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
---
2+
title: "[Javascript] : 알쓸신잡(알아두면 쓸모있는 신기한 잡아스크립트)"
3+
excerpt_separator: <!--more-->
4+
categories:
5+
- Javascript
6+
- 알쓸신잡
7+
tags:
8+
- Javascript
9+
- 알쓸신잡
10+
# 이미지 url (썸네일 필요한 경우 추가)
11+
image: /assets/img/thumbnail/javascript-logo.png
12+
# 기본 비노출 상태, 노출하고 싶은 경우 아래 옵션 제거
13+
# published: false
14+
---
15+
16+
다양한 자바스크립트 서적과 글을 보고 다양한 문제를 직면하면서 생소하게 느낀 부분들을 정리해논 글 입니다. (목차를 보고 관심있는 부부만 읽어도 좋습니다.)
17+
18+
> 단순히 제 주관으로 판단하고 작성하는 글이기 때문에 가이드가 될 수는 없으니 주의해주시면 감사하겠습니다 🌟
19+
{: .prompt-warning }
20+
21+
## 1. REPL(Read Eval Print Loop)
22+
기본적으로 <span class="highlighting-underline">Javascript는 컴퓨터가 한줄 씩 읽는 인터프리터 방식의 언어</span>입니다. 이 Javascript는 브라우저의 콘솔에서도 사용할 수 있습니다. 이 때, 브라우저의 콘솔에서 한 줄씩 입력(Read)받고 받은 입력을 평가(Eval)한 후 결과를 출력(Print)합니다. 그 후 다시 프롬프트가 나타나 새로운 입력을 기다립니다.(Loop)
23+
24+
이 과정을 `REPL(Read-Eval-Print-Loop)`라고 합니다.
25+
26+
## 2. Number와 parseInt/parseFloat의 차이
27+
아래의 예시와 같이 <span class="highlighting-underline">Number는 안에 들어있는 값이 전부 숫자가 아니라면 Nan(Not a Number)를 반환</span>하고 <span class="highlighting-underline">parseInt/parseFloat은 Int와 Float으로 인식할 수 있는 위치까지 읽어 해당 타입으로 반환</span>합니다.
28+
29+
```javascript
30+
Number('234오오오테스트324'); // Nan(Not a Number)
31+
​
32+
parseInt('234오오오테스트324'); // 234
33+
parseInt('234.23423오오오테스트324'); //234
34+
​
35+
parseFloat('234오오오테스트324'); // 234
36+
parseFloat('234.23423오오오테스트324'); // 234.23423
37+
```
38+
39+
## 3. 빼기(-) 연산자
40+
<span class="highlighting-underline">1 + '0' 처럼 더하기 연산자는 숫자가 문자열로 변환</span> 후, 더하기 연산을 진행하는것은 대부분이 다 아는 사실일 겁니다. 하지만, <span class="highlighting-underline">빼기 연산자는 문자열이 숫자로 바뀐 후 연산</span> 합니다. 때문에 문자열에 숫자가 아닌 다른 문자가 들어올 경우 Nan을 반환합니다.
41+
42+
즉, 위에서 말한 것 처럼 문자열이 parseInt보다는 Number가 적용되는 것이라고 볼 수 있습니다.
43+
44+
## 4. NaN끼리 비교하기
45+
값 중에서 NaN은 비교할 때 독특한 성질을 가집니다. 바로 <span class="highlighting-underline">NaN끼리 비교할 때 false</span> 값을 가진다는 것입니다.
46+
47+
```javascript
48+
> NaN == NaN;
49+
< false
50+
```
51+
52+
## 5. 문자열 코드 보기
53+
`charCodeAt()`이라는 메서드를 사용하면 해당 문자가 어떤 코드 번호를 가지고 있는지 알 수 있습니다.
54+
55+
```javascript
56+
> '&'.charCodeAt();
57+
< 65286
58+
> 'a'.charCodeAt();
59+
< 97
60+
> 'b'.charCodeAt();
61+
< 98
62+
```
63+
64+
## 6. 문자와 숫자 비교
65+
Javascript에서 <span class="highlighting-underline">문자와 숫자를 비교할 때, 문자를 숫자로 변환 후 비교</span>하게 됩니다. 이 때, 숫자로 변환할 수 없는 문자는 NaN이 됩니다.
66+
67+
```javascript
68+
> '1' < 5
69+
< true
70+
> 'abc' < 5
71+
< false
72+
```
73+
74+
## 7. !!연산자
75+
`!`가 true를 false로 false를 true로 바꿔주는 연산자이기 때문에 `!!`를 사용하면 해당 연산자를 붙인 코드가 true인지 false인지를 판단할 수 있습니다.
76+
77+
```javascript
78+
> !!false // false -> true -> false
79+
< false
80+
​
81+
> !!'' // false(''은 false) -> true -> false
82+
< false
83+
​
84+
> !!0 // false(0은 false) -> true -> false
85+
< false
86+
​
87+
> !!NaN // false(NaN은 false) -> true -> false
88+
< false
89+
​
90+
> !!undefined // false(undefined은 false) -> true -> false
91+
< false
92+
​
93+
> !!null // false(null은 false) -> true -> false
94+
< false
95+
​
96+
> !!document.all // false(document.all은 false, 잘 사용하지 않음) -> true -> false
97+
false
98+
```
99+
100+
위의 경우를 제외하고 대부분이 true이기 때문에 !!를 이용해서 해당 코드가 있는지 없는지를 판단할 수 있습니다.
101+
102+
## 8. typeof null
103+
104+
<span class="highlighting-underline">typeof null은 원래 null이 나와야 하지만 결과값은 object가 나옵니다. 이 현상은 자바스크립트의 유명한 버그</span>입니다. 언어가 만들어진 초창기에 object가 되었는데, 기존에 typeof null을 사용하는 모든 곳에 영향을 끼치기 때문에 버그를 수정할 수가 없었다고 합니다.
105+
106+
이 버그를 보고 초반 설계의 중요성에 대해 생각해볼 수 있습니다.
107+
108+
## 9. let let = '1' 선언했을 때 오류 메시지가 다른 이유
109+
`var var = 3;` 처럼 예약어를 변수의 이름으로 사용했을 때, `Unexpected token 'var'`라는 에러 메시지가 나옵니다.
110+
111+
하지만 `let let = '1'`로 선언하게 된다면 `let is disallowed as a lexically bound name`이라는 에러메시지가 나옵니다. 그 이유는 <span class="highlighting-underline">ES2015 표준 이전에는 let 선언이 없었으므로 let을 변수 이름으로 자유롭게 사용</span>할 수 있었습니다. 변수 이름 허용을 중지하도록 언어를 변경하면 let이 완벽한 변수 이름이었던 ES2015 이전에 작성된 애플리케이션이 손상될 수 있습니다. (1995년부터 2015년까지 20년 동안!)
112+
113+
let은 ES2015의 새로운 기능이었기 때문에 기존 코드를 끊을 수 없었습니다. 때문에 let을 사용할 때, let을 변수 이름으로 허용하지 않음으로써 잠재적인 구문 혼란의 원인을 피할 수 있었습니다. 때문에 ES2015전에 사용했던 var를 `var let = 3;` 같은 형식으로 사용하는 것은 올바른 문법이 됩니다.
114+
115+
## 10. 변수의 값을 변경하면 반환값이 undefined가 아니다?!
116+
117+
```javascript
118+
> let test = 1; // 처음 test를 초기화할 때는 undefined를 반환하지만
119+
< undefined
120+
> test = 2; // 해당 변수의 값을 바꾼다면, 바꾼 값을 반환합니다.
121+
< 2
122+
```
123+
124+
## 11. 빈 값을 넣을 때는 null을 사용하자!
125+
`undefined`는 빈 값이기 때문에 <span class="highlighting-underline">특정 변수에 빈 값을 넣을 때는 null을 사용함으로써, 의도적으로 null을 넣었다는 것을 표현해주는 것이 좋습니다.</span>
126+
127+
만약, `undefined`를 넣었다면, 다른 개발자나 내가 추후에 다시 해당 변수를 사용해야할 때, 기본값이라고 생각하여 상의하지 않고 값을 변경할 수도 있기 때문입니다.
128+
129+
## 12. 함수에 이름을 붙이는 방법 3가지
130+
131+
- `함수 선언문(function declaration statement)`: function예약어 다음에 이름을 붙이는 방법 ➡️ `function a() {}`
132+
- `함수 표현식(function expression)`: 변수를 만들어 함수를 넣는 방법 ➡️ `const a = function() {}`
133+
- `화살표 함수(익명 함수)`: 변수를 만들어 함수를 넣는 방법(화살표 함수는 해당 방식만 가능) ➡️ `const a = () => {}`
134+
135+
## 13. 함수의 parameter와 argument
136+
가끔 `parameter`와 `argument`를 헷갈리곤 하는데, 정확히 정의하자면 아래와 같습니다.
137+
138+
- `parameter`: 함수를 선언할 때 받는 매개변수
139+
- `argument`: 함수를 호출할 때 넣어주는 인수
140+
141+
만약 함수의 parameter(매개변수)와 argument(인수)가 일치하지 않는다면, 짝지어지지 않은 매개변수는 undefined가 되고 짝지어지지 않은 인수는 무시됩니다.
142+
143+
## 14. 객체 속성의 접근방법
144+
145+
```javascript
146+
const obj = {
147+
bc : 'hello',
148+
ab : 'hi',
149+
dc : 'world',
150+
// 아래는 특수한 이름을 가진 속성(문자열로 묶어주어야 함)
151+
'2bc' : 'unique',
152+
'a b' : 'space',
153+
}
154+
```
155+
156+
위와 같은 객체가 있을 때, 자바스크립트에서 2가지 방법으로 접근할 수 있습니다.
157+
158+
- 온점으로 구분하는 방법 ➡️ `obj.bc`
159+
- 대괄호로 구분하는 방법(이 때, 속성명을 문자열로 묶어주어야 한다는 것을 유의) ➡️ `obj['bc']`
160+
161+
이렇게 객체에 접근하는 방법이 나뉘어져 있는 이유는 '2bc', 'a b'와 같은 특수한 경우 때문입니다. <span class="highlighting-underline">속성명 앞에 숫자가 오거나 공백이 있는 경우는 obj.2bc 처럼 온점으로 구별할 수 없기 때문에 대괄호로 구분하는 방법이 있는 것</span> 입니다.
162+
163+
## 15. 배열과 함수도 객체다?!
164+
165+
자바스크립트에서 배열과 함수도 객체이기 때문에 객체와 같이 속성을 정의할 수 있습니다.
166+
167+
```javascript
168+
function hello() {}
169+
hello.a = 'really?';
170+
​
171+
const array = [];
172+
array.b = 'wow';
173+
​
174+
console.log(hello.a);
175+
console.log(array.b);
176+
```
177+
178+
즉, <span class="highlighting-underline">배열과 함수는 객체를 각각 배열과 함수모양으로 만들어 놓은 것</span>이라고 생각하면 됩니다. 하지만, 목적에 맞게 사용하는 것이 중요합니다.
179+
180+
## 17. 문자열의 split 구분자를 배열에 포함시키는 방법
181+
182+
문자열의 특정 구분자로 문자열을 배열로 분리할 때, split을 사용합니다. 이 때, 정규 표현식을 사용하면 구분자를 배열에 포함하여 분리할 수 있습니다.
183+
184+
```javascript
185+
const content = '해시태그를 뽑아 봅시다. #해시태그 #테스트#붙어있는해시';
186+
const result = content.split(/(#[^ #]+)/); // 배열에 포함시킬 정규표현식을 괄호()로 감싸줍니다.
187+
188+
// ['해시태그를 뽑아 봅시다. ', '#해시태그', ' ', '#테스트', '', '#붙어있는해시', '']
189+
console.log(result);
190+
```
191+
192+
---
193+
194+
**참고 링크**
195+
196+
- [[리뉴얼] 렛츠기릿 자바스크립트](https://www.inflearn.com/course/%EB%A0%88%EC%B8%A0%EA%B8%B0%EB%A6%BF-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8){:target="_blank"}
197+
- [MDN](https://developer.mozilla.org/ko/){:target='_blank'}

0 commit comments

Comments
 (0)