본문 바로가기

javascript/Basic

(6)
TIL no.53 - arrow function 화살표 함수 - arrow function은 ES6 이후로 등장한 새로운 개념입니다. arrow function 은 단순하고 간단한 문법으로 함수를 작성하기 위해 사용되는 개념입니다. 작성이 편리하고 보기에도 간결하기 때문에 여기저기 흔하게 사용되는 것을 볼 수 있었을 것입니다. 일반 함수의 모양과는 다르게 //함수 선언식 function hiThere() { console.log('Hi there ~'); } //함수 표현식 const function = function () { console.log('Hi there ~'); } arrow function은 이렇게 선언합니다. () => console.log('hi there ~') 함수 선언식에는 이름이 있는 반면에 arrow function은 익명함수로 표현합..
TIL no.51 - 객체 지향 프로그래밍과 함수형 프로그래밍 객체 지향 프로그래밍보다 더 발전 되어 나온 것이 함수형 프로그래밍이라고 생각할 수 있으나 이는 맞지 않습니다. 객체 지향과 함수형 프로그래밍은 서로 다른 패러다임이라고 생각하시면 될 것 같습니다. 이 두가지의 차이점을 알아보고 이해하며 공부해보겠습니다. 객체 지향 프로그래밍 (Object Oriented Programming) :객체 중심적인 프로그래밍으로 데이터를 추상화시켜 객체를 만들고 객체 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법 캡슐화의 특징을 가진 코드들로 코드의 재사용성이 높아지고 이러한 객체로 작성된 코드는 정보 은닉성의 특징을 띄어 유지 보수가 쉬울 수 있습니다. 하지만 처리 속도가 상대적으로 느리고 객체가 많으면 용량이 커질 수 있다는 단점이 있습니다. - 정보 은..
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.27 - return 의 사용 : JavaScript 모든 함수는 반환(return)을 합니다. return 함수 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있습니다. 덧붙이자면, 모든 함수가 return을 포함해야 하는 건 아닙니다. 함수 내부에 return 키워드를 생략할 수도 있습니다. 하지만 이 경우에도 함수는 무언가를 반환하고 있습니다. 함수가 반환을 생략하면 undefined라는 값을 반환합니다. 그리고 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료됩니다. 한마디로 return 문은 데이터 결과값을 반환합니다. function getName(name) { return name + '님'; } 코드 블럭 12번째 줄, getName() 함수를 ..