1. 콜백이란? 하나의 코드에 인수로 들어가는 실행 가능한 코드를 Call back이라 한다. 어떤 함수의 인자로 들어가는 실행 가능한 함수를 Call back 함수라고 한다. 2. 콜백 예제 3가지 (1) 기본적인 것 const a = (callback) => { console.log("A"); callback(); }; const b = () => { console.log("B"); }; a(b); 맨 마지막 문을 보면, a라는 함수의 인수로 b 함수 자체를 넣었다. 그러면 console.log(b) 했을 때 처럼 b 함수 자체가 a의 인수로 들어간다. 그리고 3번째 줄을 보면 callback()은 인수로 받은 b() 함수 자체를 실행하겠다는 의미이다. 따라서 출력이 다음과 같다. (2) 응용 // ..

1. 즉시실행함수 함수는 원래 선언부 (혹은 표현식)과 호출부가 따로 필요하다. 왜냐하면 선언부는 함수의 내용에 대해 기술만 하여 놓은 곳이고, 호출부는 함수의 내용을 쓰는 곳 이기 때문이다. 즉시 실행함수는 함수의 선언과 호출을 한번에 하는 함수를 말한다. 밑에 즉시 실행함수 사용 패턴을 배우겠지만, 대표적인 패턴으로 즉시실행함수의 모습을 살펴보면, //(실행할 함수)(인수); // 예시 ((a) => { console.log(a*2); })(7); 이와 같다. ()() 가 붙어 있는 형태로, 첫번째 ()에는 실행할 함수, 두번째 ()에는 함수에 들어갈 인자를 기술하면 된다. 2. 패턴 // 즉시 실행 함수 패턴 // 1. 화살표 함수 사용 패턴 -> 화살표 함수로 즉시 실행 함수를 쓸 수 있는 패턴은..

0. 화살표 함수는 변수에 익명 함수를 할당하는 형식이므로 함수 선언이 아니라 함수 표현식 취급을 받는다. (호이스팅 불가) 1. 화살표 함수의 패턴 const a = () => {}; // 매개변수가 하나이면 소괄호 생략 가능 const b = x => {}; const c = (x, y) => {}; // 만약 함수 동작부분에 다른 로직 없이 return문만 있다면 {}와 return 키워드 생략이 가능하다. const d = (x) => {return x * x;}; const e = (x) => x * x; // 만약 함수 동작부분 내에 return 말고 다른 로직이 있다면 { return} 형태로 적어줘야 함. const f = (x) => { console.log(x * x); return x..

0. 기본형 function sum(a, b) { // 여기는 인수를 받는 매개체 매개변수 return a + b; } console.log(sum(1, 2)); // 여기가 들어온 값 인수 인수, 매개변수 두 용어를 헷갈렸었는데, 인수는 함수가 호출되어 실제 들어오는 값을 뜻하고, 매개변수는 함수 선언문에 적히는 인수를 받는 매개체를 뜻한다. 1. 기본값 위의 함수에서 만약에 사용자가 sum 함수를 호출하고 인수를 하나만 쓴 경우 어떻게 될까? console.log(sum(7)); // 7과 undefined를 더 해서 not a number 두 번째 인수로는 undefined가 들어가서 7 + undefined가 되어 NaN이 출력될 것이다. 이를 방지하기 위해서 매개변수에 조치를 취할 수 있다. '..

1. return (1) 반환하는 역할 return 옆에 적힌 내용을 반환 값이라 한다. 반환 값은 함수를 호출했을 때, 호출문 자리에 대신해서 적힐 값이다. function hello() { return "hello~"; } console.log(hello()); // console.log("hello~")와 같은 말이다. ** return 옆에 아무것도 안 적어줬을 시? ** return 뒤에 아무것도 안 적어주면 undefined가 출력된다. function hello2() { return; } console.log(hello2()); (2) 함수를 종료하는 역할 함수 코드를 위에서 아래로 진행하다가 return 문을 만나면 그 자리에서 함수를 종료하고 return 값 반환 뒤, 탈출한다. 따라서 ..

1. 함수 선언문 함수 선언 Keyword로 시작해서 함수를 선언하는 문장. //함수 선언문 function hello () {} function 함수이름 (인수 넣는 자리) {동작 로직} 형태로 적힌다. 2. 함수 표현식 변수에 익명함수나 기명 함수를 대입하는 형태의 표현식이다. // 표현식 1. 기명함수를 변수에 대입 const world = function hello () {} // 표현식 2. 익명함수를 변수에 대입 const world2 = function () {} const world3 = () => {} 표현식 1인 기명함수를 변수에 대입할 시 원래 함수의 이름으로 더 이상 호출하여 쓰지 못한다. 무조건 대입한 변수 이름으로만 호출하여 쓸 수 있다. hello(); // error -> 엥..

1. HTML 내부에 JavaScript를 쓰는 것 (CSS 인라인 형식과 유사) html 내에서 script란 태그를 쓰면 그 태그 안 쪽에 자바 스크립트 코드를 쓸 수 있다. 2. 외부 파일로부터 JavaScript 코드 가져오기 사이에 외부 파일의 JS 코드 전체가 들어가는 것과 동일하다. 만약 이렇게 쓴다면? 해당 경우, 사이에 쓰인 코드 내용은 무시된다. 왜냐하면 scr에 적힌 내용이 안으로 들어가는 것이기 때문이다.

1. while break 할 수 있게 만들어주지 않으면 무한 루프가 돌 수 있다. 따라서 ( ) 안이든 { } 안이든 증감과 조건문을 달아줘야 한다. 2. do while while 조건에 처음 부터 안 맞아서 명령 실행 부가 아예 실행이 안될 수 있다. 이것을 막고자 쓰는 do while 문은 처음 한번은 문장이 실행되도록 해준다. do {} while ()은 먼저 명령어 부분을 한 번 실행하고, 루프에 진입한다. 0은 대표적인 falsey 값이라 참이 안된다. 이 문장을 맨 처음 한번은 실행하고 싶다면, 이렇게 하면 문장을 한 번 실행하고 루프에 진입한다.

1. For 반복문 // 선언부 ; 조건부; 증감연산부; // 조건에 맞는지 확인 -> loop 돌릴려는 명령 실행 -> 증감 연산 -> 조건에 맞는지 확인 (반복) for (let i = 0; i < 10; i++) { console.log(i); } (1) break loop를 돌다가 break를 만나면 그 자리에서 탈출 i가 9가 되는 순간 탈출. (2) Continue continue를 만나면, 해당 키워드 밑의 코드들은 실행하지 않고 다시 loop로 돌아감. if 조건 만족해서 continue 만나면 밑의 문장들 실행하지 않고, 바로 loop문으로 넘어감. if 조건 만족 못해서 지나갈 경우 , 그대로 console.log 찍힘. 2. For of 반복문 (배열에서 쓰임) java에서의 for ..

1. if 2. switch 문 (1) 형태 let comment = ""; age = 14; switch (age) { case 14: comment = "중학교 1학년"; break; case 15: comment = "중학교 2학년"; break; case 16: comment = "중학교 3학년"; break; case 17: comment = "고등학교 1학년"; break; case 18: comment = "고등학교 2학년"; break; case 17: comment = "고등학교 3학년"; break; default: comment = "성인이거나 초등학생입니다."; } console.log(comment); 인수로 받은 값을 case 에 적혀있는 값들과 차례대로 비교한다. 그 중 일치하..

**완전 잘 보고 배운 곳 ** 옵셔널 체이닝 '?.' (javascript.info) 옵셔널 체이닝 '?.' ko.javascript.info 1. Optional Chaining 이 생긴 이유 (1) 생긴 이유 객체 안의 멤버의 값을 얻기 위해 점 표기법으로 접근했는데, 그 멤버가 존재하지 않는 순간이 있다. 이 경우 원래라면 에러가 난다. const User {} console.log(user.adderess); // syntax error 이와 같이 우리가 객체 안의 특정 멤버에 접근하려고 하지만, 그 멤버가 있는지 없는지 모르는 경우에 Error를 피하기 위해 OptionalChaing이 만들어진 것이다. (2) Optional Chaining 없었을 땐 어떻게 이 문제를 해결했나요? && 이 ..

1. 구조 분해 할당이란? 만약 우리가 배열에서 원소를 일일히 빼서 변수에 집어 넣는다면, 다음과 같은 과정을 거쳐야 할 것이다. const arr = [1,2,3] const a = arr[0] const b = arr[1] const c = arr[2] JS에서는 위 과정을 간단하게 한 줄의 코드로 적을 수 있는 방법이 있다. 이를 구조 분해 할당이라고 한다. 배열이나 객체의 원소들을 찢어서 변수 하나 하나에 넣어주는 방식을 말한다. 2. 배열에서의 구조 분해 (1) 기본형 // 배열 선언 const arr = [1,2,3] // 구조 분해 할당 이용: 변수 a, b, c에 각각 1, 2, 3이 차례로 들어간다. const [a,b,c] = arr console.log(a,b,c) // 1 2 3이 ..

1. 정의 (1) 형태 const a = [1,2,3] console.log(a) // [1,2,3] console.log(...a) // 1,2,3 const b = {a:'apple', b: 'banana', c: 'car'} const c = {d:'digest', e: 'earth', f: 'fool\'s day'} const r = {...b,...c} console.log(r) // {a:'apple', b: 'banana', c: 'car', d:'digest', e: 'earth', f: 'fool\'s day'} (2) 정의 배열이나 객체의 원소들을 차례대로 전개하는 연산자이다. 배열의 대괄호나, 객체의 중괄호를 벗긴다. ** console.log() 에 여러 개의 data를 찍는 법 ,..

1. Nullish병합 (1) 정의 const num = A ?? B ?? C ... // null 이나 undefined가 아닌 맨 처음 만난 data를 반환 // 만약 연산자 안에 모든 값들이 null 이나 undefined 라면 맨 마지막의 nullish 값을 반환 // (null , undifined 합쳐서 nullish라고 한다.) OR은 false가 아닌 맨 처음 만난 data를 반환 하는 연산자였다. Nullish 병합은 OR 보다 거르는 범위가 적어진 연산자이다. (2) 예시들 a. OR 과 Nullish의 차이 0은 false 값이고, 7이 제일 먼저 만난 0이 아닌 값임으로 7을 반환 0은 제일 처음 만난 nullish가 아닌 값임으로 0을 반환 b. 다양한 연산들 2. 삼항 연산자 (..

1. 그리고 && (1) 정의 A&&B 는 A, B 둘 다 참이여야지만 참을 반환 const A = true const B = true if (A&&B) { console.log('A,B 둘 다 참이다.') } // A,B 둘 다 참이다 반환 (2) JS만의 특이점 위에서 그냥 'A,B 둘 다 참이면 참을 반환' 한다고 말했지만, JS는 다른 언어들과 달리 여기서 그치지 않고 자기들만의 규칙이 있다. 만약에 A&&B 자체를 console에 찍는다고 하자. 다른 언어 같았으면, A = 0 , B = 1 이면 false를 찍는다. (0은 거짓, 0이 아닌 숫자는 모두 참 취급을 하므로 ) 하지만 JS는 0이 출력된다. 이렇게 되는 이유는 JS 만의 규칙이 존재하기 때문이다. JS에서의 && 연산자는 가장 먼..

1. !이거 붙이면 boolean 값이 toggle이 됨. // 부정(Negation) console.log(!true) console.log(!false) console.log(!0) console.log(!!0) // 중복 toggle이 가능 console.log(!!!0) console.log(!null) console.log(!undefined) console.log(!NaN) console.log(!'') console.log(!{}) console.log(![]) 2. 비교 연산자 //비교 연산자 const a = 1 const b = 3 // 동등 연산자 // (a,b 형이 다를 경우 자동으로 형 변환 해서 비교함. 따라서 0 과 '0'도 같다고 반환한다. 이는 부정확성을 초래하여 안 쓰는 ..

1. 산술 + - x / %(나머지 연산자) 2. 할당 // var -> 재선언 재할당 전부 가능 // let -> 재선언 불가 재할당 가능 let a = 3 a = 5 // ok let a = 3 let a = 2 //Error // const -> 재선언 재할당 전부 불가능 const a = 3 a =4 //Error 3. 증감 let a = 2 console.log(++a) console.log(a) // 해당 출력문 실행하기 전에 a 값에 1을 더해라 (출력 3 3) console.log(a++) console.log(a) // 해당 출력문 실행 후에 a에 1 더해라 (출력 2 3)

//데이터 타입 확인 // console.log(typeof a) // 근데 이걸로는 null, 배열[] 객체{} 는 확인하지 못한다. // Js에서는 함수도 타입으로 친다. console.log(typeof 'hello' === 'string') console.log(typeof 123 === 'number') console.log(typeof false === 'boolean') console.log(typeof undefined === 'undefined') console.log(typeof null ==='object') console.log(typeof[] === 'object') console.log(typeof{} === 'object') console.log(typeof function (..

// 참과 거짓 /* * -- boolean으로 받아들여질 시 거짓으로 간주되는 것 * (1) false * (2) 0, * (3) null, * (4) undefined * (5) NaN * (6) '' -> 빈 문자열 * (7) 0n -> Bigint란 타입으로 0을 나타낸것. * --이외에 모든 숫자 문자는 전부 참-- * 배열은 비어있어도 참임 * NaN은 잘못된 수학 계산, 잘못된 숫자를 의미한다. * ex) 0/0 ===NaN(잘못된 수학 계산), 100/"hi" === NaN (잘못된 숫자) * */ if(null){ console.log('참') } else{ console.log('거짓') }

1.컴포넌트 : 재사용이 가능한 개별적인 여러 조각 UI(User Interface)는 여러 개의 Component로 나뉜다. 카톡 화면은 위와 같이 5개의 컴포넌트로 나뉘는 것이다. 컴포넌트는 java로 치면 매소드 같은 녀석이다. 2. 컴포넌트의 종류 (1) 클래스형 컴포넌트 a. 쓰기 위한 조건 - React.Component라는 클래스를 무조건 상속해야 함. - render() 라는 함수를 사용해야 하고, 위 함수의 return 값에다가 하고 싶은 내용물을 적어야함. b. state, lifestyle(생명 주기)라는 기능을 사용할 수 있음. c. 함수 형 컴포넌트보다 메모리를 더 사용한다는 단점. (2) 함수형 컴포넌트 a. state, lifestyle이라는 기능을 사용하지 못함. 따라서 Ho..