12.1 함수란? 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 매개변수 : 함수 내부로 입력을 전달받는 변수 인수 : 입력 반환값 : 출력 함수는 함수 정의를 통해 생성함 함수 호출 : 함수의 실행을 명시적으로 지시 // 함수 정의 function add(x, y) { return x+ y; } // 함수 호출 var result = add(1, 2); console.log(result); // 귀요미~ 아니고 3 🤣 12.2 함수를 사용하는 이유 코드의 재사용 코드의 재사용은 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높임 함수 이름은 자신의 역할을 잘 설명해야함. 잘 붙인 함수명은 코드의 가독성을 향상시킴. 12.3 함수 리터럴 JS의 함수는 객체 타..

원시 값은 변경 불가능한 값 객체는 변경 가능한 값 원시 값을 변수에 할당하면 변수에는 실제 값이 저장됨. 객체를 변수에 할당하면 변수에는 참조값이 할당됨. 값에 의한 전달 : 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값이 복사되어 전달됨. 참조에 의한 전달 : 객체를 가르키는 변수를 다른 변수에 할당하면 참조 값이 복사되어 전달됨. 11.1 원시값 11.1.1 변경 불가능한 값 원시값이 변경 불가능한 건 변수가 아니라 값이 변경 불가능하단 의미임. (메모리에 위치한 값) 변수는 언제든지 재할당을 통해 변수 값을 교체할 수 있음(다른 메모리에 저장 / 4장 참고) 상수는 재할당이 금지된 변수 (단 한번만 할당이 허용됨) 11.1.2 문자열과 불변성 문자열은 0개 이상의 문자로 이루어진 집합을 말..

10.1 객체란? 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조임. 원시 타입의 값은 변경 불가능한 값이지만, 객체는 변경 가능한 값이다. var person = { name: 'Girl', // 프로퍼티 age: 16 // age 프로퍼티키, 16 프로퍼티값 }; 10.2 객체 리터럴에 의한 객체 생성 JS의 객체 생성 방법 객체 리터럴 (가장 일반적인 방법) Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 객체 리터럴은 중괄호 {}안에 0개 이상의 프로퍼티를 정의함. 변수가 할당되는 시점에 JS엔진은 객체 리터럴을 해석해 객체를 생성함. 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성됨. 객체 리터럴의 중괄호는 코드 블록이 아님 주..

9.1 타입 변환이란? 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입변환 또는 타입 캐스팅이라고 함. 개발자의 의도와 상관없이 표현식을 평가하는 도중에 JS 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 경우를 암묵적 타입 변환 또는 타입 강제 변환이라고 함. 9.2 암묵적 타입 변환 JS엔진은 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가함 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동변환. 9.2.1 문자열 타입으로 변환 + 연산자는 피연산자 중 하나 이상이 문자열일때 문자열 연결 연산자로 동작함. 문자열 연결 연산자는 문자열 값을 만드는 것이기 때문에 문자열이 아닌 것을 문자열로 암묵적 타입변환함. '10' + 2..

8.1 블록문 0개 이상의 문을 중괄호로 묶은 것으로 코드 블록 또는 블록이라 부르기도 함. js는 블록문을 하나의 실행 단위로 취급함. 단독 사용이 가능하나 제어문이나 함수를 정의할때 사용하는 것이 일반적 // 블록문 { var foo = 10; } // 제어문 var x = 1; if (x < 10) { x++; } // 함수 선언문 function sum(a, b) { return a + b; } 8.2 조건문 8.2.1 if else 문 if (조건식) { // 조건식이 참이면 실행 } else if (조건식2) { // 조건식2가 참이면 실행 } else { //조건식이 거짓이면 실행 } 8.2.2 switch 문 switch (표현식) { case 표현식1: switch 문의 표현식과 표현식1..

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 함. 피연산자는 값으로 평가될 수 있는 표현식이여야함. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식임. // 산술 연산자 5 * 4 // 20 // 문자열 연결 연산자 'My name is ' + 'Lee' // 'My name is Lee' // 할당 연산자 color = 'red' // 'red' // 비교 연산자 3 > 5 // false // 논리 연산자 true && false // false // 타입 연산자 typeof 'Hi' // string 7.1 산술 연산자 수학적 계산을 수행해 새로운 숫자값..

JS(ES6)는 7개의 데이터 타입을 제공하고, 7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있다. 구분 데이터타입 표기 설명 원시타입 숫자 타입 number 숫자. 정수와 실수의 구분 없이 하나의 숫자 타입만 존재 문자열 타입 string 문자열 불리언 타입 boolean 논리적 참과 거짓 undefined 타입 undefined var 키워드로 선언된 변수에 암묵적으로 할당하는 값 null 타입 null 값이 없다는 것을 의도적으로 명시할때 사용하는 값 심벌 타입 symbol ES6에서 추가된 7번째 타입 객체 타입 object, funtion, array, map 객체, 함수, 배열 등 숫자 1과 문자열 '1’은 비슷해보이지만 전혀 다른 값임. 명확한 의도에 따라 타입을 정하고 쓰자...

5.1 값 값(value)은 식(표현식 expression)이 평가(evaluate)되어 생성된 결과를 말함. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미함. 10 + 20; // 30 // 10 + 20은 평가되어 숫자 값 30을 생성함. 모든 값은 데이터 타입을 가지며, 메모리에 2진수(비트의 나열)로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음. ex) 메모리에 0100 0001을 숫자로 해석하면 65지만 문자로 해석하면 A임. var sum = 10 + 20; // sum 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당됨 위 예제의 sum 변수에 할당되는 것은 10 + 20이 아니라 해당식이 평가된 결과인 30임. 즉, 변수 sum이 기억이..

리액트 공식문서 학습기록 https://react.dev/learn/your-first-component 실습 😡 예제대로 했더니 eslint가 img 태그를 picture로 감싸라고 날 괴롭힘. 👉 picture로 감싸줘서 해결 참고) next.js에서는 Image를 쓰라고 권고하는데 width, height가 필수값이라 때려침 😱 궁금해서 tsx로 확장자를 바꿔봤다가 무수히 뜨는 에러를 보고 일단 나중으로 미루고 jsx로 진행 클래스형 컴포넌트? 함수형 컴포넌트? 궁금해서 찾아봄. 찾아보니 hooks의 도입으로 함수형 컴포넌트를 권고한다고 함. 더 가볍고 덜 복잡함. 🤔 그렇다면 리액트에서 일반 함수(함수 선언문, 함수 표현식으로 선언된 함수)와 화살표 함수와의 차이점은?? 👉 검색 결과는 대체로 t..

JS 딥다이브 책 공부를 시작함. 1, 2, 3장은 굳이 정리가 필요없을 듯 하여 생략한다! 😎 49장은 내가 쓰는 환경에선 불필요해서(vite, turbopack 사용) 생략 꼭 필요한 내용만 요약해봄 4.1 변수가 뭐야? 왜 필요함? 계산이 끝난 결과를 재사용하기 위해 메모리 공간에 남겨둠. 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말함. 변수에 값을 저장하는 것은 할당(대입, 저장) 변수에 저장된 값을 읽어 들이는 것은 참조 4.2 식별자 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말함. 식별자는 값이 아니라 메모리 주소를 기억하고 있음. 4.3 변수 선언 변수를 사용하려면 반드시 선언이 필요함. ..