이 글은 [모던 JavaScript 튜토리얼]을 공부하며 정리한 글입니다.
👉 기본 환경
- Language: JavaScript
- IDE: VS code
4. 변수와 상수
변수 규칙
- 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없음
- 특수기호는 $와 _만 사용할 수 있음
⭐ 변수명 짓기
|
1
2
3
4
5
6
|
// 우리가 살고 있는 행성
let ourPlanetName = "Earth";
// 현재 접속중인 방문자 이름
let currentUserName = "John";
|
* planet이라는 단순한 이름보다는 어떤 행성의 이름인지를 설명하는 것이 중요
* userName이라는 단순한 이름보다는 현재 접속중인이라는 상태를 설명하는 것이 중요
|
1
2
3
4
5
6
|
// 대문자 상수: 기억하기 어려운 하드 코딩한 값의 별칭을 만들 때 주로 사용
const BIRTHDAY = '18.04.1982';
// 일반 상수: 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않을 때 주로 사용
const age = calculateAge(birthday);
|
* 대문자 상수는 상수 중에서도 실행과 무관하게 변경되지 않는 값에 사용
* 일반 상수는 런타임 이후 변경되지 않는 값에 사용
5. 자료형
* null
- ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값
- typeof null의 = "object"
- null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황
- Number(null) = 0;
* undefined
- 변수는 선언했지만, 값을 할당되지 않은 상태
- Number(undefined) = NaN;
* typeof
- 인수의 자료형을 반환
⭐ 단, 내부 규칙에 의하여
- null == undefined (true)
- null === undefined (false)
6. alert, prompt, confirm을 이용한 상호작용
* alert
- alert();
- 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있음
* prompt
- prompt(텍스트 메세지, [입력 필드의 초깃값]);
- 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창 발생
* confirm
- confirm();
- 사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여짐, 사용자가 확인 버튼을 누르면 true / 취소 버튼이나 Esc를 누르면 false 반환
8. 기본 연산자와 수학
|
1
2
3
|
let cal1 = 2 + 2 + '1' // 41
let cal2 = '1' + 2 + 2 // 122
|
* + 연산자
- 피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환
- 다른 연산자의 경우, 문자열을 숫자로 바꾼 후 연산
- 단항 연산자로 사용 시, 피연산자가 숫자가 아닌 경우엔 숫자형으로 변환
* + 연산자 이 외 연산자
- 문자열이 숫자형으로 변할 땐 공백을 만드는 문자 \t와 \n, 일반적인 공백 제거
⭐ 코드 한 줄엔, 특정 동작 하나에 관련된 내용만 작성하는 게 좋음
9. 비교 연산자
* === 일치 연산자
- 자료형의 동등 여부까지 검사
- switch문은 조건을 확인할 때 내부적으로 일치 연산자 ===를 사용해 비교
* == 동등 연산자, < > <= >= 기타 연산자
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// null
alert( null > 0 ); // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true
// undefined
alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)
// null & undefined
alert( null === undefined ); // false
alert( null == undefined ); // true
|
- null과 undefined를 == 연산자로 비교하면 true를 반환하지만, 다른 값과 비교하면 무조건 false를 반환
* 사전순 비교 유의
|
1
2
3
|
2 > 12; // false
"2" > "12" // true("2"와 "1"을 비교)
|
- 크고 작음을 비교하는 연산자의 피연산자로 문자열이 들어오면 글자 단위로 크기 비교가 이뤄짐
⭐ 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 확인하여 따로 처리하는 코드를 추가
11. 논리연산자
* ||
- 첫 번째 truthy를 찾는 OR 연산자
- 각 피연산자를 불린형으로 변환 → 변환 후 값이 true이면 연산을 멈춤 → 해당 피연산자의 변환 전 원래 값을 반환
- 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환
- 옵션값과 Default 값에서 사용
* &&
- 첫 번째 falsy를 찾는 AND 연산자
⭐ AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높음
⭐ if를 ||나 &&로 대체 X
|
1
2
|
alert( alert(1) || 2 || alert(3) );
|
* 첫 번째 얼럿 창에 1이 출력
→ alert()은 undefined를 반환: falsy
→ 2는 truthy이기 때문에 실행이 멈추고 2가 반환
|
1
2
|
alert( null || 2 && 3 || 4 );
|
* 2 && 3 = 3
→ null || 3 || 4
→ 3
|
1
2
|
if (null || -1 && 1) alert( 'third' );
|
* -1 && 1
→ null || 1
→ 1
12. nullish 병합 연산자 '??'
* ??
- 정확하게 null이나 undefined일 경우에만 false (0 제외)
- ⭐ &&나 ||와 함께 사용하지 못함(단, 괄호 사용 시, 사용 가능)
|
1
2
3
|
// height가 null이나 undefined인 경우, 100을 할당
height = height ?? 100;
|
??는 변수에 기본값을 할당하는 용도로 사용할 수 있음
13. ‘while’ 반복문
⭐ ‘?’ 오른쪽엔 break나 continue가 올 수 없음
|
1
2
3
|
for (let i = 0; i < 5; ++i) alert( i );
for (let i = 0; i < 5; i++) alert( i );
|
두 경우 모두 0부터 4까지 출력
|
1
2
3
4
5
6
|
let num;
do{
num = prompt("Enter the number", 0);
}
while(num<=100 && num)
|
num이 null이거나 undefined일 경우, 숫자로 형변환하면 0이 되므로 falsy를 판단하는 추가적 조건문 필요
15. 함수
|
1
2
3
4
5
6
7
|
let from = 'Ann';
function showMessage(from, text = "no text given") {
alert( from + ": " + text );
}
showMessage("Ann"); // Ann: no text given
|
* 매개변수에 인자를 넘겨주지 않을 경우, undefined 출력
default값 설정을 위해 대입 연산자 활용
|
1
2
3
4
5
6
7
8
9
|
function doNothing() { /* empty */ }
alert( doNothing() === undefined ); // true
function doNothing() {
return;
}
alert( doNothing() === undefined ); // true
|
* return문이 없거나 return 지시자만 있는 함수는 undefined를 반환
|
1
2
3
|
return
(some + long + expression + or + whatever * f(a) + f(b))
|
⭐ return 부분을 개행할 경우, return; 처리되는 것에 유의
만일 개행이 필요할 경우, () 활용
|
1
2
3
4
5
6
|
return (
some + long + expression
+ or +
whatever * f(a) + f(b)
)
|
16. 함수 표현식
|
1
2
3
4
5
6
|
function sayHi() { // (1) 함수 생성
alert( "Hello" );
}
let func = sayHi; // (2) 함수 복사
|
* sayHi 다음에 괄호가 없음에 유의
- 괄호가 있었다면 func = sayHi() 가 되어 sayHi 함수 그 자체가 아니라, 함수 호출 결과(함수의 반환 값) 가 func에 저장
|
1
2
3
4
5
6
|
sayHi("John"); // Hello, John
function sayHi(name) {
alert( `Hello, ${name}` );
}
|
함수 선언문, sayHi는 스크립트 실행 준비 단계에서 생성되기 때문에, 스크립트 내 어디에서든 접근할 수 있음
|
1
2
3
4
5
6
|
sayHi("John"); // error!
let sayHi = function(name) { // (*) 마술은 일어나지 않습니다.
alert( `Hello, ${name}` );
};
|
함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어짐
⭐ 함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있는 함수 선언문 방식을 따르는 게 좋음
- 함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋음
17. 화살표 함수 기본
- 본문이 한 줄인 함수를 작성할 때 유용
- 본문이 여러 줄로 구성되었다면 중괄호를 사용
* 이 경우, 반드시 return 지시자를 사용해 반환 값을 명기
'JavaScript > JavaScript' 카테고리의 다른 글
| [JAVASCRIPT.INFO] 객체: 기본 (1) | 2023.10.20 |
|---|---|
| [JAVASCRIPT.INFO] 코드 품질 (0) | 2023.10.15 |
| [ReactJS_Complete] Useful JavaScript Function (0) | 2023.05.25 |
| [ReactJS_Complete] Destructuring (0) | 2023.05.24 |
| [ReactJS_Complete] Exports and Imports (0) | 2023.05.24 |