자바스크립트 - Vanilla JS

[자바스크립트 / Vanilla JS] Array(배열) - filter, reduce, map

보통 배열 내 인자들을 차례로 순회할 때 for문을 많이 사용한다. 하지만 조금만 JavaScript를 살펴보면 for문보다 더 유용하고 간결하게 코드를 작성하게 해주는 메서드를 만날 수 있다. 그래서 오늘은 배열에 사용하는 메서드 중에서도 비슷한 기능을 하는 세 함수 filter, reduce, map에 대해 알아보겠다. filter, reduce, map 세 개 모두 ES6에서 추가된 메소드이다.그리고 배열 타입에 사용하며, 각 요소들을 파라미터로 받아 작동한다는 공통점이 있다.그렇다면 어떤 점에서 차이가점이 있고 어떤 상황에서 사용하는게 좋을지 알아보도록 하자 ❗ Map map()은 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메소드이다.섭씨 -> 화씨, 숫자 -..

[자바스크립트 / Vanilla JS] 디스트럭처링이란 ? (객체 디스트럭처링, 배열 디스트럭처링)

❗ 디스트럭처링이란 ? MDN은 디스트럭처링을 다음과 같이 정의한다. " 디스트럭처링 할당 문법은 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식이다 " 먼저 객체 디스트럭처링부터 알아보자. ✔ 객체 디스트럭처링 예전에는 객체에서 변수를 생성하려면 다음과 같은 방식으로 코드를 작성했다. var person = { first: "JiWoo", last: "Kim", }; var first = person.first; var last = person.last; ES6에서는 더 간결하게 다음과 같은 방법을 사용한다. const person = { first: "JiWoo", last: "Kim", }; const {first, last} = person; consol..

[자바스크립트 / Vanilla JS] 함수 기본값 인수

❗ 함수 인수의 기본값 (ES6 이전) ES6 이전에는 함수 인수의 기본값을 설정하는 것이 쉽지 않았다. 바로 예시를 하나 살펴보자. function getLocation(city, country, continent){ if (typeof country === 'undefined'){ country = 'Italy'; } if (typeof continent === 'undefined'){ continent = 'Europe'; } console.log(continent, country, city) } getLocation('Milan'); // Europe Italy Milan getLocation('Paris', 'France'); // Europe France Paris 예제의 함수는 city, c..

[자바스크립트 / Vanilla JS] 화살표 함수란 무엇일까 ?

화살표 함수란 ❓ 화살표 함수는 ES6에서 "=>"를 사용해서 함수를 선언하는 방법이고 특징으로는 다음과 같다. 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않는다. 화살표 함수는 항상 익명이다. 화살표 함수는 메소드 함수가 아닌 곳에 가장 적합하다. 그래서 생성자로서 사용할 수 없다. ES6 이 전 버전인 ES5에서 일반적으로 함수를 선언하는 방법은 다음과 같았다. const greeting = function(name) { return "hello " + name; }; 이를 화살표 함수 문법으로 바꾸면 다음과 같다. var greeting = name => { return `hello ${name}`; }; return 값은 템플릿 리터럴을 사용하였다. 템..

[자바스크립트 / Vanilla JS] this란 무엇일까 ?

this란 ❓ this 키워드는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이고, this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 먼저 간단한 예를 들어보고 가자. const myCar = { color: 'red', logColor: function() { console.log(this.color); }, }; myCar.logColor(); // red 해당 예시에서 this 키어드가 myCar 개체를 참조한다는 것은 자명하다. this의 값은 함수가 호출되는 방식에 따라 다르다. 앞의 예에서 함수는 객체의 메서드로 호출 되었다. 반면, 아래의 예를 보자 function lo..

[자바스크립트 / Vanilla JS] 객체와 객체 접근법 (점 표기법, 대괄호 표기법)

객체(Object)란 ❓ 객체는 간단하게 정의해서 여러 속성의 모음을 저장하는데 사용하는 자료형이다. 먼저 간단한 예시로 살펴보자 const car = { wheels: 4, color: "blue" }; 차의 속성을 저장하는 데 사용하는 간단한 객체이다. 각 속성에는 키(첫 행의 경우 wheels)와 값 (첫 행의 경우 4)이 있다. 키의 자료형은 string 자료형이지만 값은 모든 자료형이 될 수 있고 심지어 함수가 될 수도 있다 ✔ 객체 표기법 객체 표기법에는 2가지 방법이 존재한다 "점 표기법"과 "대괄호 표기법"이 있다 const car = { wheels: 4, color: "red" "goes fast": true } // --- 점 표기법 --- console.log(car.wheels);..

[자바스크립트 / Vanilla JS] 스코프(Scope)

스코프(Scope)란 ❓ 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 간단하게 축약할 수 있다 자바스크립트 스코프는 Global(전역)과 Local(지역) 2가지 타입이 있다. . 전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미이고 지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미이다. 자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데 이걸 함수 스코프(function-scoped)라고 한다. 함수 스코프가 바로 지역 스코프의 예라고 할 수 ..

[자바스크립트 / Vanilla JS] 함수 선언식 과 함수 표현식

함수 선언식(Function Declarations)이란? 1. 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다. 2. 변수 선언이 let이나 const로 시작해야하는 것처럼 함수 선언을 function으로 시작한다. 3. 함수 선언문의 경우 반드시 함수명이 정의돼 있어야 하고 선언된 함수는 나중 사용을 위해 저장되며, 함수를 실행하려면 함수 이름을 호출하면 된다. 4. 함수 선언식은 코드가 실행되기 전에 로드된다 5. 함수 선언식은 var 문과 유사하게 호이스팅된다. function 함수명() { // 개발 코드 } // 함수 선언 function name() { console.log("JIWOO"); } // 함수 호출 name(); 함수 표현식(Function Expressions)이란?..