본문 바로가기

javascript

(29)
TIL no. 50 - 호이스팅 (hoisting) 이 무엇인가요? 호이스팅이란, javascript 함수 내의 모든 변수 선언들을 해당 함수 유효범위의 최상단으로 끌어올리는 것을 의미합니다. 정의만 들었을 때는 쉽게 이해가 되지 않을 수 있기 때문에 코드를 보면서 이해해 보도록 하겠습니다. function ImHungry() { console.log(pizza); var pizza = 'pizza is good'; } 위의 간단한 코드를 보겠습니다. ImHungry 라는 함수 안에서 console.log에 아직 선언되지 않은 pizza를 출력했습니다. 출력한 뒤에 pizza가 선언되었기 때문에 위의 코드에서 에러가 발생해야 할 것 같지만 자바스크립트에서는 undefined를 출력하고 넘어갑니다. 이 이유는 두번째 코드인 var pizza = 'pizza is good'..
TIL no.47 - 클로저란 무엇일까 클로저란 무엇인가 클로저는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킵니다. 클로저는 자바스크립트를 이용한 고난이도 테크닉을 구사하는데 필수적인 개념으로 활용됩니다. Mozilla에서 개념적인 정리 부분을 보면 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. Closure = function() + lexical scope 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다고 합니다. lexical 이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미합니다. 한마디로 클로저는 필요한 ..
TIL no.46 - this 는 무엇인가요 : JavaScript 이번 글에서는 JavaScript 를 공부하면서 어려웠고 잘 이해하고 싶었던 this에 대해 포스팅해보도록 하겠습니다. 내가 궁금한 거 1. 왜 this를 써야 하나요? 2. this 가 무엇인가요? 3. 왜 어려울까요? 4. 어떻게 써야하나요 ? 왜 this를 써야 하나요? Java는 클래스 기반 언어입니다. Java에서 함수는 메서드이고, 메서드는 클래스에 묶여 있습니다. 그리고 인스턴스는 클래스에서 생성됩니다. 그러므로 모든 메서드는 this 키워드가 가리키는 객체가 자신이 속한 클래스의 인스턴스라고 확신할 수 있습니다. 하지만 JavaScript에는 클래스가 없습니다. 그래도 함수는 구동되고 인스턴스는 원하는 대로 막 만들 수 있습니다. 클래스가 없으니 기본적으로 상속기능도 없습니다. 그래서 프로..
TIL no.43 - 비동기 처리 async await : JavaScript async await 는 자바스크립 비동기 처리 문법 중 하나입니다. 콜백함수나 프로미스 보다도 간결하게 사용될 수 있다는 점에서 유용하게 사용할 수 있습니다. async 는 await를 무조건 필요로 하며 최근에 async를 쓰지 않아도 await를 사용할 수 있다고는 하나 아직 모든 부분에 적용되지는 않는 것 같습니다. 함수 앞에 async를 붙이며 비동기 처리를 해야하는 코드 앞에 await를 붙입니다. 비동기 처리 메소드가 꼭 Promise를 반환하는 것에만 await를 사용할 수 있습니다. 일반적으로 axios 같은 Promise를 반환하는 API 호출 함수에 await를 많이 사용합니다. 저도 이번에 기업협업에서 하는 프로젝트에서 axios로 API를 호출하는 함수에서 async await을 ..
TIL no.38 - Promise 란 무엇인가 ? 개념 정리와 이해 Promise 는 자바스크립트 비동기 처리에 사용되는 객체입니다. *비동기 처리란 특정 코드의 실행이 완료 된 후에 다음 코드를 실행하는 것이 아니라 특정 코드의 실행이 되는 동안에 다음 코드를 수행하는 자바스크립트의 특성을 말합니다. 콜백을 쓰지 않고 비동기 코드를 깔끔하게 구현하기 위해서 Promise를 사용합니다. 에러를 콜백함수로 길게 처리하지 않고 promise안에 있는 resolve, reject를 통해 깔끔하게 에러 처리할 수 있습니다. Primise 는 서버에서 받아온 데이터 API를 연결할 때 쉽게 볼 수 있는데요. 만약에 Get method를 이용해 API를 받아오고 받아온 API key를 이용해서 함수가 작동된다고 생각해봅시다. 자바스크립트의 비동기 처리에 따르면 API 데이터를 가져..
TIL no.32 array.some(), array.every() : javascript method 아는 만큼 해결할 수 있는 능력이 커진다고 프로젝트를 진행하면서도 더 많은 메소드를 접하고 공부하는 것이 중요할 것 같습니다. array.some() const getSuperCoolTeam = ['프론트하늘', '프론트민승', '프론트보현', '프론트양효', '백소정', '백재용']; const backEnd = (person) => !person.indexOf('백'); getSuperCoolTeam.some(backEnd) // 결과값은 true 입니다. '백'이라는 인덱스를 포함한 person이 두명이나 있기 때문에 결과는 true입니다. array.some은 하나라도 true 라면 true 를 반환하는 메소드입니다. array.every() const numbers = (num) => num <..
TIL no.31 array.filter() 기능 : 쇼핑몰 카테고리 필터 기능 : 리액트 인스타그램을 클론하는 위스타그램 프로젝트를 진행하면서 아이디를 검색하는 필터 기능을 적용해보지 않아서 이번 프로젝트에서 필터 기능이 있는 페이지를 선택하게 되었습니다. 필터 기능은 array 배열에서 조건에 맞는 값들로만 새로운 배열을 만들어주는 메소드입니다. const numbers = [1, 6, 7, 56, 43, 23, 14, 36, 21, 29]; const result = numbers.filter(num => num.length < 30); console.log(result); result = [1, 6, 7, 23, 14, 21, 29] //결과값 위와 같이 원하는 조건을 필터로 걸러주고 result 라는 새로운 배열에 담아 줍니다. 항상 기본 개념은 들으면 이해가 되지만 활용이 참 어려운..
TIL no.27 - return 의 사용 : JavaScript 모든 함수는 반환(return)을 합니다. return 함수 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있습니다. 덧붙이자면, 모든 함수가 return을 포함해야 하는 건 아닙니다. 함수 내부에 return 키워드를 생략할 수도 있습니다. 하지만 이 경우에도 함수는 무언가를 반환하고 있습니다. 함수가 반환을 생략하면 undefined라는 값을 반환합니다. 그리고 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료됩니다. 한마디로 return 문은 데이터 결과값을 반환합니다. function getName(name) { return name + '님'; } 코드 블럭 12번째 줄, getName() 함수를 ..