2주차_김다연_회고록 - hyeone999/Docs-JS_deepDive_Study GitHub Wiki
이번 2주차는 7장 연산자, 8장 제어문, 9장 타입변환으로 이루어져 있으며, 내용이 어려워지기 시작하였기에 코드를 작성하면서 이해하는 것을 추천 드립니다.
📌 연산자와 피연산자란?
연산자(Operator): 하나 이상의 표현식을 대상으로 계산하거나 조작하여 새로운 값을 만드는 기호 또는 키워드
피연산자(Operand): 연산의 대상이 되는 값 또는 표현식
1. 산술 연산자
피연산자를 대상으로 수학적 계산을 통해 새로운 숫자 값을 만드는 것. 산술 연산이 불가능한 경우 NaN을 반환
- 이항 산술 연산자 (피연산자 2개)
2개의 피연산자를 산술 연산하여 숫자 값을 만드는 것.
- 단항 산술 연산자 (피연산자 1개)
1개의 피연산자를 산술 연산하여 숫자 값을 만드는 것
Tip) x++는 할당 후 증가, ++x는 먼저 증가 후 할당
2.문자열 연결 연산자
+ 연산자가 문자열 중 하나라도 포함하면 문자열 연결로 동작합니다.
'Hello' + ' World' // 'Hello World' 1 + '2' // '12'
숫자 + 불리언/Null/Undefined
1 + true // 2 1 + null // 1 1 + undefined // NaN(not a number (숫자가 아님을 의미))
3.할당 연산자
우항의 값을 좌항 변수에 저장
ex)
let x = 10;
x += 5; // 15 (x = x + 5) x *= 2; // 30 (x = x * 2)
문자열도 연결 가능함!!
ex)
let str = 'Hello, '; str += 'JS!'; // 'Hello, JS!'
4. 비교 연산자
📌 동등 / 일치
⭐ ===를 쓰는 습관을 들이세요. 예기치 않은 오류 예방가능!
📌 대소 비교
3 > 5 // false 5 <= 5 // true
⚠️ NaN 주의
NaN === NaN // false Number.isNaN(NaN) // true
5. 삼항 조건 연산자
조건식의 평가 결과에 따라 반환할 값 결정. 부수 효과 x
쓰는 방법 -> [ 조건 ? 참일 때 값 : 거짓일 때 값; ]
ex)
let age = 20; let status = age >= 18 ? '성인' : '미성년자'; // '성인'
6. 논리 연산자
true && false // false false || true // true !0 // true (0은 falsy) !'hello' // false (문자는 truthy)
7. 쉼표 연산자
여러 표현식을 나열하고 마지막 결과값 반환
let x, y, z; x = (y = 2, z = 3); // x = 3
8. 그룹 연산자
소괄호 ()로 우선 순위 조정
10 + 2 * 3 // 16 (10 + 2) * 3 // 36
9. typeof 연산자
피연산자의 데이터 타입을 문자열로 반환
typeof 'hi' // "string" typeof 42 // "number" typeof null // "object" typeof function(){} // "function"
💡 null 체크는 === null을 사용하세요.
10. 지수 연산자
거듭제곱을 구할 때 사용
2 ** 3 // 8 2 ** 0 // 1 2 ** -2 // 0.25
마무리 TIP
연산자의 부수 효과 여부 (값이 변하는지) 꼭 기억!
===, !==로 명확한 비교 습관화
typeof, isNaN, Number()를 활용한 타입 안전성 확인
✅ 제어문이란?
조건에 따라 **코드 블록을 실행(조건문)**하거나, **여러 번 반복 실행(반복문)**할 수 있도록 도와주는 문법이다.
1. 블록문(Block Statement)
여러 개의 문을 중괄호 {}로 묶어서 하나의 코드 블록으로 만든 것이에요. 단독으로도 사용할 수 있고, 조건문이나 반복문과 함께 쓰여요.
{ var foo = 10; }
2. 조건문 (Conditional Statement)
주어진 조건에 따라 실행할 코드를 다르게 지정할 수 있어요.
🔹if...else 문
if (조건식) { // 조건이 참일 때 실행 } else { // 조건이 거짓일 때 실행 }
여러 조건이 필요하다면 else if를 추가할 수 있어요.
if (score >= 90) { console.log("A"); } else if (score >= 80) { console.log("B"); } else { console.log("C 이하"); }
🔹switch 문
하나의 표현식을 평가하고 그 값에 따라 여러 경우(case) 중 하나를 실행
switch(표현식) { case 값1: // 표현식 === 값1 break; case 값2: // 표현식 === 값2 break; default: // 어느 case와도 일치하지 않을 때 }
break를 빼먹으면 "폴스루(fall-through)" 현상이 발생해서 이후 case들도 실행돼요.
3. 반복문 (Loop Statement)
특정 조건이 참일 동안 코드 블록을 반복 실행해요.
🔹for 문
for (초기화; 조건식; 증감식) { // 조건이 참일 동안 반복 }
ex)
for (var i = 0; i < 3; i++) { console.log(i); } // 출력: 0, 1, 2
🔹 while 문
while (조건식) { // 조건이 참인 동안 실행 }
ex)
var count = 0; while (count < 3) { console.log(count); count++; }
🔹 do...while 문
do { // 먼저 실행한 후 조건을 평가 } while (조건식);
ex)
var count = 0; do { console.log(count); count++; } while (count < 3);
※ 무조건 한 번은 실행됨!
4. break 문
반복문이나 switch 문을 즉시 종료하고 빠져나올 수 있음.
for (var i = 0; i < 5; i++) { if (i === 3) break; console.log(i); // 0, 1, 2 }
* 레이블 문과 함께 특정 블록을 종료할 수도 있다:
outer: { console.log(1); break outer; console.log(2); // 실행되지 않음 }
5. continue문
현재 반복을 건너뛰고 다음 반복으로 넘어갈 수 있습니다.
for (var i = 0; i < 5; i++) { if (i === 2) continue; console.log(i); // 0, 1, 3, 4 }
💡 마무리 TIP
자바스크립트는 느슨한 타입 언어이기 때문에, 값의 타입을 자동 또는 수동으로 변환하는 일이 자주 발생해요. 이와 관련된 개념을 타입 변환이라고 합니다.
✅ 1. 타입 변환이란?
자바스크립트에서 값의 타입을 바꾸는 것을 타입 변환이라고 해요.
방식은 두 가지!
명시적 타입 변환 : 개발자가 의도적으로 타입을 변환
암묵적 타입 변환 : JS 엔진이 자동으로 타입을 변환
var x = 10;
// 명시적 타입 변환 var str = x.toString(); console.log(typeof str, str); // string '10'
// 암묵적 타입 변환 var str2 = x + ''; console.log(typeof str2, str2); // string '10'
기존 값은 변경되지 않고, 새로운 값이 반환됨!
2. 암묵적 타입 변환
자바스크립트는 문맥에 따라 자동으로 타입을 바꿉니다.
🧵 문자열로 변환
1 + '2'; // '12' (문자열 연결)
피연산자 중 하나라도 문자열이면 전체를 문자열로 변환
🔢 숫자로 변환
1 - '1'; // 0
1 * '10'; // 10
1 / 'one'; // NaN
숫자 타입이 아닌 피연산자가 숫자로 변환될 수 없으면 NaN
불리언으로 변환
if (' ') console.log('1'); if (true) console.log('2'); if (0) console.log('3'); if ('str') console.log('4'); if (null) console.log('5'); // 출력: 2 4
- Truthy: 참으로 평가되는 값 ('str', 1, {}, [] 등)
- Falsy: 거짓으로 평가되는 값 (0, '', null, undefined, NaN, false)
3. 명시적 타입 변환
문자열로 변환
String(1); // "1" (1).toString(); // "1" 1 + ''; // "1"
숫자로 변환
Number('0'); // 0 parseInt('10'); // 10 parseFloat('10.53'); // 10.53 +'0'; // 0 '5' * 1; // 5
불리언으로 변환
Boolean('X'); // true !!'X'; // true Boolean(0); // false !!0; // false Boolean({}); // true
4. 단축 평가
자바스크립트의 논리 연산자는 boolean 값 외에도 피연산자 자체를 반환하는 특징이 있습니다.
&& (논리곱)
'Cat' && 'Dog'; // "Dog"
- 좌항이 Falsy면 그 값을 반환
- 좌항이 Truthy면 우항을 반환
|| (논리합)
'Cat' || 'Dog'; // "Cat"
- 좌항이 Truthy면 그 값을 반환
- 좌항이 Falsy면 우항을 반환
단축 평가 요약표
5. 옵셔널 체이닝 ()
null 또는 undefined인 경우 오류 없이 평가를 중단하고 undefined를 반환
var elem = null; var value = elem?.value; console.log(value); // undefined
6. null 병합 연산자 (??)
좌항이 null 또는 undefined인 경우 우항을 반환
var foo = null ?? 'default string'; console.log(foo); // "default string"
|| 와는 다르게, 0이나 '' 같은 Falsy 값은 무시하지 않음
마무리 요약
명시적 변환 : String(), Number(), Boolean(), toString() 등
암묵적 변환 : 연산자에 의해 자동 변환 (+, -, *, /)
단축 평가 : `
옵셔널 체이닝 : ?.로 null/undefined 안전하게 접근
null 병합 : ??로 기본값 처리
느낀점
이번 스터디를 통해 JS의 기초를 다져가는 느낌을 많이 받았으며, 발표를 오래하고 다른 사람들의 발표를 들으면서 공부하니 내가 모르던 부분들, 이해 안되던 부분들도 조금씩 조금씩 채워질 수 있던 것 같았습니다. 대부분 비슷한 부분에서 어려워하였고, 그래서 더더욱 스터디의 진가가 나온 것이 아닌가 하는 생각이 들었습니다. 이제는 스터디 블로그 기능도 조금씩 배우고 마크다운 작성법도 배우다보니 처음에 비해 훨씬 잘 작성하게 되는 것 같아 뿌듯함도 느껴지는 것 같습니다.