Language36 Object.assign() Object.assign() Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다. MDN문서에 따르면 Object.assign() 메서드의 정의는 다음과 같다. 한마디로 '객체들을 병합하는 메서드' 이며, 아래와 같은 구조로 사용한다. Object.assign(target, ...sources) ✔️ 첫 번째 parameter : target ✔️ 두 번째~ parameter : source 객체들 여기서 소스(source)가 되는 객체들은 타겟(target) 객체에 합쳐지며, 최종적으로 이 타겟 객체가 return 된다. 그림으로 표현하면 아래처럼 되는데, 여기서 obj1, obj2, obj3이 소스가 되는.. 2020. 12. 22. Javascript 내장 고차 함수 (filter, map, reduce) 자바스크립트에는 기본적으로 내장되어 있는 고차 함수들이 있다. 배열 메서드 중 일부도 여기에 해당한다. 대표적인 세 가지 고차함수 filter, map, reduce에 대해 알아보려고 한다. filter filter() 메서드는 주어진 함수의 특정 조건를 만족하는 모든 요소를 모아, 새로운 배열로 반환하는 메서드이다. 다시말해 배열(array)에서 지정한 조건을 통과한 일부 요소(element)만 원할 때 사용하는 것이다. 예를 들어, 배열에서 짝수만 걸러내거나, 길이가 10 이하인 문자열만 걸러내거나, 특정 문자열이 포함 되는 요소들만 걸러내고 싶을 때 사용 가능하다. 여기서 특정 조건은 filter 메서드의 인자로 전달되어야 하며, 함수 형태여야 한다. 기본적으로 아래와 같은 형태로 사용한다. 여기서.. 2020. 12. 22. 함수 선언식(Function Declarations), 함수 표현식(Function Expressions)의 차이점 function function은 독립적으로 분리된 로직으로서 프로그램 수준에서 미리 정의되어 있거나 사용자정의에 의해 만들어진 실행단위를 일컫는 말이다. 자바스크립트의 function은 Fisrt-Class-Object 로서 변수나 데이터 구조 안에 담을 수 있으며 인자로 전달할 수 있고 반환 값으로도 사용할 수 있으며 , 런타임에 생성할 수 도 있다. 쉽게 말해 function은 '코드의 묶음, 기능의 단위'이며, 일반 객체(object)처럼 취급될 수 있다. 이런 함수를 사용하는 데 있어 매우매우매우 중요한 개념이 있다. 바로 함수선언(Function Declarations) 과 함수표현(Function Expressions)을 구분하는 것이다. 함수 선언식 (Function Declarations.. 2020. 12. 17. expect, matcher expect expect는 작성한 함수가 주어진 입력값에 대해서 리턴하는 값이 기대하는 값과 같은지를 비교하는 데 사용한다. 즉, 테스트하는 값과 기대값을 비교하기 위해 expect 함수를 사용한다. expect의 기본적인 사용법은 다음과 같다. expect(테스트하는값).기대조건 테스트하는 값으로는 1) 표현식 또는 2) 함수실행이 들어갈 수 있다. true, 1+1 등 값을 반환하는 식 또는 코드가 표현식에 해당하고, isEven(3), sum(1,2) 등 특정 함수가 실행되는 것이 함수실행이다. expect(isEven(3)).to.be.true // isEven(3)의 결과가 참인지 판단 expect(1 + 2).to.equal(3) // 1+2가 3과 같은지 판단(equal) matcher ex.. 2020. 12. 16. Closure(클로저), Currying(커링) Closure (클로저) 클로저는 한 마디로 '외부함수의 변수에 접근 가능한 내부함수'이다. MDN 문서에서는 클로저를 이렇게 표현하고 있다. A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created. 클로저는 함수와 함수가 선언된 '어휘적 환경의 조합'이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 여기서 '함수가 선언된 어휘적(lexi.. 2020. 12. 16. Scope, let/const/var의 차이점 Scope Scope는 한글로 하면 '범위'이다. Javascript에서도 Scope는 이와 비슷한 의미를 가지고 있는데, 구체적으로는 '변수의 유효범위'를 의미한다. 즉, 변수와 변수의 값이 어디부터 어디까지 유효한지 판단하는 범위가 바로 Scope이다. 이해를 위해 바로 예제를 살펴보자. 아래 코드에서 노란색으로 표시된 부분이 Local Scope(지역 범위)이다. 여기서는 함수가 이 범위를 나누는 기준이 된다. 그리고 바깥쪽의 빨간색으로 표시된 부분이 Global Scope(전역 범위)이다. 전역 범위는 모든 것을 포함하는 최상단 범위이다. 이런 범위를 나누고나서 주의할 점은 안쪽에서 바깥쪽으로는 접근이 가능하지만, 바깥쪽에서는 안쪽으로 접근이 불가능하다는 것이다. 즉 여기서는 Local Scope.. 2020. 12. 16. Primitive Type(원시 자료형), Reference Type(참조 자료형) Primitive Type (원시 타입) vs Reference Type (주소 타입) Javascript 자료형은 크게 두 가지 타입으로 나누어 진다. 바로 Primitive Type(원시 타입), Reference(주소 타입)이다. 두 타입 모두 선언, 할당 과정을 거친다는 점에서는 동일하다. 그럼 무엇이 다른것일까? 바로 '할당' 과정에서 차이가 있다. 할당 시, Primitive Type은 값(value) 자체를 할당하지만, Reference Type은 값이 저장되어 있는 주소(address)를 할당한다. Primitive Type Primitive Type은 새로운 변수에 할당할 때, 사본을 하나 더 갖게 되는 것이라고 생각하면 이해하기 쉽다. 아래 코드에서 처음에 a에 3을 할당하고, 그 a를.. 2020. 12. 16. parseFloat, Number의 차이점 parseFloat과 Number 모두 문자열을 'Number' 타입으로 반환해준다는 점에서 같은 기능을한다고 볼 수 있다. 그런데 왜 굳이 두 가지 방법이 존재하는 건지, 두 함수의 차이점이 대체 뭔지 궁금증이 생겼다. 찾아본 결과 StackOverFlow에서 좋은 답변을 찾을 수 있었다. parseFloat이나 parseInt은 문자열(string)을 말 그대로 파싱한다. 반면, Number은 주어진 값을 강제로 숫자로 변환시킨다. 예시를 통해서 이해하는 것이 빠를 것 같다 ㅎㅎ 이렇게 숫자 그대로를 표현하는 문자열을 입력하면, 두 함수는 똑같이 작동한다. parseFloat('3'); // => 3 Number('3'); // => 3 parseFloat('1.501'); // => 1.501 Nu.. 2020. 12. 10. 정규표현식(Regular Expression), match 정규표현식 (Regular Expression) 정규 표현식은 복잡한 문자열을 처리할 때 사용하는 기법이라고 할 수 있다. Javascript 뿐만 아니라 문자열을 처리하는 모든 곳에서 사용되며, 정규식을 사용하면 훨씬 간편하고 직관적인 코드를 작성할 수 있다. 메타 문자(meta characters) 정규 표현식에서 사용하는 메타 문자(meta characters)에는 대표적으로 이런 것들이 있다. 메타문자를 사용함으로써 정규표현식은 특별한 의미를 갖게 된다. /^$+?{}[]\|() [ ]는 문자 클래스(character class)이다. 즉, [ ] 사이의 문자들과의 매치를 의미한다. 예를 들어, [hot]라는 정규 표현식은 h,o,t중 한 개의 문자라도 들어가 있다면 매치되는 것으로 인정한다는 뜻.. 2020. 12. 10. 문자열 관련 메서드 .length length 메서드는 주어진 문자열의 길이를 반환해준다. 'Code'.length; //4 .indexOf indexOf 메서드는 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없을 경우, -1을 반환한다. 'Blue Whale'.indexOf('Blue'); // returns 0 'Blue Whale'.indexOf('Blute'); // returns -1 'Blue Whale'.indexOf('Whale', 0); // returns 5 'Blue Whale'.indexOf('Whale', 5); // returns 5 'Blue Whale'.indexOf('Whale', 7); // returns -1 'Blue Whale'.indexOf(''); // retur.. 2020. 12. 10. 기억해야 할 6가지 falsy 값 Javascript 엔진은 boolean 타입이 아닌 값을 Truthy(참으로 평가되는 값), 또는 Falsy(거짓으로 평가되는 값)으로 구분한다. 조건문이나 반복문같은 제어문의 조건식에서는 boolean값으로 평가되는 문맥을 사용해야 하는데, 이 때 Truthy값은 true로, Falsy값은 false로 암묵적 형 변환이 일어난다. Falsy값 이외의 모든 값들은 모두 true로 평가되는 Truthy값이기 때문에, 훨씬 경우의 수가 적은 Falsy만 알아두도록 하자! Falsy boolean값에서 false로 평가되는 값을 말한다. (쉽게 말해 if문의 조건으로 넣었을 때 false로 변환되는 값) 이렇게 6가지의 falsy값은 꼭 기억해두자! if(false) if(null) if(undefined).. 2020. 12. 10. 변수(Variable)와 데이터 동작 원리 변수(Variable) 변수는 한 마디로 '데이터 보관함'이다! 수학에서 변수는 '변할 수 있는 수'를 의미한다. 이를 컴퓨터 개념으로 좀 더 확장해서 생각해보면, 변수는 '변경할 수 있는 데이터'로 이해할 수 있다. 여기서 데이터는 string, object, array... 등 어떤 타입도 가능하다. 변수는 가장 기초적인 개념이라 그냥 넘어가기 쉽지만, Javascript에 대해 좀 더 깊게 알아갈수록 변수의 동작 원리와 관련된 복잡한 개념들을 마주하게 되는 것 같아서 차근차근 다시 정리해 보았다. 변수는 기본적으로 다음과 같이 선언한다. 이 예시를 말로 설명하면 ' 변할 수 있는 데이터를 만들고자 하는데(let), 이 데이터의 주소 이름는 apple로 할거다' 라는 뜻이다. 이것이 변수를 '선언'하.. 2020. 12. 9. 이전 1 2 3 다음 반응형
