Language/JS 썸네일형 리스트형 콜백 (Call Back) 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) 응용 // .. 더보기 즉시 실행 함수 (IIFE) 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 -> 엥.. 더보기 HTML에서 JavaScript 쓰기 1. HTML 내부에 JavaScript를 쓰는 것 (CSS 인라인 형식과 유사) html 내에서 script란 태그를 쓰면 그 태그 안 쪽에 자바 스크립트 코드를 쓸 수 있다. 2. 외부 파일로부터 JavaScript 코드 가져오기 사이에 외부 파일의 JS 코드 전체가 들어가는 것과 동일하다. 만약 이렇게 쓴다면? 해당 경우, 사이에 쓰인 코드 내용은 무시된다. 왜냐하면 scr에 적힌 내용이 안으로 들어가는 것이기 때문이다. 더보기 While, do while 1. while break 할 수 있게 만들어주지 않으면 무한 루프가 돌 수 있다. 따라서 ( ) 안이든 { } 안이든 증감과 조건문을 달아줘야 한다. 2. do while while 조건에 처음 부터 안 맞아서 명령 실행 부가 아예 실행이 안될 수 있다. 이것을 막고자 쓰는 do while 문은 처음 한번은 문장이 실행되도록 해준다. do {} while ()은 먼저 명령어 부분을 한 번 실행하고, 루프에 진입한다. 0은 대표적인 falsey 값이라 참이 안된다. 이 문장을 맨 처음 한번은 실행하고 싶다면, 이렇게 하면 문장을 한 번 실행하고 루프에 진입한다. 더보기 이전 1 2 3 4 다음
