개발 알다가도 모르겠네요

Slice() slice()는 배열 메서드로 원하는 부분을 복사하고 새로운 배열로 리턴. 배열을 변경하지 않는 것이 핵심. let bread=['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6']; newArr=bread.slice(2,5); //output:["loaf3", "loaf4", "loaf5"] Splice() Splice() 또한 배열 메서드로 배열에 원하는 엘리먼트 갯수를 추가하거나 제거할 수 있음. 이는 기존 배열에 변이를 줌. 제거만 할 경우 let bread = ['loaf1','loaf2','loaf3','loaf4','loaf5','loaf6']; bread.splice(1, 3); ["loaf2", "loaf3", "loaf4"] //outpu..

모듈 모듈은 간단하게, 자바스크립트 파일 하나라고 할 수 있습니다. 복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면 코드를 좀 더 효율적으로 관리할 수 있고, 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 할 수도 있다는 장점이 있습니다. 모듈 스코프 모듈 파일 안에서 선언한 변수는 외부에서 자유롭게 접근할 수 없도록 막아야 합니다. 다시 말해 모듈은 파일 안에서 모듈 파일만의 독립적인 스코프를 가지고 있어야 합니다. HTML파일에서 자바스크립트 파일을 불러올 때 모듈 스코프를 갖게 하려면 script태그에 type속성을 module이라는 값으로 지정해 주어야 합니다. 모듈 문법 자바스크립트의 모듈 문법은 기본적으로 export와 import 입니다. 모듈 스코프를 가진 파일에서 ..

forEach 메소드 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드입니다. forEach 메소드는 첫 번째 아규먼트로 콜백 함수를 전달받는데, 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달됩니다. (index와 array는 생략가능) const numbers = [1, 2, 3]; numbers.forEach((element, index, array) => { console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨. }); map 메소드 forEach와 비슷하게 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드 입니다. 단, 첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만..

조건부 연산자 (Conditional operator) 삼항 연산자 (Ternary operator)라고도 불리는 이 연산자는 자바스크립트에서 세 개의 피연산자를 가지는 유일한 연산자 입니다. const cutOff = 80; const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!'; console.log(passChecker(75)); Spread 구문 여러 개의 값을 묶어놓은 배열이나 객체와 같은 값은 바로 앞에 마침표 세 개를 붙여서 펼칠 수가 있습니다. const webPublishing = ['HTML', 'CSS']; const interactiveWeb = [...webPublishing, 'JavaScript']; conso..

// 1) Function Declaration async function example1(a, b) { return a + b; } // 2-1) Function Expression(Named) const example2_1= async function add(a, b) { return a + b; }; // 2-2) Function Expression(Anonymous) const example2_2 = async function(a, b) { return a + b; }; // 3-1) Arrow Function const example3_1 = async (a, b) => { return a + b; }; // 3-2) Arrow Function(shortened) const example3_2 ..

async function fetchAndPrint() { console.log(2); const response = await fetch('https://jsonplaceholder.typicode.com/users'); console.log(7); const result = await response.text(); console.log(result); } console.log(1); fetchAndPrint(); console.log(3); console.log(4); console.log(5); console.log(6); 사실 fetchAndPrint 함수를 언뜻 보면, 비동기 실행 함수처럼 생기지 않았습니다. 오히려 코드가 등장하는 순서대로 실행될 것처럼 생겼는데 이건 의도된 것입니다. 왜냐하면..

자바스크립트의 데이터 타입 자바스크립트에는 8가지 데이터 타입이 있습니다. number string boolean undefined null object symbol bigint Truthy 값과 Falsy 값 // falsy Boolean(false); Boolean(null); Boolean(undefined); Boolean(0); Boolean(NaN); Boolean(''); // truthy Boolean(true); Boolean('codeit'); Boolean(123); Boolean(-123); Boolean({}); Boolean([]); 독특한 방식으로 동작하는 논리 연산자 자바스크립트에서 AND와 OR연산자는 무조건 불린 값을 리턴하는게 아니라, 왼쪽 피연산자 값의 유형에 따라서 ..

1. 추상화(Abstraction) 우리가 객체를 만드는 과정은 현실 또는 가상의 존재를 프로그램 내에서 사용할 용도에 맞게 적절하게 설계하는 과정입니다. 이때 객체를 만들고 나면 그 객체를 사용하는 사람은 객체 내부에 존재하는 복잡한 원리를 모르더라도 객체 외부에 공개된 프로퍼티나 메소드만을 가지고도 객체를 문제없이 잘 사용할 수 있어야 합니다. 이를 위해서는 프로퍼티와 메소드의 이름을 누구나 이해하기 쉽게 잘 지어야하고, 필요한 경우 이렇게 주석을 달거나 class User { constructor(email, birthdate) { // 사용자의 이메일 주소 this.email = email; // 사용자의 생일 this.birthdate = birthdate; } // 물건 구매하기 buy(ite..

all 메소드 // 1번 멤버 정보 const p1 = fetch('https://test.com/api/members/1').then((res) => res.json()); // 2번 멤버 정보 const p2 = fetch('https://test.com/api/members/2').then((res) => res.json()); // 3번 멤버 정보 const p3 = fetch('https://test.com/api/members/3').then((res) => res.json()); Promise .all([p1, p2, p3]) .then((results) => { console.log(results); // Array : [1번 멤버 정보, 2번 멤버 정보, 3번 멤버 정보] }); all ..