FRONTEND/JavaScript 30

reduce함수의 활용

Reduce 함수의활용 앞서 살펴본 것처럼 Reduce함수의 기본적인 이용(내가 느끼기에는 단순히 수를 곱하고 더하고 빼고등의 산술적인 계산..)은 매우 쉽다. 하지만, 이를 내가 원하는대로 배열을 바꾸는데 사용할때에는 어려움을 많이 겪어, 이에 대해 자세히 다뤄보려고 한다. string 값을 가지고 있는 배열에 적용 let arr = ['적게 ', '일하고 ', '많이 ', '돈벌자'] let result = arr.reduce((a, c) => a+c)); 를 하게 되면 '적게 일하고 많이 돈벌자'라는 string이 생기게 된다. 역시 별로 어렵지 않다. 하지만, 이걸 객체를 value로 가진 array에 적용하게 된다면 생각이 좀 더 필요하게 된다. 잠시 아래의 예제를 보고 넘어가자. let lis..

FRONTEND/JavaScript 2021.05.09

고차함수(map, filter, reduce)

map 배열의 각 요소들이 특정함수에 의해서 다른요소로 mapping 되는 것. e.g. let arr = [1, 2, 3]; let result = arr.map(function(num){ return num*2; }); result = [2, 4, 6]이 되게 된다. 이는 function multiple(num){ return num*2 } let result = arr.map(multiple);한것과 같은 결과를 불러온다. filter 배열의 각 요소들을 boolean값을 가지는 함수를 이용해 말그대로 filter하는 것. ex) let arr = [1, 2, 3, 4, 5, 6] return arr.filter(el =>el%2 === 0)을 하게 된다면 2의 배수들만을가지는 배열을 리턴하게 되는..

FRONTEND/JavaScript 2021.05.07

spread 문법과 rest문법

spread는 묶여 있던것들을 'spread'한다고 생각하자. e.g. let arr1 = [1, 2, 3, 4, 5]; let arr2 = [9, ...arr1, 10]; let arr3 = 9, arr1, 10]; 을 하게 되면 arr2 = [9, 1, 2, 3, 4, 5, 10] , arr3 = [9, [1, 2, 3, 4, 5], 10]이 되게 된다. 간단해 보이지만, 주의해볼점은 객체에서의 사용에 있어서이다. let obj1 = { foo: 'bar', x: 42 }; let obj2 = { foo: 'baz', y: 13 }; let clonedObj = { ...obj1 }; let mergedObj = { ...obj1, ...obj2 }; 을 하게 된다면, mergedObj는 {foo: ..

FRONTEND/JavaScript 2021.04.25

클로저(Closure)

오늘은 Closure 라는 개념에 대해 알아보려고 한다. 일단 우리의 친구 mdn에 나온 클로저의 정의는 다음과 같다. "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 언제나와 같이 참 불친절하고 무슨 말을 하는지 모르겠다. 아래에서 좀 더 자세히 알아보도록 하자. 일반적인 함수를 생각해본다면, 일반적인 함수들은, 호출이 일어나기전이거나 호출이 일어난 이후, 해당 함수안에 들어 있는 컨텍스트에 접근하는것이 불가하다. 하지만 클로저, 클로저 함수는 외부함수의 컨텍스트(context)에 내부함수를 통해 접근이 가능하며, 이러한 상황일때 이 내부함수가 클로저함수가 된다. const add = x => y..

FRONTEND/JavaScript 2021.04.25

원시자료형(primitive type) vs 참조 자료형(reference type)

원시 자료형: 원시자료형은 변수와 값이 1:1로 대응이 되는 자료를 의미한다. 즉, number, string, boolean, undefined, null와 같은 원시자료형은 하나의 값만을 가질수 있고, 만약 재할당하게 되는 경우, 이전의 값은 사라지게 된다. 참조자료형: 원시자료형과 달리, 변수와 value가 pair가 되는 것이 아닌, 변수와 reference가 짝이 되는 자료형. 즉, 배열, 객체, 함수와 같은 참조자료형의 경우에는 하나의 값(value)이 아닌, 하나의 주소(reference)를 짝으로 가지게 되며, 해당 주소에는 여러 key와 value가 저장될 수 있다. 그러므로 참조자료형의 경우에는 보관함의 크기가 변경이 가능하다는 것이다.

FRONTEND/JavaScript 2021.04.25

for...in 과 for...of

~ 주로 객체에서 사용. 1) 문법 let object = {firstName: 'Mark', lastName: 'LEE'}; for (variable in object){ ... }; 여기에서 variable 은 객체의 key(즉, firstName, lastName). object 는 해당 객체자체를 의미하다. 예를 들어, for(let Name in object){ console.log(Name); console.log(object[Name]); console.log(object); } 을 할 경우, 첫번째 콘솔(Name)에서 firstName, lastName이 나오고, 두번째 콘솔(object[Name])에서 Mark, Lee의 값이 반복적으로 나오게 된다. 세번째 콘솔(object)에서는 {f..

FRONTEND/JavaScript 2021.04.19

객체의 기초

오늘은 객체의 기초에 대해서 배웠다. 객체와 배열의 차이 객체는 순서와 의미를 가진다는 것에 있어서 배열과 차이점이 있다. let obj = { firstName: 'Mark', lastName: 'LEE', address: 'Seoul' }; 객체의 기본구조 객체는 키와값 쌍(key-value pair)으로 이루어져 있다. 위 객체에서 key-value pair는 [firstName: 'Mark'] 이라고 생각할 수 있으며, 여기에서 firstName은 key, 'Mark'는 value 이다. 객체의 값을 불러오는 방법은 두가지가 있다. 1) dot notation obj.keyName 형식 여기에서 firstName은 string값이라고 생각하면 된다. 2) bracket notation obj['k..

FRONTEND/JavaScript 2021.04.18

배열의 기초(자바 스크립트)

오늘은 배열의 기초에 대해서 배웠다. let arr = [1, 2, 3, 4, 5, 6, 1, 2]; index : 배열의 순서. 0부터 시작하게 된다. 즉, arr의 0번째 인덱스의 값은 1이 되는 것이다. element: 배열의 값을 의미한다. 즉, arr의 2번째인덱스의 element는 3이 되는 것이다. length: 인덱스의 길이를 의미한다. 즉, arrd의 length는 8이 되게 된다. push: arr.push(추가할 element) 형식. 배열의 맨 마지막순서에 element를 추가하는 명령어. 만약에 push나 unshift 이외의 방식으로 배열에 값을 넣고 싶다면, arr[i] = value; 로 원하는 위치에 값을 넣을수 있다. pop: arr.pop() 형식. 배열의 맨마지막 엘리..

FRONTEND/JavaScript 2021.04.18