본문 바로가기
클라이언트/JavaScript
 (49)
[자바스크립트(JavaScript)] Promise // Promise - 최종 값이나 작동 여부에 대한 약속 ~ then()을 이용해서 request 성공 시 이후 작업을 처리할 수 있다. ~ catch()를 이용해서 request 실패 시 작업을 처리할 수 있다. - then 콜백에서는 Promise를 반환할 수 있다. //request .then(() => { //성공 시 작업 return 새로운 reques }) .then(() => { //새로운 request 성공 시 작업 }) .catch(() => { //새로운 request 실패 시 작업 }) // 새 Promise 작성법 (몰라도 되지만 알면 좋다) - new Promise()를 선언하고 () 안에 함수를 전달한다. - 전달되는 함수에는 resolve, reject 라는 매개변수가 있다...
[자바스크립트(JavaScript)] 콜 스택(Call Stack) // 콜 스택, Call Stack - JavaScript Interpreter가 사용하는 메커니즘 - 여러 함수를 호출하는 스크립트에서 해당 위치를 추적한다. - 책을 읽다가 다른 페이지를 참조하려고 할 때, 원래 있던 페이지에 꽂아놓는 책갈피 같은 역할을 한다. 첫 번째 함수가 두 번째 함수를 호출하고 있는 경우의 예시이다. 첫 번째 함수가 실행되면서 Call Stack에 쌓인다. 첫 번째 함수가 두 번째 함수를 호출하여 두 번째 함수가 실행되면서 Call Stack에 쌓인다. 작업이 완료된 두 번째 함수가 Call Stack에서 제거된다. 첫 번째 함수도 작업이 완료되어 Call Stack에서 제거된다. 모든 함수가 처리되었다. https://latentflip.com/loupe를 참고하면 콜 스택..
[자바스크립트(JavaScript)] 구조 분해 할당(Destructuring assignment) // 구조 분해, Destructuring assignment - 배열이나 객체의 값을 해체해서 개별 변수에 담는 방식 const [ 변수s(배열에서 분해한 것 지칭) ] = 배열; - 배열의 length보다 [] 안에 선언한 변수들이 적어도 된다.(앞에서부터 순서대로 변수에 담긴다.) > 남는 요소들은 rest params(...)로 담을 수 있다. - 배열의 구조 분해 할당을 이용하면 배열의 순서를 바꾸는 데 유용하다. - 객체의 구조 분해는 순서를 따르지 않기 때문에 배열 구조 분해보다 실용적이다. - 배열 구조 분해 const scores = [929321, 899341, 888336, 772739, 543671, 243567, 111934]; const [gold, silver, bronze, ..
[자바스크립트(JavaScript)] Rest 매개변수 // Rest 매개변수, Rest Params - 매개변수로 전달되지 않고 남아 있는 인수를 모두 모아 배열로 만들어준다. - 인수를 모을 배열명 앞에 점 3개 (...) 를 붙여준다. ※ spread와 구분할 수 있어야 한다! function sum(num1, ...nums) { console.log(num1); console.log(nums); } function raceResults(gold, silver, ...everyone) { console.log(`GOLD MEDAL GOES TO: ${gold}`); console.log(`SILVER MEDAL GOES TO: ${silver}`); console.log(`AND THANKS TO EVERYONE ELSE: ${everyone}`); }
[자바스크립트(JavaScript)] 전개 구문(Spread syntax) // 전개 구문, Spread syntax - 배열과 같은 iterable 객체(반복 가능한 객체)를 확장시켜준다. - 점 3개 ( ... ) 로 표기한다. - 깊은 복사로 활용할 수 있다. - 함수로 호출할 경우 : 0개 이상의 인수로 확장 - 배열 리터럴 : 요소로 확장 - 객체 리터럴 : 객체 표현식 -> 0개 이상의 키-값 쌍으로 확장 const nums = [24,5,6,7,357,4568,345,213123]; Math.max(...nums); console.log(...nums); const feline = { legs: 4, family: 'Felidae' }; const canine = { isFurry: true, family: 'Caninae' } const catDog = {...f..
[자바스크립트(JavaScript)] 기본 매개변수(Default Params) // 기본 매개변수, Default Params 함수를 정의할 때 매개변수가 필요한 경우, 호출될 때 인자를 전달하지 않으면 사용되는 기본값 // 구버전 기본 매개변수 - 조건문으로 매개변수가 입력되지 않았을 때를 선언하여 기본값을 설정한다. - 매개변수가 많을 경우 일일이 설정해야 해서 복잡하기 때문에 현재는 사용하지 않는다. function 함수명(매개변수) { if (매개변수 === undifined) { 매개변수 = 기본값; } } function rollDie(numSides = 6) { return Math.floor(Math.random() * numSides) + 1; } // 최신버전 기본 매개변수 - 함수 정의 시 매개변수에 기본값도 함께 설정한다. - 정의된 매개변수가 n개 인데 호출..
[자바스크립트(JavaScript)] 배열 메서드 // 배열 메서드 forEach map filter find reduce some every 자바에서 stream으로 접했던 익숙한 메서드들이 보일 것이다. 자바스크립트의 이러한 메서드들도 함수형 프로그래밍의 개념을 활용하지만, 일반적으로 stream 이라고 부르지는 않는다. // ForEach - 배열에 있는 요소마다 함수를 실행한다. - for .. of 루프가 나오기 전에는 자주 쓰였으나 for .. of 가 등장한 이후 현재는 자주 쓰이지 않는다. 배열(또는 객체).forEach(function(요소) { //처리 }) numbers.forEach(function (el) { if(el % 2 === 0) { console.log(el); } }); const movies = [ { title: ..
[자바스크립트(JavaScript)] This(일반 함수 vs 화살표 함수) // This 일반 함수와 화살표 함수는 각각 This가 가리키는 대상이 다르다. // 일반 함수 - 함수가 호출될 때 this의 값이 결정된다. // 화살표 함수 - 선언된 위치의 실행 컨텍스트에 따라 this의 값이 결정된다. - 함수가 속해 있는 곳의 상위 this를 계승받는다. ★ 객체의 메소드를 화살표 함수로 정의하게 되면 this가 window를 가리키게 되기 때문에 객체의 메소드는 화살표 함수로 정의하면 안 된다.

티스토리툴바