MD 기록저장소

counting('aacbbb') 라고 입력하면 콘솔창에 { a : 2, b : 3, c : 1 } ▲ 이렇게 출력해주는 글자세기() 라는 함수를 만들고 싶습니다. 쉽게말하자면 입력한단어에 들어있는 알파벳의 갯수를 세어서 오브젝트에 기록해주고 출력까지 해주는 함수입니다. 글자세기라는 함수를 어떻게 만들면 될까요? function counting (string) { const result = {}; [...string].forEach( (item) => { if (result[item] > 0) { result[item] = result[item] + 1; } else { result[item] = 1; } }); console.log(result); } counting('aacbbb'); 1. 우선 결과..

Rest parameter는 arguments와 비슷한 개념이지만 조금 차이가 있습니다. function example (...rest) { console.log(rest); } example(1,2,3,4); // [1,2,3,4] ...rest 이 부분이 rest parameter를 의미합니다. 이름이 꼭 rest일 필요는 없습니다. 여기에 나오는 이름이 rest parameter가 담기는 배열의 이름이라고 생각하시면 됩니다. 위 코드의 결과를 보면 함수의 parameter들이 배열에 담긴 것을 볼 수 있습니다. 즉 rest parameter는 함수를 만들 때 rest parameter가 자리하는 곳에 오는 모든 parameter를 배열에 담아주는 문법이라고 할 수 있습니다. 그래서 이것을 확장하면 ..

1️⃣ Default Parameter function add (a,b) { console.log(a+b); } add(1,2); 함수를 만들고 그 함수를 실행하기 위해선 보통 함수의 parameter에 맞게 인자를 넣어주는 것이 일반적입니다. 그런데 Default Parameter를 사용하면 함수의 parameter의 개수에 맞지 않게 인자를 넣어주어도 함수를 실행할 수 있습니다. function add (a, b = 10){ console.log(a + b) } add(1); // 결과: 11 위 코드를 보면 함수를 만들 때 parameter에 b=10 을 넣어준 것을 알 수 있습니다. 이것의 뜻은 ‘b 값을 넣으면 그 넣은 값을 사용하고, 만약 b 값을 넣지 않으면 그 때는 10을 사용해라’ 라고 ..

Spread Operator를 한 마디로 정리하자면 ‘괄호를 없애주는 연산자’입니다. 괄호를 없앤다는 말이 무엇일까요? const array1 = ['hello', 'world']; console.log(array); // ['hello', 'world'] console.log(...array); // hello world 두 개의 결과값이 다른 것을 알 수 있습니다. array1라는 변수에 array를 담았을 때 콘솔에 출력해보면 진짜 array가 나옵니다. 그런데 ...array1은 대괄호가 없어지고 hello world가 나옵니다. 문자(string)에 붙여도 동일한 결과가 나옵니다. 사실 문자(string)도 배열과 동일합니다. 가령 ‘hello’라는 문자가 있을 때 hello[0]을 하면 h가 ..

Template Literals은 자바스크립트에서 문자열을 더 다루기 쉽게 만들기 위해서 탄생한 ES6 문법입니다. 사용방법은 다음과 같습니다. let name = `kim`; 작은 따옴표가 아니라 ` ` 이렇게 생긴 backtick이라는 기호를 사용합니다. 그렇다면 이렇게 사용하는 이유가 무엇일까요? 이유는 두 가지가 있습니다. ① 문자열 내에서 엔터키를 사용할 수 있습니다. 자바스크립트로 HTML을 작성할 때가 있습니다. 이를 '템플릿'이라고 하는데요, 템플릿을 작성하다보면 필연적으로 엔터키를 치고 싶은 욕망이 생깁니다(여러 줄을 작성할 때). ` ` 을 사용하면 엔터키를 아주 쉽게 사용할 수 있습니다. ② 문자열 내에서 변수를 사용하기가 쉽습니다. 이전에는 문자열과 변수를 같이 사용하려면 “ “ +..

1️⃣ 변수의 개념 변수에 대해서 알아보겠습니다. 프로그래밍 언어에서 변수의 본질적 의미는 자료를 저장하는 공간입니다. 변수는 선언, 할당, 범위, 호이스팅 총 4가지의 특징을 가지고 있습니다. var name = 'Kim'; 변수를 사용하는 방법은 위와 같습니다. 변수 키워드를 써주고 변수명을 써주고 값을 할당해주면 됩니다. var name; 이 부분을 ‘변수를 선언한다’ 라고 표현합니다. name = 'kim'; 이 부분을 ‘값을 할당한다’ 라고 표현합니다. 변수의 선언과 할당을 동시에 할 수도 있지만 따로 할 수도 있습니다. 원래는 변수를 선언할 때 사용하는 키워드가 var 한 개 밖에 없었지만 ES6에 들어오고부터 두 개가 더 추가되었고, 현재는 var은 잘 사용하지 않는 추세입니다. 추가된 키워..

Arrow Function은 기존의 함수를 좀 더 간편하게 사용하기 위한 ES6에서 새로 등장한 개념입니다 function orginalFunc () { } // 기존 함수 선언 방식 const ArrowFunc = () => { } // 화살표 함수 선언 방식 기존함수(); 화살표함수(); 화살표 함수는 변수에 함수를 담는 식으로 선언하는 것이 특징입니다. 함수를 실행하는 방식은 기존함수랑 동일합니다. 그렇다면 화살표함수를 왜 사용하는 것일까요? 이를 살펴보기 앞서 프로그래밍에서 함수를 사용하는 이유를 알아야합니다. 프로그래밍에서 함수를 사용하는 이유는 크게 두 가지입니다. ① 여러가지 기능을 하는 코드를 한 가지로 묶고 + 나중에 재사용할 때 ② 입출력 기능을 만들 때 화살표 함수의 강점이 발휘되는 ..

this 키워드의 의미는 4가지가 있습니다. 1. 다짜고짜 그냥 쓰거나 일반 함수 안에서 사용하면 window console.log(this) 다짜고짜 이렇게 쓰면 window를 의미합니다. 그렇다면 window란 무엇일까요? window란 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체입니다. 쉽게 다시 말하자면 자바스크립트에서 일반적으로 쓰는 자체 내장함수들을 보관하고 있는 ‘보관소’라고 생각하면 됩니다. window는 객체(object)의 형식을 가지고 있습니다. ⚠️참고 'use strict' function exFunc(){ console.log(this) } exFunc(); script 최상단에 ‘use strict’를 작성해주면 자바스크립트 strict mode가 됩니다. 변수 ..