Promise
·
Language/JavaScript
- 프로미스는 비동기 작업을 편하게 처리할 수 있도록 ES6에 도입된 기능. - 이전에는 비동기 작업을 끝내고 나서, 어떤 작업을 해야할 때 콜백함수로 처리를 해주었어야 했는데, 그러한 작업들이 많을 경우 여러 콜백함수로 인해 코드가 쉽게 난잡해지게 되었음 => 이를 해결하기 위해 프로미스가 만들어짐 function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAndPrint(0, (n) => { increaseAndPrint(n, (n) => { increaseAnd..
Hoisting
·
Language/JavaScript
- Hoisting : 자바스크립트에서 아직 선언되지 않은 함수, 변수를 끌어올려서 사용할 수 있는 자바스크립트의 작동 방식 myFunction(); function myFunction() { console.log("hello world"); } 함수 선언 순서가 뒤바뀌었는데도, 위와 같이 잘 로그가 찍히는 것을 볼 수 있는데 이는 자바스크립트 엔진이 function myFunction() { console.log("hello world"); } myFunction(); 이 순서로 받아들이기 때문. 함수가 아래에 있어도 호출 가능. => 하지만 위와 같은 호이스팅 기능은 피해야함. 순서가 이상하게 배치되어있으면 유지보수하기 힘들기 때문. console.log(number); var number = 2; ..
Scope
·
Language/JavaScript
- 자바스크립트에서 Scope란, 변수 혹은 함수를 선언하게 될 때, 해당 변수 또는 함수가 어디서부터 어디까지 유효한지 나타내는 범위. - Global, Function, Block이란 3가지 종류가 있음. - Global : 코드의 모든 범위에서 사용 가능함 - Function: 특정 함수 내부에서만 사용 가능함 - Block : if / for / switch문에서 사용 가능함 const value = "hello"; function myFunction() { console.log("myFunction : "); console.log(value); } function otherFunction() { console.log("otherFunction : "); const value = "bye"; co..
함수 인자에서 rest
·
Language/JavaScript
function sum(...rest) { return rest.reduce((acc, current) => acc + current, 0); } console.log(sum(1, 2, 3, 4, 5, 6)); function subtract(x, y) { return x - y; } const numbers = [1, 2]; // const result = subtract(numbers[0], numbers[1]); const result = subtract(...numbers); console.log(result); function sum(...rest) { return rest.reduce((acc, current) => acc + current, 0); } const numbers = [1, 2,..
함수 파라미터에서 rest
·
Language/JavaScript
function sum(...rest) { // 기본 값을 0으로 셋팅한 배열 내장함수 reduce사용하여, 배열의 누적합을 구한다. return rest.reduce((acc, current) => acc + current, 0); } console.log(sum(1, 2, 3, 4, 5, 6)); - ...rest를 사용하여 인수를 배열로 받아서, 파라미터에 셋팅해줄 수 있음.
rest
·
Language/JavaScript
객체에서 사용하는 Rest const purpleCuteSlime = { name: "슬라임", attribute: "cute", color: "purple" }; const { color, ...cuteSlime } = purpleCuteSlime; console.log(color); console.log(cuteSlime); const { attriubte, ...slime } = cuteSlime; console.log(slime); ...rest 연산자를 이용해서 남은 값들을 모두 할당해줄 수 있다. ...rest 혹은 ...특정 이름으로 변수를 할당하여 나머지 값들을 할당하는 방식이다. 배열에서 사용하는 Rest const numbers = [0, 1, 2, 3, 4, 5, 6]; const [..
spread 연산자
·
Language/JavaScript
객체에서의 Spread const slime = { name: "슬라임" }; const cuteSlime = { name: "슬라임", attribute: "cute" }; const purpleCuteSlime = { name: "슬라임", attribute: "cute", color: "purple" }; console.log(slime); console.log(cuteSlime); console.log(purpleCuteSlime); - 위와 같은 코드를, ... 이 스프레드 연산자를 활용하여 배열, 문자열, 반복객체를 다른 배열, 문자열, 반복 객체로 빠르게 복사할 수 있음. const slime = { name: "슬라임" }; const cuteSlime = { ...slime, attrib..
비구조화 할당
·
Language/JavaScript
객체 비구조화 할당 const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); console.log(b); function print({ a, b }) { console.log(a); console.log(b); } print(object); - 위와 같이 비구조화 문법을 사용하여 왼쪽 변수의 값에 오른쪽 값들을 해체하여 간편하게 할당해 줄 수 있음 const object = { a: 1 }; const { a, b = 2 } = object; console.log(a); console.log(b); 혹은 위처럼 비구조화 구조에서 b = 2 처럼 기본값을 할당해줄 수도 있다. const animal = { name: "멍멍이", typ..
객체 활용
·
Language/JavaScript
function getSound(animal) { const tasks = { 개: () => { console.log("멍멍"); }, 고양이() { console.log("야옹!"); }, 비둘기: function () { console.log("구구 구구"); } }; const task = tasks[animal]; if (!tasks[animal]) { console.log("....?"); return; } task(); } getSound("개"); getSound("비둘기"); getSound("인간");
takoyummy
TakoHub