비실이의 개발 성장기

# ECMAScript(ES) 란? ECMA 인터내셔널(정보와 통신 시스템을 위한 국제적 표준화 기구) 의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어 ECMAScript 하면 javascript 를 가장 먼저 떠올리지만, 액션스크립트와 J스크립트등 다른 스크립트도 포함됩니다. 2020년 05월 기준으로 ECMA-262 는 총 10개의 Edition 표준이 있습니다. 우리가 흔히 알고있는 ECMAScript 2015 는 6번째 Edition 이며, 그로인해 ES6 라고 불리기도 합니다. (ECMAScript 2015 = ES6 = ES2015) # ECMAScript 표준이 나오기 전은 어떠했나? 브라우저는 크게 넷스케이프의 넷스케이프 네비게이터 2.0 진영과 MS 의 Inter..

ES6 class 에서 method bind 를 해야하는 이유에 대한 답변 링크: https://okky.kr/article/708996 OKKY | [react] 이벤트핸들러 this class SaveButton extends React.Component { handleSave(event) { console.log(this); } render() { return React.createElement( div , null, React.createEleme okky.kr

https://okky.kr/article/678234 OKKY | 자바스크립트 변수간 차이 관련 문의합니다. var value 100; let obj { value : 1, func1 : function(){ let that this; //obj의 참조값을 변수에 넣음. this.value 1; //메소드호출. o okky.kr

호이스팅 이란변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(Hoisting) 이라고 한다. 호이스팅 현상이 발생하는 이유javascript는 코드가 실행될 때 실행 컨텍스트가 생성된다. 이 때, 실행 컨텍스트 내부 변수 객체에서 현재 컨텍스트에 사용되는 변수 또는 함수를 생성한다. 변수가 생성되는 과정은 3단계로 나뉜다. 1. 변수 선언2. 변수 초기화3. 변수에 사용자가 지정한 값으로 초기화 여기서 3. 변수에 지정한 값 할당은 해당 실행 컨텍스트의 변수 객체 생성이 완료된 뒤에 실행된다. 즉, 변수의 선언 + 초기화 와 사용자가 지정한 값 초기화가 발생되는 환경이 나뉘어 발..

실행 컨텍스트란 (Execution Context, E.C) 실행 가능한 javascript 코드 블럭이 실행되는 환경 실행 컨텍스트가 생성되는 시점실행 가능한 코드(전역 코드, eval() 로 실행되는 코드, 함수 내부의 코드) 가 실행되면 각각의 독립적인 실행 컨텍스트가 생성된다. (ex. 함수가 실행되는 시점에 해당 함수의 실행 컨텍스트가 생성된다.) 생성 된 실행 컨텍스트는 순서대로 콜 스택(Call Stack) 에 push 된다. 스택이므로 가장 마지막에 추가 된 실행 컨텍스트가 현재 실행되고 있는 컨텍스트다. 실행 컨텍스트는 작업이 종료되면 콜 스택에서 pop 된다. 실행 컨텍스트 생성 코드 예123456789101112console.log('this is global context'); fu..

Javascript를 처음 접했을 당시, 타입이 엄격하지 않음과 더불어 함수가 변수처럼 어떠한 함수의 인자로 전달될 수 있고, 함수의 반환 결과로도 사용 가능하다는 것에 매력을 느꼈었다. Javascript에서 함수를 자유롭게(?) 사용가능한 이유는 함수를 일급 객체(First-class citizen) 로 취급하기 때문이었다. 어떠한 특징이 있으면 일급 객체라고 부르는 것일까 라는 생각이 들어 위키백과를 찾아봤다. 일급 객체란? '컴퓨터 프로그래밍 언어 디자인에서 일반적으로 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.' 일급 객체가 되기위한 조건 1. '변수나 데이터 구조안에 담을 수 있다.' testList 배열을 선언한 뒤, 0번째 인덱스에 익명함수를 추가했다. 2. '파라미터..

javascript가 최초 나왔을 당시, 웹 페이지의 규모는 지금과 같이 크지 않았다. 그러나 컴퓨터의 성능이 향상되고, 네트워크 속도가 빨라지며 웹 페이지 규모도 점차 커지게 되었다. 웹 페이지 규모가 커지다보니 javascript 코드 규모 또한 커지게 되었고, 중복되는 기능도 많았다. 그러다보니 중복되는 기능들을 하나의 모듈로 만들어 소스 코드의 규모를 줄이고, 재사용성을 좋게 하였다. 하지만, 이 당시 javascript 모듈 사용을 위한 방법에는 정해진 표준이 없었다. 표준 없이 뒤죽박죽 개발을 하면 개발자들간에 혼선이 생기게 되고, 언어 사용성이 떨어지게 된다. 이를 막기위해 CommonJS 와 AMD (Asynchronous Module Definition) 방식의 모듈 사용이 등장하게 된다..

javascript에는 유용한 함수들이 정말 많은 것 같다. 그 중에 보통 함수와는 달리 아무리 예제를 봐도 이해가 잘 가지 않던 함수가 있었다. 그 함수는 바로 reduce() reduce 는`줄이다` 라는 의미를 가지고 있다. javascript 에서도 reduce() 는 배열을 순회하며 인덱스 데이터를 줄여가며 어떠한 기능을 수행 할 수 있다. reduce() 함수 설명 시 가장 많이 사용하는 예제를 가져왔다. 1234567const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const initValue = 0; const totalResult = numberList.reduce((initialValue, currentValue, currentIndex, ar..