📚 스터디 명

모던할 수 있는거 맞니

📆 스터디 진행 날짜

2023 / 12 /29일 (금) 05:00 PM 진행

스터디 그룹원분들 2주간 각 팀에서 프로젝트를 진행 하느라 
스터디 그룹원분들과 논의 후 스터디 진행 기간동안 스터디 진행은 잠시 중단하고 
프로젝트 일정이 끝나면 다시 진행하기로 했다.
다들 프로젝트 참여하시느라 고생하셨습니다! 

📖 6주차 학습 범위

09장 타입변환과 단축 평가 ( 108p ~ 123p)

---

👨🏻‍💻 학습 내용들

🎯 parseInt ? parseFloat ?

명시적 타입 변환 챕터에서

숫자 타입으로 변환하는 방법 중 parsInt , parseFloat 함수를 활용하는 방법을 알게되었다.

<script>
parseInt('0'); // -> 0
parseFloat('10.53'); // -> 10.53
</script>

parseFloat 함수는 소수점까지 반환해주는 함수인걸 알았다.

하지만 ParseInt 함수는 왜 소수점을 무시하고 반환해줄까?
그리고 Math.floor라는 함수가 있는데 ParseInt 와 차이점은 무엇일까?

ParseInt : 정수값으로 반환하기 위해 소수점 이하 값을 무시하고 반환해주는 함수라고한다.

Math.floor : 소수값을 내림 하여 반환해주는 함수라고한다.

개발자 도구에서 차이점을 살펴봤다.

위 사진처럼 개발자도구에서 출력을 해봤을 때
parseInt함수는 앞서 살펴본 내용처럼 소수점뒤에는 무시하고 반환을 해준다.
math.floor 함수는 소수점을 내림했기 때문에 -4가 출력되는 모습을 볼 수 있다.
비슷한 함수가 존재하기 때문에 의도에 맞게 사용하면 좋을것 같다.

소수값을 올림 하여 반환해주는 Math.ceil라는 함수도 존재한다.
반올림 하는 Math.round 함수도 존재하니 알아두면 좋을것 같다.

📂 Reference Link

---

🎯 단축 평가 표현식 ?

논리합(||) 또는 논리곱(&&)연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다고한다.
논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다고한다.

논리곱(&&)연산자 : 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다.
하나라도 false인 경우 false값을 반환한다.
논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.
논리 연산의 결과를 결정하는 두 번째 피연산자를 반환한다.

논리합(||)연산자 : 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.
하나라도 true인 경우 true값을 반환한다.
논리합 연산자도 논리곱 연산자와 동일하게 좌항에서 우항으로 평가가 진행된다.
논리 연산의 결과를 결정한 첫 번째 피연산자를 반환한다.

📌 단축평가 규칙

단축 평가 표현식	평가 결과
true II anything	true
false II anything	anything
true && anything	anything
false && anything	false

단축 평가를 사용하면 if문을 대체할 수 있다고한다.
어떤 조건이 Truthy 값(참으로 평가되는 값)일 때 무언가를 해야 한다면 논리곱(&&) 연산자를 , Falsy 값(거짓으로 평가되는 값)일 때 무언가를 해야 한다면 논리합(||) 연산자를 활용하여 표현식으로 if문을 대체할 수 있다고한다.

---

🎯 옵셔널 체이닝 연산자

ES11에서 도입된 옵셔널 체이닝(optional chaining) 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고,
그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

<script>
var elem = null;

//elem이 null 또는 undefined이면 undefuned를 반환
// 그렇지 않으면 우항의 프로퍼티 참조를 이어감

var value = elem?.value;
console.log(value); // undefined
</script>

그렇다면 옵셔널 체이닝연산자는 언제 활용하면 좋을까?
사실상 위 예제코드만 봐서는 아무 의미가 없고 가늠이 잘 잡히지 않을것이다.
옵셔널 체이닝은 중첩된 객체(object) 가 있을 때 활용하면 좋다.
객체안의 값이 들어있으면 반환을 해주고 없다면 undefined로 반환을 해준다.
주의할점은 옵셔널 체이닝은 에러를 방지하는게 아닌 에러를 잠깐 숨기는 역할을 하는것이기 때문에 자주 활용하는건 지양한다고한다.

---

🎯null 병합 연산자

null 병합 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.

<script>
let foo = null ?? 'default string'
console.log(foo); // "default string"
</script>

null 병합 연산자(nullish coalescing)는 언제 활용하면 좋을까?

예를 들어 외부 데이터를 받아올 때 늦게 받아오게 된다면 null 병합 연산자를 활용하는 방법이있다.

<script>
const setData = data ?? "Loding..."
</script>

💡 학습을 통해 느낀점 3가지
1️⃣ 최신문법을 지향하는이유가 있구나.
2️⃣ 리액트, 타입스크립트를 사용하면서 옵셔널체이닝과 null병합 연산자에 대해
정확히 이해하지 못하고있었는데 역시 JS에서 어려워하고 있었다.
3️⃣ 스터디 참여 안했으면 후회했겠다..