[ 모던 자바스크립트 스터디 ] 옵셔널 체이닝 연산자 / null 병합 연산자
·
Archive/Develop
ECMAScript2020에서 도입된 옵셔널 체이닝 연산자에 대해 알아보겠다. 옵셔널 체이닝 연산자 좌항의 피연산자가 null 또는 undefiend 인 경우 undefined 를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 연산자는 ?. 이다. var a = null; var aValue= a?.value; 만약 옵셔널 체이닝 연산자 없이 바로 a.value 로 좌항의 피연산자의 value 라는 프로퍼티를 참조했을 때, Uncaught TypeError: Cannot read properties of null (reading 'value') 에러를 봤을 것이다. 하지만 옵셔널 체이닝 연산자를 이용하면 에러 없이 null 또는 undefined 일때도 참조할 수 있다. 원래 이 옵셔널 체이..
[ TypeScript ] 제네릭(Generics)
·
Archive/Develop
예전에 자바배울 때 했던 것 같은데, 가물가물해서 기억도 되짚어볼 겸 포스팅을 작성한다. 제네릭이란? 타입을 함수 파라미터처럼 사용하는 것이다. function getNumber(n) { return n; } 개발자는 getNumber 라는 함수를 숫자를 넘겨주는 용도로 사용하려고 하겠지만, 실상은 어떠한 값이 와도 그대로 넘겨준다. 그 값이 string이건 boolean 이건 그냥 그대로 넘긴다. 만약 이걸 제네릭 문법을 적용을 한다면, 아래와 같이 사용 가능하다. function getNumber(n: N): N { return n; } 이제 getNumber 함수를 호출할 때, 타입도 넘겨주면 된다. getNumber(123);
[ 모던 자바스크립트 스터디 ] 단축 평가
·
Archive/Develop
논리 연산자를 이용한 단축 평가 논리 연산자 중 논리합과 논리곱 연산자 표현식의 평가 결과는 boolean 타입이 아닐수도 있다. 이걸 true 냐 false 냐를 구분짓는 연산이 아닌 2개의 피연산자 중 어느 한 쪽을 골라 평가한다는 뉘앙스로 봐야한다. 아래 예시를 보자. 논리곱 연산을 행했는데, 결과 값이 boolean 타입이 아닌 2번째 피연산자인 "치킨" 이 나온 것을 확인할 수 있다. 논리곱(&&)연산자는 두 개의 피연산자가 모두 true 일 때 true 를 반환하는 연산자 임을 기억하고 차근차근 풀어나가보자. 첫번째 피연산자인 "라면" 은 Truthy 값으로 true 로 평가된다. 아직 논리곱 연산은 끝나지 않았다. 첫번째 피연산자가 true 인 것을 확인했으니 두번째 피연산자가 true 냐,..
[ 모던 자바스크립트 스터디 ] 암묵적 타입 변환 & 명시적 타입 변환
·
Archive/Develop
지난 포스팅에서 다뤘던 암묵적 타입 변환이 행해지는 문자열, 숫자, 불리언 타입을 자세하게 하지 못했던 것 같아서 다시 포스팅해보려고 한다. 문자열 타입 변환 + 연산자는 피연산자 중 하나 이상이 문자열이라면 문자열 연결 연산자로 동작한다. 따라서 아래 코드는 문자열 '22' 를 반환한다. 2 + '2' 자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 숫자타입 2 를 암묵적으로 문자열으로 변환 시키는 것이다. 아래는 헷갈릴 수 있는 암묵적 문자열 타입변환 케이스이다. true + '' // "true" false + '' // "false" null + '' // "null" undefined + '' // "undefined" (Symbol()) + '' // TypeError: Cann..