MD 기록저장소

1️⃣ Constructor의 개념 const student1 = {name: 'kim', age: 20} const student2 = {name: 'park', age: 22} object를 여러 개 만들고 싶을 때 이렇게 일일이 하드코딩 해주게 되면 굉장히 비효율적인 코딩이 됩니다. 이런 과정을 쉽게 만들어 줄 때 Constructor를 이용합니다. 다시 말해 Constructor는 object를 여러개 만들고 싶을 때 사용하는 문법입니다. function Student() { this.name = 'kim'; this.age = 20; } Constructor는 함수의 형식을 빌려서 만듭니다. 이 때 Constructor의 이름은 일반 함수와 다르다는 것을 표시하기 위해 관습적으로 대문자로 시작합..

자바스크립트의 자료형은 크게 두 가지로 분류를 할 수 있습니다. 1. Primitive Type 2. Reference Type 1번은 문자, 숫자 등의 자료를 의미합니다. 이 자료형은 변수에 자료가 곧바로 저장이 됩니다. const name = 'john'; const age = 20; john, 20 이라는 값이 왼쪽의 name, age 변수에 곧바로 저장이 됩니다. 그래서 이런 일이 가능합니다. let name1 = '김'; let name2 = name1; name1 = '박'; console.log(name1); // 박 console.log(name2); // 김 name1 이라는 변수에 값을 넣고 name2에는 그 변수를 복사해서 넣었습니다. 그리고 name1 변수의 값을 변경했습니다. 그리..

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가 됩니다. 변수 ..