javascript
1.[ES6] var,let,const Scope에 대해 알아보기
const (constant) 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.let 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다.var (variable)
2.[ES6] const,let 정하는 방법
MDN문서에서의 정의 ( const, let ) 결론부터 밝히면'const를 주로 사용하고 let을 필요시에만 사용한다'입니다. 왜 그렇게 해야 할 까요?const를 사용할 때의 이점이 있기 때문입니다.가장 큰 이유는 const가 재할당이 안돼코드의 가독성이 향상되기
3.[ES6] 템플릿리터럴 Template literals
템플릿 리터럴은 자바스크립트 표현식을 사용해서 문자열을 연결하고 새로운 문자열을 생성하는 간단한 문법입니다템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱( \` ) (grave accent) 을 이용합니다.변수나 코드를 표현할 때는 ${}의 중괄호로 감싸줍니다.
4.[ES6] 데이터컬렉션(1) - Array (배열) (변경자 ,수정메서드 ,조작 등)
Array는 높은 유연성을 가진 컬렉션입니다. 다른 컬렉션을 Array로 변경해 작업한 뒤, 원래의 데이터구조로 복구하기도 합니다.일련의 작업들(추가,제거,정렬,필터링,교체 등)을 하기에 다양한 메서드를 갖고 있어 조작하기도 쉽습니다.ES6의 새로운 문법중 상당수가 배
5.[ES6] 펼침연산자(전개연산자, Spread Syntax, Spread Operator)
const staff는 객체요소를 가진 배열입니다.콘솔에 먼저 출력해보겠습니다두 로그를 비교해보면펼침연산자를 사용한 ...staff 는 배열내의 요소들을 하나씩 나열해줍니다. (이 자체로 배열이 아닙니다.)원래대로라면 for문을 사용해 순회했어야 하지만 간단한 표현으로
6.[ES6] 데이터컬렉션(4) - Map으로 객체 대신하기
이번 포스팅에서는 Map에 대해 알아보겠습니다. Map은 객체를 대신해 데이터변경이 잦은 키-값 컬렉션에 유용하게 사용할 수 있습니다.Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할
7.[ES6] 데이터컬렉션(5) - Map객체,객체리터럴 값 복사하기
안녕하세요간단한 포스팅입니다.Map객체 복사하기secondMap에 one의 value를 변경했는데첫 번째에 생성한 맵 객체 firstMap의 one의 value가 1로 변경되었습니다.secondMap이 firstMap을 참조하기 때문인데,해결방법은 간단하게 펼침연산자를
8.[ES6] 데이터컬렉션(6) - Set
Set에 대해서 포스팅하겠습니다Set은 고유값을 관리할 때 좋은 컬렉션입니다.자료형에 관계없이 유일한 값을 저장합니다.new Set(\[iterable]);반복 가능한 객체가 전달된 경우, 그 요소는 모두 새로운 Set에 추가됩니다. 만약 매개변수를 명시하지 않거나 n
9.[ES6] 매개변수 (기본값, 객체, 해체할당, 나머지 매개변수 ...)
안녕하세요!이 번 포스팅에서는 매개변수에대해 공부해보겠습니다.알고있는 내용이더라도 코딩할 때 습관처럼 사용하지 않으면 의미가 반감되는 것 같습니다.매개변수에 기본값을 사용해 가독성 높히기매개변수로 객체 사용하기 & 해체할당나머지 매개변수 사용하기인사메세지를 리턴 하는
10.[ES6] 고차함수, 커링, 부분적용함수
안녕하세요!이 번에는 고차함수, 부분적용함수, 커링에 대해 공부해보겠습니다.고차함수 : 함수를 입력받아 함수를 반환하는 함수이 번 포스팅을 통해 자세히 알아두면 좋을 것 같습니다.분수를 소수로 표현하는 함수를 만들어보겠습니다분모인수로 입력하면 분자를 입력하는 함수를 리
11.[ES6] Javascript Execution Context(실행문맥, 실행컨텍스트)
실행문맥에 대해 포스팅해보겠습니다.실행문맥을 모르고도 코딩을 할 순 있지만, 실행문맥에 대해 알아야클로저나 호이스팅, this의 원리같은 것들을 이해하기가 쉬운 것 같습니다.실행문맥,실행컨텍스트,Execution Context 같습니다실행문맥은 자바스크립트가 실행되는
12.[ES6] 화살표 함수와 this, 실행문맥(Execution Context)
안녕하세요 !지난시간에 실행컨텍스트 (이하 실행문맥)에 대해서 정리해봤습니다.ES6이후에는 실행문맥의 LexicalEnvironment에 this바인딩도 함께 있다는 걸 봤었는데요그리고, 함수의 선언방법에 따라서도 this가 달라질 수도 있습니다.함수의 선언에는 표현식
13.[ES6] Class 사용하기(1) - 사용법과 prototype
안녕하세요.이번 포스팅에서는 자바스크립트의 Class에 대해서 살펴보겠습니다.기존의 자바스크립트에서는 prototype을 이용해 유사하게 상속을 구현했었습니다. ES6이후 Class가 나오면서 명료하고 간편하게 객체를 생성하고, 상속을 구현할 수 있습니다.내부적으로 c
14.[ES6] Class 사용하기(2) - get,set, 클래스에서 generator구현, bind(),화살표함수 , iterable 클래스
안녕하세요 이번 포스팅의 내용입니다.지난 게시물의 소스코드를 사용합니다. (Ctrl + Click)get함수로 getPriceText() 와 getExpirationMessage() 를 설정했고,set함수로 halfPrice() 를 설정했습니다.set함수에는 변수처럼
15.[ES6] Promise함수(1)
안녕하세요!이번포스팅에서는 자바스크립트 빌트인 객체 Promise에대해 알아보겠습니다.Promise동기식은 순서가 정해져있고 하나가 완료되면 다음순서가 진행되는 식입니다비동기는 준비가 완료되는 것 부터 실행하기때문에 동시에 실행될 수 있습니다.비동기의 가치는 처리중인
16.[ES6] 단축속성명, 계산된속성명( Dictionary, 딕셔너리), 비구조화할당 활용하기
안녕하세요!ES6이후에 추가된 기능들 중단축속성명 계산된속성명, 비구조화할당에 대해 정리해서 적극적으로 활용 할 수 있도록 정리해보겠습니다.단축속성명 (shorthand property names)계산된속성명 (computed property names)비구조화할당 (
17.[ES6] Promise함수(2)
안녕하세요!Promise함수에 대해 두 번째 포스팅해보겠습니다.좀 더 다양한 활용방법에 대해 살펴보려고 합니다 !p1의 경우, 함수 내부에서 비동기 작업 실행 후 성공,실패에 따라 resolve또는 reject함수를 호출하면 됩니다.p2는 Promise객체가 인수라면
18.[ES6] 데이터컬렉션(3) - Array 배열메서드 reduce()
이번엔 reduce()에 대해서 정리해보겠습니다. reduce()함수는 배열의 길이나 데이터형태 등을 모두 변경할 수 있습니다. 배열을 객체리터럴등 다른 형태의 데이터로 반환할 때도 유용합니다. 이 번에도 더미데이터를 한 번 사용해보겠습니다. mockaroo 링크
19.[ES6] 데이터컬렉션(2) - Array 배열메서드
안녕하세요! 오늘은 유용하게 사용할 수 있는 배열메서드들에 대해 알아보겠습니다. 배열메서드는 바닐라JS뿐 아니라 React등 많이 사용하는 라이브러리, 프레임워크들에서도 사용도가 높습니다. 먼저! 배열메서드에는 어떤 것들이 있는지 보겠습니다. >map() : 형태를