9, 10, 11장 정리 #2
Conversation
Turtle-Hwan
requested review from
junepil and
zziglet
and removed request for
zziglet
| # 9장 타입 변환과 단축 평가 | ||
| ## 9.1 타입 변환이란? | ||
| - JS의 모든 값은 타입을 가진다. 개발자가 의도적으로 타입 변환하는 것을 명시적 타입 변환 explicit coercion 또는 타입 캐스팅 Type casting 이라 한다. | ||
| - 개발자의 의도와는 상관없이 표현식 평가 도중에 JS 엔진이 암묵적으로 타입을 자동 변환하는 것을 암묵적 타입 변환 implicit coercion 또는 타입 강제 변환 Type coercion 이라 한다. |
There was a problem hiding this comment.
웹 브라우저에서 동작하는 자바스크립트의 특성상 사용자 경험을 위해 최대한 오류를 발생시키지 않기 위해 이런 방식을 채택한 것은 이해가 가지만, 개발자 입장에서는 의도하지 않은 오류를 경험하는 일이 많은 것 같아요. 과연 자바스크립트의 이런 방향성이 옳을까요?
스터디원들이랑 대면때 같이 이야기해봐도 재밌을 것 같아요 🐧
There was a problem hiding this comment.
[MinboyKim] : 결국 개발자들은 Typescript를 만든 것처럼, type을 처음부터 강제하면 좋지 않았을까요?
- ECMAScript에 표준이 도입된다는 의견도 있다~~
There was a problem hiding this comment.
오류를 나서 프로그램이 중지되는 나쁜 사용자 경험 vs 유지보수 하기 어려운 나쁜 개발자 경험
|
|
||
| - 객체 리터럴의 중괄호는 코드 블록이 아니다. | ||
| - 값으로 평가되는 표현식이므로 닫는 중괄호 뒤에 세미콜론을 붙인다. | ||
| - 코드 블록의 닫는 중괄호에는 세미콜론을 붙이지 않는다. |
| - 어떤 조건이 Truthy 값일 때 논리곱(&&) 연산자 표현식으로 if 문 대체 가능 | ||
| - 어떤 조건이 Falsy 값일 때 논리합(||) 연산자 표현식으로 if 문 대체 가능 | ||
|
|
||
| > [!info] 객체가 null 또는 undefined가 아닌지 확인하고 객체의 프로퍼티 참조할 때 && 사용 |
There was a problem hiding this comment.
단축평가가 있다는 건 알았지만 어디에 사용되는지 몰라서 잘 사용하지 않았었는데 이렇게 쓸 수 있었네요! 데이터가 들어오는 객체가 항상 존재하지 않을 때도 많으니까 단축 평가를 써서 오류없이 값을 확인할 수 있다 ! 굿굿 👍
| > [!NOTE] `&&` 와 `?.` 의 차이점 | ||
| > - 논리 연산자 &&는 단축 평가를 통해 좌항이 Falsy 값(false, undefined, null, 0, -0, NaN, '')이면 좌항 피연산자를 그대로 반환한다. | ||
| > - 단, 0이나 ''은 객체로 평가될 때도 있다. (21.3절 참고) | ||
| > - 옵셔널 체이닝 연산자는 좌항 피연산자가 Falsy 값이어도 null 또는 undefined가 아니면 우항의 property 참조를 이어간다. |
There was a problem hiding this comment.
이후에 작게 나오는 9.4.3에서 null 병합 연산자(??) 내용도 새롭게 알아갈 수 있었어요!
좌항 피연산자에 대해 Falsy 값이 유효한 값인 경우를 어떻게 처리해줄지에 대한 해결책을 하나 알아갔습니다! 😄
var a = '' || 'good' -> 'good'
var b = '' ?? 'good' -> ''
There was a problem hiding this comment.
제가 미처 정리하지 않았는데 추가해주셔서 감사합니다
There was a problem hiding this comment.
- null을 개발자가 넣어주는 것이 값이 없다는 의미로 좋고, undefind는 기본 값으로 주어진 것이라 개발자가 넣으면 좋지 않다.
| 1. `String()` 생성자 함수 호출 | ||
| 2. `Object.prototype.toString` 메서드 이용 | ||
| 3. 문자열 연결 연산자를 통한 암묵적 타입 변환 |
There was a problem hiding this comment.
각 변환 방식에 대해서 어떤 차이가 있는지 궁금하네여...(내부 구동방식이나 성능적인 관점에서)
| > | ||
| > person.1; // SyntaxError: Unexpected number | ||
| > person.'1'; // SyntaxError: Unexpected string | ||
| > person[1]; //10 |
There was a problem hiding this comment.
이 부분은 자동으로 Number 1이 String으로 타입 캐스팅이 된다고 이해하면 될까요???
There was a problem hiding this comment.
SyntaxError: Unexpected number 요렇게 뜨는 것으로 보아 String으로 타입 캐스팅은 일어나지 않고 .1 으로 쓰는 걸 막아둔 거 같습니당
|
|
||
| - ECMAScript 사양에는 변수를 통해 메모리를 어떻게 관리하는지는 명확히 정의되어 있지 않으므로, 엔진 구현에 따라 내부 동작은 달라질 수 있다. | ||
| - 변수에 원시 값을 갖는 변수를 할당하는 순간에 원시 값을 복사해서 새로운 메모리에 올릴 수 있다. | ||
| - 변수에 원시 값을 갖는 변수를 할당하는 순간에는 같은 원시 값을 참조하다가, 어느 한 쪽의 변수에 다른 값이 재할당되는 시점에 새로운 메모리 공간을 가리키도록 옮겨가게 구현할 수도 있다. (Python 작동 방식) |
There was a problem hiding this comment.
score = 100; console.log(score); // 100
이 예시가 해당 작동 방식으로 이해했습니다.
console.log(copy) ; // ?? -> 80
copy 변수가 다른 변수를 할당 받은 시점의 값을 가리키게 되어 새로운 메모리 공간으로 옮겨간다는 뜻일까요?
There was a problem hiding this comment.
copy = score 으로 대입할 때 메모리를 다른 곳에다 바로 할당할 수도 있고 (전자)
copy = score 으로 대입할 때는 그냥 같은 메모리를 가리키지만 (같은 값이므로)
이후 score나 copy가 다른 값으로 변경되는 순간에 다른 메모리 공간을 가리키도록 구현해서 메모리를 절약하는 방법도 있다는 것으로 이해했습니다! (후자)
JS Deep Dive Canvas.canvas
Outdated
There was a problem hiding this comment.
오~ 옵시디언 canvas 보기 깔끔하고 좋네요ㅎㅎ
깃허브랑 연동은 어떻게 한건가요? 링크 붙여넣은건가요?
There was a problem hiding this comment.
네네 링크 붙여넣으니까 바로 보이더라고요 ㅎㅎ
| ## 9.1 타입 변환이란? | ||
| - JS의 모든 값은 타입을 가진다. 개발자가 의도적으로 타입 변환하는 것을 명시적 타입 변환 explicit coercion 또는 타입 캐스팅 Type casting 이라 한다. | ||
| - 개발자의 의도와는 상관없이 표현식 평가 도중에 JS 엔진이 암묵적으로 타입을 자동 변환하는 것을 암묵적 타입 변환 implicit coercion 또는 타입 강제 변환 Type coercion 이라 한다. | ||
| - 원시 값은 변경 불가능한 값이라 기존 원시 값을 직접 변경하는 것이 아니라, 타입 변환이 일어나면 기본 원시 값을 이용해 다른 타입의 새로운 원시 값을 생성하는 것이다. |
There was a problem hiding this comment.
궁금해서 책에 나온 예제와는 다르게 기존 변수와 같은 값에 할당해보았는데, 타입이 바뀌더라구요
기존 x,y를 버리고 새로운 x,y로 재할당 되는 것이겠죠?
지난번에도 이야기 나왔던 내용이지만 자바스크립트의 immutable한 특성과 관련 있는것 같네요
There was a problem hiding this comment.
number와 string 둘 다 원시값이니깐 기존 가리키던 메모리를 버리고
새로운 메모리에 x+''(문자열) 이 할당되고, 이 메모리 주소가 x가 가리키도록 변경된다고 보면 될 거 같습니다
할당되는 메모리 byte도 달라지겠네요
| > - "값에 의한 전달" 용어도 ECMAScript 사양에는 없다. | ||
| > - "공유에 의한 전달" 이라고 표현하는 경우도 있다. | ||
| > - 엄밀히 표현하면 JS의 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달된다. 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있다. | ||
| > - 식별자는 메모리 주소에 붙인 이름이다. |
9장
10장
11장
add obsidian canvas