Ji'story

Javascript에서 자주 사용하는 배열 함수인 forEach(), map(), reduce() 함수를 살펴본다. forEach() 다음 코드의 parse() 함수는 'banana=10&apple=20&orange=30'을 '&' 기준으로 분리한 다음, 다시 '='로 분리하여 객체에 담아 반환한다. function parse(qs) { // qs = 'banana=10&apple=20&orange=30' var chunks = qs.split('&'); var result = {}; for(var i = 0; i < chunks.length; i++) { // for문 활용 var parts = chunks[i].split('='); var key = parts[0]; var value = parts[..

호이스팅에 대해 알아보기 전에, 먼저 변수가 생성되는 과정을 살펴보자. 선언 - 초기화 - 할당 변수는 다음의 세 단계를 거쳐 생성된다. 선언 해당 변수를 스코프에 등록하는 과정이다. 키워드 var, let, const 중 하나를 통해 이루어진다. 초기화 해당 변수를 위한 공간을 메모리에 확보한다. 이때 변수의 값은 임의로 undefined로 할당된다. var 키워드를 사용한 경우 초기화 과정은 선언 과정과 함께 이루어지고, let 또는 const 키워드를 사용한 경우 초기화 과정은 선언 과정과 별개로 이루어진다. 할당 undefined로 초기화된 변수에 할당 연산자(=)를 사용하여 실제 값을 할당한다. 호이스팅(Hoisting)이란? 이제 이 이미지를 보자. 먼저 a의 경우, a는 선언된 적이 없으니 ..

라이브러리 의존성 import, export 키워드를 사용한다. import MyModule from './MyModule.js'; // MyModule.js 파일을 default로 참조. import { ModuleName } from './MyModule.js'; // 모듈 안의 특정 함수 혹은 변수 참조 import { ModuleName as RenamedModuleName } from './MyModule.js'; // 다른 이름으로 변경하여 참조 function Func() { MyModule(); } // 변수나 클래스의 이름을 다른 파일에서 따로 참조할 수 있도록 정의 export const CONST_VALUE = 0; export class MyClass {} export default..

객체 확장 표현식 객체의 변수를 선언할 때 key값을 생략하면 자동으로 key값이 변수명으로 지정된다. var x = 0; var y = 0; var obj = { x, y }; // var obj = { x:x, y:y }; 와 같음 var randomKeyString = 'other'; var combined = { ['one' + randomKeyString]: 'some value', }; 객체 안에 함수를 넣을 때 function 키워드를 생략할 수 있다. // 객체 안에 함수 넣기 var obj2 = { x, methodA() { console.log('method A'); }, methodB() { return 0; }, }; 화살표 함수를 이용할 수도 있다. // 객체 안에 함수 넣기: 화..

동기 백준 풀 때, 닉네임에 색깔 있는 유저들의 깔끔하고 예쁜 코드를 보면서 나도 저렇게 되고 싶다는 생각을 항상 했었다. https://www.acmicpc.net/blog/view/90 solved.ac 티어 v. 코드포스 레이팅 (~2020. 2. 3) solved.ac 티어 v. 코드포스 레이팅에 대한 통계를 작성해봤습니다. 표본 n = 624이고, R2 = 0.60으로 유의미한 상관관계가 발견되었습니다. 레이팅 최대치로 계산했을 때에는 레이팅 1500 이하 분들의 www.acmicpc.net 몇 년이 지난 자료긴 하지만, G2~G1 정도가 그린이라고 한다. 이번에 골드도 달았겠다, 나도 그린을 목표로 코드포스에 가입해봤다(물론 그린을 달기에는 공부가 정-말 많이 필요한 상태라는 걸 알고 있다....

화살표 함수(arrow function)는 ES6에 추가된 표현식을 사용하는 함수로, 화살표 기호 =>로 함수를 선언한다. 기존 자바스크립트 함수 정의 방법 우선, 다음은 2가지의 기존 자바스크립트 함수 정의 방법이다. function add(first, second) { return first + second; } var add = function(first, second) { return first + second; }; 첫 번째 방식은 함수 자체에 이름이 있는 반면에, 두 번째 방식은 함수에 이름이 없이 변수에 함수를 담았다. add를 그대로 입력하여 Enter를 눌러보면, 두번째 방식으로 정의된 함수 자체에는 이름이 없는 것을 확인할 수 있다. 이렇게 두 번째 방식으로 함수를 정의하면 이 함수는 ..

ES6의 클래스 사용 방법 class 키워드로 클래스를 정의한다. // ES6의 클래스 사용 방법 알아보기 // 크롬 브라우저 콘솔 창에서 실행해보기 class Shape { static create(x, y) { return new Shape(x, y); } name = 'Shape'; constructor (x, y) { this.move(x, y); } move(x, y) { this.x = x; this.y = y; } area() { return 0; } } var s = new Shape(0, 0); s.area(); // 0 생성자, 클래스 변수, 클래스 함수 정의에는 변수 선언을 위한 키워드(var, let, const, ...)를 사용하지 않는다. // 상속 구현 class Circle ..

ES6 이전에는 var 키워드만으로 값을 선언할 수 있었다. var는 재선언과 재할당이 가능한 선언 방식으로, 예상치 못한 버그를 초래할 위험이 있었다. 더보기 1. var로 선언된 변수는 function scope를 가진다(함수 코드 블록인 {}만 scope로 인정한다). 예를 들면, if 블록 내에서 선언된 var 변수는 if 블록 외부에서도 접근할 수 있게 된다! 이는 변수의 충돌을 가져올 수 있다. 2. 자바스크립트의 모든 선언에는 호이스팅이 발생한다. 그런데 var로 선언된 변수는 선언되는 동시에 undefined로 초기화까지 이루어지기 때문에, 변수가 선언되기 전부터 참조가 가능해진다. 호이스팅에 대해서는 이 글 참고: https://jm3789.tistory.com/22 이러한 문제를 해결하..

전개 연산자 ES6의 전개 연산자(spread operator)는 나열형 자료를 추출하거나 연결할 때 사용한다. 배열이나 객체, 변수명 앞에 마침표 세 개(...)를 입력해서 사용해서 안에 들어있는 요소들을 펼칠 수 있다. 배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만 사용해야 한다. var array1 = ['one', 'two']; var array2 = ['three', 'four']; const combined = [...array1, ...array2]; // 결과: combined = ['one', 'two', 'three', 'four']; const [ first, second, three = 'empty', ...others] = array1; // 결과: first = ..

2장에서는 리액트에 필요한 자바스크립트 ES6의 문법을 공부한다. 더보기 ES란 ECMAScript의 약자로, 자바스크립트의 표준 규격을 나타내는 용어다. ES5는 2009년, ES6는 2015년에 출시되었다. 템플릿 문자열 문자열과 문자열, 또는 문자열과 변수를 연결하고 싶을 때, 기존 자바스크립트에서는 병합 연산자(+)를 사용했다. 이는 코드가 복잡해보인다는 단점이 있었다. 이를 보완하기 위해 ES6에서 도입한 템플릿 문자열은 작은따옴표(' ') 대신 백틱(`)으로 문자열을 표현하고, 특수 기호 $를 사용하여 변수 또는 식을 포함할 수 있다. 다음 두 코드를 비교해보면 템플릿 문자열을 적용한 코드가 더 간결하다. var string1 = '안녕하세요'; var string2 = '반갑습니다'; var..