[공부 필기] JavaScript 문법 공부 13일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/nullish-coalescing-operator

nullish 병합 연산자 '??'

 

✅ nullish 병합 연산자 '??'

- 스펙에 추가된 지 얼마 안 된 문법이다. (구식 브라우저는 폴리필이 필요하다)

- nullish 병합 연산자(nullish coalescing operator)는 ?? 이다.

- 이 연산자를 이용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는(?) 변수를 찾을 수 있다고 한다.

 

- 예시

a ?? b

- 위의 코드는 이런 의미이다.

- a가 null이 아니고, undefined도 아니면 a

  그 외의 경우는 b

 

- 너무 어려운데, 쉽게 정리해보자면 위의 코드는 아래와 같이 변경할 수 있다. (동일한 동작)

(a !== null && a !== undefined) ? a : b

 

✅ 활용

- 이 연산자를 활용해서 이런 코드도 짤 수 있다고 한다.

   ► firstName, middleName, lastName 중 실제 값이 있는 변수를 찾기

   ► 만약 세 변수 모두 값이 없다면 '익명의 사용자' 반환

let firstName = null;
let middleName = null;
let lastName = "Kim";

let result = firstName ?? middleName ?? lastName ?? "익명의 사용자";

- firstName의 변수가 null이 아니거나 undefined가 아니면 "firstName" 변수 반환

   null이거나, undefined이면 "middleName" 반환

- 이 문장을 수행하고 나면 아래와 같은 코드가 된다.

let firstName = null;
let middleName = null;
let lastName = "Kim";

let result = middleName ?? lastName ?? "익명의 사용자";

- middleName의 변수가 null이 아니거나 undefined가 아니면 "middleName" 변수 반환

   null이거나, undefined이면 "lastName" 반환

- 이 문장을 수행하고 나면 아래와 같은 코드가 된다.

 

let firstName = null;
let middleName = null;
let lastName = "Kim";

let result = lastName ?? "익명의 사용자";​

- lastName의 변수가 null이 아니거나 undefined가 아니면 "lastName" 변수 반환

   null이거나, undefined이면 "익명의 사용자" 반환

- lastName은 값이 있으므로, result 변수에는 lastName이 대입된다.

 

✅ ??와 || 의 차이

- ??와 || 연산자는 상당히 유사해 보이지만 두 연산자 사이에는 중요한 차이점이 있다.

- OR 연산자(||) : 첫번째 truthy 값을 반환한다.

- nullish 병합 연산자(??) : 첫번째 정의된(defined) 값을 반환한다.

 

- null, undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점이 매우 중요한 역할을 한다.

- 예시1.

let height1;
/* Case1. */ height1 = height1 ?? 100; // 100
let height2;
/* Case2. */ height2 = height2 || 100; // 100

   ► height는 undefined이기 때문에 이 경우에는 두 변수 모두 100이 할당된다.

- 예시2.

let height1 = 0;
/* Case1. */ height1 = height1 ?? 100; // 0
let height2 = 0;
/* Case2. */ height2 = height2 || 100; // 100

   ► OR 연산자(||)에서 숫자 0은 null 이나 undefined를 할당한 것과 동일하게 처리되지만 (= false)

   ► nullish 병합 연산자(??)에서 숫자 0은 그냥 숫자 0이다. 

       nullish 병합 연산자는 null이나 undefined일 때만 숫자 100이 된다.

- 만약 높이와 같이 0이 할당될 수 있는 변수를 사용해 기능을 개발한다면 OR 연산자(||)보다 nullish 병합 연산자(??)가 더 적합할지도 모른다.

 

※ 주의사항1

- nullish 병합 연산자(??)는 우선순위 5로, 낮은 편에 속한다.

- 정리하면, nullish 병합 연산자(??)는 대입 연산자(=)나 조건부 연산자(?) 보다는 우선순위가 높지만, 대부분의 연산자보다는 낮다.

 

※ 주의사항2

- nullish 병합 연산자(??)는 안정성 관련 이슈 때문에 && 나 || 와 함께 사용하지 못한다.

   ► 만약 사용하려고 한다면 문법 에러가 발생한다.

- 다만, 소괄호로 묶으면 이 제약을 피할 수 있다.

 

---

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/while-for

while과 for 반복문

 

✅ 반복문

❖ while문

- 예시

   ► 변수 i의 이름은 iterator(반복자)에서 따왔다.

let i = 0;
while (i < 10) {
	console.log("Hello World!");
	i++;
}

- i++이 없다면 반복문은 영원히 계속 반복됐겠지만, 사실 브라우저는 무한 반복을 멈추게 하는 실질적인 수단을 제공한다고 한다.

   ► 서버 사이드 자바스크립트도 이런 수단이 있다고 한다.

   ► 근데 못찾았다.. 어떻게 하는거지..

 

❖ for 반복문

for (let i = 0; i < 10; i++)
	console.log("Hello World!");

- 이 때, 변수 i는 인라인 변수이며, 이렇게 선언하는 방식을 인라인 변수 선언이라고 한다.

   ► 바로 위의 코드에서 변수 i는 반복문(fo문) 안에서만 접근할 수 있다.

 

 

※ continue는 중첩을 줄이는데 더 도움을 준다.

만약 아래와 같은 코드가 있다면, if (i % 2) 안의 코드가 길어질수록 가독성이 떨어질 수 있다.

중괄호 안에서 alert을 호출하기 때문에 중첩 레벌도 하나 더 늘어난다.

따라서 continue를 이용해서 코드를 수정해줄 수도 있다. (동작 결과는 동일)

for (let i = 0; i < 10; i++) {
	if (i % 2) {
    	alert(i);
        ...
    }
}

for (let i = 0; i < 10; i++) {
	if (!(i % 2)) continue;
    alert(i);
}

 

✅ break/continue, 그리고 레이블

- 여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우가 종종 있다.

- 아래와 같이 중첩 반복문이 있다고 가정.

for (let i = 0; i < 9; i++) {
	for (let j = 0; j < 9; j++) {
		prompt(`x = ${i}, y = ${j}의 값을 입력하세요.`, "");
	}
}

- prompt 창을 입력하던 중 사용자가 중간에 Cancel 버튼을 누르면 반복문을 중단시켜야 한다.

- 이를 코드로 구현해야하는데... 아래와 같이 break; 를 한개만 추가하면 가장 가까운 for문만 빠져나오게 된다.

   ► 모든 반복문을 빠져나오는게 아니다

for (let i = 0; i < 9; i++) {
	for (let j = 0; j < 9; j++) {
		if (prompt(`x = ${i}, y = ${j}의 값을 입력하세요.`, "") == null)
			break;
	}
}

- 이럴 때 사용하는 것이 [레이블]이다.

- 레이블은 일종의 식별자이다. 레이블은 아래와 같이 반복문 앞에 콜론과 함께 쓴다.

   ► 아래의 코드에서 [outer]가 레이블에 해당한다.

outer: for (let i = 0; i < 9; i++) {
...

- 그리고 break [레이블명];을 입력하면 해당 레이블의 반복문을 빠져나올 수 있다.

outer: for (let i = 0; i < 9; i++) {
	for (let j = 0; j < 9; j++) {
		if (prompt(`x = ${i}, y = ${j}의 값을 입력하세요.`, "") == null)
			break outer;
	}
}

- break 뿐만 아니라 continue [레이블명]; 도 가능하다.

 

※ 주의

- 레이블은 마음대로 jump하기 해주는 기능이 아니다.

- 일단 레이블은 break나 continue와 함께 사용할 수 있고,

   레이블은 break나 continue 지시자의 위에 있어야 한다.

 

- 잘못된 예1. 레이블이 break 밑에 있다. 

break outer;

outer: for (let i = 0; i < 9; i++) {
   ...
   break outer;
}