[ 3D Web : Front_JavaScript ] 자바스크립트 label(레이블) 과 흐름제어.
∇ 자바스크립트 : Label(레이블) & 흐름제어.
목 차
1. 자바스크립트 언어를 구성하고 있는 요소들.
2. 흐름제어와 레코드
3. 레이블(Lael)
4. 레이블의 특징
5. if문 & else if
6. Optional(선택) & Mandatory(필수)
7. 스위치(Switch)
8. 런타임 스위치.
※ 자바스크립트 엔진의 구동
브라우저가 HTML 문서를 파싱하여, 각각의 DOM 엘리머트로 변환
===
자바스크립트 엔진은 JS문법으로 작성된 단순 텍스트 파일을 파싱하고 메모리에 적재한 후 실행 !
Ⅰ. 자바스크립트 언어를 구성하고 있는 요소들.
A. Statement ( 문 )
- 다양한 작업을 수행하는 "실행 단위"
ex) 변수 선언, 조건문, 반복문, 함수 호출 등등
B. Expression ( 식 )
- '식'은 값을 생성하고 평가하는 하나의 "코드 조각"을 의미합니다.
== 값을 표현하는 방법들은 전부 식으로,
== 값 자체도 식이며 변수 할당, 연산 ,함수호출 등을 포함합니다.
※ '문' 과 '식'의 구분은 변수에 할당할 수 있는 있는가? 로 판단하면 쉽습니다.
[ 식은 값을 반환하고, 결과가 메모리에 저장 ! ]
C. Identifier ( 식별자 )
- '식별자' 는 변수, 함수, 객체 속성 등의 이름을 나타냅니다.
== 코드에서 값을 참조하는데 사용됩니다.
== ex) 변수 이름, 함수 이름.
☆ ☆ ☆
위 요소들은 JavaScript 프로그래밍에서 중요한 역할을 하는데,
문은 코드의 실행 흐름을 제어하고 조작하며,
식은 값의 계산과 데이터 조작에 활용되고,
식별자는 데이터를 저장하고 참조하는 데에 필요한 이름을 제공합니다.
Ⅱ. 흐름제어와 레코드.
A. 흐름 (Flow)
: 프로그램이란 메모리에 적재 되어있는 명령어의 순차적인 실행이며,
여기서 흐름(Flow)이란, 메모리에 적재된 명령어들이 순차적으로 실행되는 과정.
B. 흐름 제어 (Flow control)
: 순차적인 명령어의 실행은 기본적으로 멈출 수 없어서 모든 명령어가 끝날 때까지 계속 실행되는데,
이러한 flow에 관여하는 것이 flow control(흐름제어)입니다.
++ 일반적으로 흐름제어를 하지 않으면 flow(흐름)는 일자로 쭉 흘러가지만,
흐름제어를 하게 되면 흐름방향을 선택(if문) 하거나 흐름을 반복(for문) 할 수 있는 권한을 획득.
C. 레코드 (Record)
: 자바스크립트 엔진은 우리가 작성한 JS 코드를 파싱하고, 모든 문을 레코드 단위로 파싱하는데
이 '레코드'에는 '문의유형' * '실행되어야 할 코드' * '변수 및 함수 선언' * '조건문 블록' 등과 같은 정보가 포함되며
엔진 내부에서 코드 실행을 추적하고 제어하기 위한 데이터 구조를 나타냅니다.
Ⅲ. 레이블 ( Label )
loop: // loop라는 레이블 정의
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === 1 && j === 1) {
break outerLoop; // loop 레이블로 점프하는 break 문
}
}
}
다중 for문에서 탈출하려면, 레이블을 써야 합니다.
- '레이블'은 과거, 코드가 if문과 for문 같은 제어문을 도입하기 전에
직접 원하는 곳으로 코드를 이동시키던 흔적 -- 가장 원초적인 흐름제어 기법인 셈 !
- 자바스크립트에서 유일하게 흐름제어를 직접 하는 기법입니다.
- 현대의 레이블과 과거의 goto문은 약간의 차이가 있는데
직접 지점을 정해서 이동할 수 있는 goto문과 달리,
레이블은 break와 continue를 통해서 아래로만 흐르기 때문에 위쪽에 있는 레이블로 돌아갈 수 없습니다.
Ⅳ. 레이블 ( Label ) 의 특징.
1) 런타임 이전 평가.
- 자바스크립트의 문(Statement)은 런타임에서 에러가 나지만, 레이블 문에 구문 오류가 있을 경우,
런타임 이전에 파싱 단계에서 발견되어 프로그램이 실행되기 전 에러가 발생.
->> 자바스크립트의 구문 오류를 런타임 오류보다 이른 시점에 발견 가능하고 수정 가능하도록 도와주기에
파싱 단계에서 오류가 발생하고 해당 코드는 실행되지 않고 좀 더 안전하다는 특징,
2) 점프 되는 위치.
- 레이블의 특징 중 하나는 ' break label'을 했을 때, 해당 레이블의 이름으로 가는 것이 아니라,
해당 블록의 끝으로 간다는 점이 특징.
label: 1️⃣
for (let i =0; i < 5; i++) {
if(i === 3) break label
// 점프하면 1번에서 다시 반복문을 실행하는게 아닌 해당 블록의 끝인 2번으로 간다
} 2️⃣
3) Auto Label
for문이나 while문은 레이블 이름 없이, break만 걸었는데
어디로 가야할지 어떻게 알 수 있을까?
for (let i =0; i < 5; i++) {
if(i === 3) break
}
label:
for (let i =0; i < 5; i++) {
if(i === 3) break label
}
++ 암묵적으로 JS엔진이 임의의 레이블을 만들어서 break labelName 이런식으로 자동으로 삽입해준 것,!
++ 내가 직접 for문에 명시적으로 레이블 이름을 적을 수도 있지만,
레이블을 생략할 경우 레이블을 명시적으로 삽입하여 동작 !
==>> 따라서, for, while, switch 문에서 자동으로 auto Label 기능으로 인해 레이블처럼 동작하여
break가 돌아갈 지점을 자연히 알고 있게 됩니다.
Ⅴ. if문 & else if.
★ 흐름제어 기법의 또 다른 종류인 if문.
- if문은 간단하지만 실수하기 쉬운 몇 가지를 정리해보려고 합니다.
- > 사실, else if 라는 문법은 특별한 키워드가 아니라, else문에 새로운 if문이 있는 것과 동일합니다.
- 즉, else 뒤에 새로운 문이 올 수 있고
그렇기 때문에 else switch던, else for, else while 또한 이상할게 없음.
if(true){
//...
}else switch(type){
//...
}
if(true){
//...
}else while(true){
//...
}
- else if는 여러 조건을 평가할 때 사용하는 것이 아니라, 첫 번째 조건이 거짓일 때 두 번째 조건을 평가하는 방식입니다.
- 즉, else if는 중첩된 조건문을 만드는 것이고, 여러 조건을 동시에 평가하는 것이 아닙니다.
- 이 때문에 else if를 사용할 때는 마치 여러 조건을 동시에 검사하는 것처럼 오해할 수 있지만, 실제로는 순차적으로 조건을 확인하는 구조입니다.
결론적으로, else if는 조건을 단계적으로 평가하는 방법이라는 점을 기억하면 됩니다.
if(condition1){
} else if(condition2){
// 이 부분은 조건식1이 거짓면서 조건식2를 만족해야만 들어올 수 있다
}
- 평가 해야하는 식들이 동등할 땐 switch이지만 그게 아닌 중첩되어서 평가해야 하는 경우라면 else if를 사용해야 함.
- else if는 실수하기 쉽고 오해하기 쉽기 때문에 중첩된 조건의 경우,
if문의 중첩으로 코드를 작성하는게 좀 더 안전하고 직관적 !
Ⅵ. Optional(선택) & Mandatory(필수)
◎ Optional(선택적)은 조건이 참일 때, 특정한 동작을 수행하는 것을 의미.
◎ Madatory(필수적)는 조건이 참이든 거짓이든 상관하지 않고
어떤 동작을 반드시 수행해야 함을 의미합니다.
☆ Optional과 Mandatory 한 동작(코드)를 구분하는 것은 코드의 의도를 명확하게 표현하고,
코드의 가독성을 높이며, 버그 발생 가능성을 줄이는 데 의미가 있습니다.
if (condition1) {
// Optional action
}
if (condition2) {
// Mandatory action
} else {
// Mandatory action
}
- Mandatory한 동작으로 시작한 코드 블록은 Mandatory한 동작으로 끝나야 하며,
Optional한 동작으로 시작한 코드 블록은 Optional한 동작으로 끝나게 하면
코드의 일관성이 유지되고 예기치 않은 버그를 방지할 수 있습니다.
- 만약 Mandatory한 동작으로 시작해서 Optional한 동작으로 끝을 맺거나, 그 반대의 경우
코드의 의도를 이해하기 어려워질 수 있고 논리적인 오류나 버그가 발생할 수 있습니다.
"Optional" 및 "Mandatory"한 동작을 명확하게 구분함으로써 코드의 일관성을 유지하고,
코드의 동작을 예측 가능하게 만들 수 있습니다
Ⅶ. 스위치(switch)
- 사실 스위치문의 case:와 defalut: 문법 또한 레이블이다
Switch문은 특별한 레이블(case, default)을 만들 수 있는 공간을 만들어주는 문법입니다.
+ 스위치문 안에서 다른 레이블을 만들면 Syntax 에러가 납니다.
√ 스위치 문은 순차적으로 case 레이블에 해당하는 조건을 검사하고, 조건이 일치하는 case 레이블이 실행 !
√ case 레이블은 실행 흐름을 특정 지점으로 이동시키는 역할을 하고,
이러한 레이블은 실행 중에 조건을 평가하여 동적으로 분기되는 특수한 형태의 레이블.
+ 스위치문은 for문 * while문과 마찬가지로 auto label이 적용됩니다.
◇ fall through
- 스위치문에서 각각의 case 레이블 아래에 break문을 사용하지 않았을 때 fall through 현상이 발생합니다.
- 각 case 레이블 아래에 break를 사용하여 해당 case가 실행된 후 스위치 문을 빠져나가게끔 해야하는데,
break문을 생략하면 조건이 참인 case가 실행된 후 그 다음 case 레이블도 실행되며
그러면 여러 case 레이블이 연속적으로 실행되는 결과가 나오게 됩니다.
Ⅷ. 런타임 스위치(switch)
◇ 스위치문도 레이블을 만드는 것인데, 단지 레이블을 JS엔진이 파싱하는 시점에 평가되는 기존의 정적 레이블이 아닌
Case안에 있는 표현식을 동적으로 해석할 수 있는 특수한 레이블을 만드는 것입니다.
즉, 런타임 시점에 switch문에서 값을 평가하여
그 평가된 값과 case에 있는 값이 일치하는 레이블로 보내주는 특수한 레이블을 만드는 것.
- 런타임에 평가되는 조금 특별한 레이블이지만, 결국 ! 다른 레이블과 동일
- 자바는 컴파일 할 때 이미 값을 평가하고 런타임에서는 이미 계산된 정적인 값을 사용하는 반면,
- 자바스크립트와 파이썬의 switch문은 런타임 시점에 해석합니다.
- > 실행 중에 값이 변경될 수 있는데 이렇게 런타임에서 평가되기 때문에
switch문의 분기 조건은 실행 시에 결정됨니다.
이러한 런타임 시점에 평가되는 동작 방식 때문에,
자바스크립트의 스위치문은 2가지 방식으로 사용이 가능합니다
A) 첫 번째 패턴.
- 어떤 값이 있고 그 값에 대해서 일어나는 변화를 내가 인지하고 있을 때 사용하는 일반적인 스위치 패턴.
switch (type) {
case "number":
console.log("숫자");
break;
case "string":
console.log("문자");
break;
}
B) 두 번째 패턴.
- 조건을 고정하고 case 안에 있는 표현식의 성립 여부로 조건을 검사하는 패턴.
switch (true) {
case value < 0:
console.log("음수");
break;
case value > 0:
console.log("양수");
break;
default:
console.log("제로");
}
'Front_End [JS기반] > 자바스크립트' 카테고리의 다른 글
| [ 3D Web : Front_JavaScript ] 변수 호이스팅 : var / let / const의 차이점 정리. (2) | 2024.11.04 |
|---|---|
| [ 3D Web : Front_JavaScript ] 자스 핵심 개념 - Getter & Setter 정리. (0) | 2024.11.03 |
| [ 3D Web : Front_JavaScript ] 자스 핵심 개념 - 데이터 타입 ( Data Type ) (0) | 2024.11.03 |
| [ 3D Web : Front_JavaScript ] 자바스크립트 문법 총 정리판 - [1] (1) | 2024.11.01 |
| [ 3D Web : Front_JavaScript ] 자바스크립트 중요 개념 간략 모음집. (0) | 2024.11.01 |