Modern React Deep Dive/01장 리액트 개발을 위해 꼭 알아야 할 자바스크립트18 1.2.2 함수를 정의하는 4가지 방법 1.2.2 함수를 정의하는 4가지 방법 함수 선언문 자바스크립트에서 함수 선언할 때 가장 일반적으로 사용하는 방식 function add(a, b) { return a + b } 함수 선언문은 표현식이 아닌 일반 문(statement)으로 분류됨(\표현식: 무언가 값을 산출하는 구문. 즉, 함수 선언으로는 어떠한 값도 표현되지 않았으므로 표현식이 아닌 일반 문) const sum = function sum(a, b) { return a + b } sum(10, 24) // 34 함수 선언문은 말 그대로 '선언'이고 어떠한 값도 표현하지 않으므로 표현식과는 다르게 변수에 할당할 수 없는 것이 자연스러워 보임 BUT!! 가능함 이유) 자바스크립트 엔진이 코드의 문맥에 따라 동일한 함수를 문이 아닌 표현식으로.. 2024. 4. 2. 1.2.1 함수란 무엇인가? 1.2.1 함수란 무엇인가? 자바스크립트에서 함수 자바스크립트에서 함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것 의미 function sum(a, b) { // sum: 함수명 // 입력값 a, b: 매개변수 return a + b // 반환값 } sum(10, 24) // 34 // 10, 24 : 인수 리액트에서 컴포넌트 리액트에서 컴포넌트를 만드는 함수도 이러한 기초적인 형태를 따름 function Component(props) { return {props.hello} } Component 함수를 선언하고 매개변수로는 일반적으로 props라고 부르는 단일 객체를 받으며 return 문으로 JSX를 반환 일반적인 함수와의 차이점.. 2024. 4. 2. 1.1.4 리액트에서의 동등 비교 1.1.4 리액트에서의 동등 비교 리액트에서 사용하는 동등 비교는 ==나 ===가 아닌 Object.is Object.is는 ES6에서 제공하는 기능이기 때문에 리액트에서는 이를 구현한 폴리필(Polyfill)을 함께 사용(웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드) objectIs 아래는 리액트에서 실제로 값을 비교할 때 사용하는 코드// flow로 구현돼 있어 any가 추가돼 있음. flow에서 any는 타입스크립트와 동일하게 어떠한 값도 받을 수 있는 타입을 의미함 function is(x: any, y: any) { return ( (x === y && (x !== 0 || 1 / x === 1 / y) || (x !== x && y !== y) // eslint-d.. 2024. 3. 29. 1.1.3 자바스크립트의 또 다른 비교 공식, Object.is 1.1.3 자바스크립트의 또 다른 비교 공식, Object.is Object.is Object.is는 두 개의 인수를 받으며, 이 인수 두 개가 동일한지 확인하고 반환하는 메서드임 ==나 ===와 다른 점 == vs. Object.is: == 비교는 같음을 비교하기 전에 양쪽이 같은 타입이 아니라면 강제로 형변환(type casting)을 한 후에 비교함. 하지만 Object.is는 이러한 작업하지 않음. 즉, ===와 동일하게 타입이 다르면 그냥 false === vs. Object.is: 아래처럼 Object.is가 좀 더 개발자가 기대하는 방식으로 정확하게 비교 -0 === +0 // true Object.is(-0, +0) // false Number.NaN === NaN // false Obje.. 2024. 3. 29. 1.1.2 값을 저장하는 방식의 차이 1.1.2 값을 저장하는 방식의 차이 원시 타입과 객체 타입의 가장 큰 차이점 원시 타입 불변 형태의 값으로 저장됨 변수 할당 시점에 메모리 영역 차지하고 저장됨 복사할 때 값을 전달함 let hello = 'hello world' let hi = hello console.log(hello === hi) // true 값을 비교하기 때문에, 각각 선언하는 방식으로도 동일한 결과 볼 수 있음 let hello = 'hello world' let hi = 'hello world' console.log(hello === hi) // true 객체 타입 프로퍼티를 삭제, 추가, 수정할 수 있으므로 변경 가능한 형태로 저장됨 값이 아닌 참조를 저장함 값을 복사할 때도 값이 아닌 참조를 전달함 var hello =.. 2024. 3. 29. 1.1.1 자바스크립트의 데이터 타입 1.1.1 자바스크립트의 데이터 타입 원시 타입(primitive type) boolean null undefined number string symbol bigint 객체 타입(object/reference type) object 원시 타입 객체가 아닌 다른 모든 타입 객체가 아니므로 메서드를 갖지 않음 undefined 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값 let foo typeof foo === 'undefined' // true function bar(hello) { return hello } typeof bar() === 'undefined' // true null 아직 값이 없거나 비어 있는 값 표현 typeof null === 'object.. 2024. 3. 29. 이전 1 2 다음