문제상황{ message.items.map((data, idx) => { // Uncaught TypeError: Cannot read properties of undefined (reading 'map') // 생략 } )} 원인데이터가 전부 넘어오기도 전에 렌더링되었기 때문에 발생한 에러였다. 해결단축평가를 사용했다.{ message.id && message.items.map((data, idx) => { // 앞에 message.id 추가 // 생략 } )} 참고단축평가 (short-circuit evaluation)

들어가며console.log('Cat' && 'Dog');console.log('Cat' || 'Dog');// 실행결과CatDog 왜지? 단축평가논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.표현식을 평가하는 도중에 평가 결과가 확정된 경우, 나머지 평가 과정을 생략한다.논리곱 연산자는 두 번째 피연산자가 표현식의 평가 결과를 결정한다.논리합 연산자는 첫 번째 피연산자가 표현식의 평가 결과를 결정한다. 단축평가의 유용한 패턴1. 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우, 객체의 프로퍼티를 참조하면 타입 에러가..

들어가며Math.random()에서 보안취약점이 걸려 코드를 수정해야 하는 일이 생겼다. 찾아보니 Math.random()은 완전 랜덤 값을 생성하지 않는다고 한다. Math.random()javaScript에서 0 이상 1 미만 (0 의 난수를 반환하는 함수이다.같은 값을 반복하지 않지만, 내부적으로 의사 난수 생성기(PRNG, Pseudorandom Number Generator)를 사용하기 때문에 완전 랜덤 값은 아니다. 보안 취약점1. 예측 가능한 난수 생성 (Deterministic)Math.random()은 랜덤한 수를 생성하는 것처럼 보이지만 사실 의사 난수 생성기(PRNG)를 기반으로 동작하는, 특정 알고리즘을 통해 계산된 값이다. 브라우저마다 Math.random()의 구현 방식은..

들어가며ES6부터 Symbol 데이터타입이 추가되었다고 한다. 이게 왜 필요한거지? SymbolSymbol은 ES6에서 도입된 고유하고 변경할 수 없는 값을 생성하는 원시(primitive) 데이터 타입이다.다른 원시 타입(숫자, 문자열, 불리언 등)과 다르게, 심볼은 유일한 식별자로 사용되며 객체의 프로퍼티 키로 주로 활용된다.심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성한다.이때 생성된 심벌값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. 1. 객체 프로퍼티의 고유한 키 생성문자열 키는 충돌할 위험이 있지만 Symbol을 사용하면 절대 중복되지 않는 고유한 프로퍼티 키를 만들 수 있다. 같은 키 이름 "id"를 사용했더라도..

const arr = [1, 2, 3];arr.forEach(console.log); 1 2 3 이 한 줄씩 출력되겠지 ? 어라 ? 와이 ?? forEach()forEach() 함수는 반복문을 통해 배열의 요소를 접근하지 않고도 콜백 함수로 간편하게 배열 요소들을 처리할 수 있는 함수이다.각 요소의 값뿐만 아니라 인덱스와 배열 자체도 콜백 함수에서 사용할 수 있다.forEach는 콜백 함수에 세 개의 인자를 전달한다.valueindexarray 따라서 위 코드의 실행 결과는 value, index, array가 한 줄씩 출력된 결과가 나오는 것이다. value만 출력하고 싶다면, 명시적으로 첫 번째 인자만 받도록 해야 한다. const numbers = [273, 52, 103];const..