바닥코딩

Template 리터럴은 문자열 처리를 위한 템플릿을 제공합니다. Template 리터럴은 역따옴표(` `) 안에 문자열과 표현식을 작성할 수 있습니다 예를 들어 `안녕하세요${표현식}` 과 같이 되어 있다면 해당 코드는 자바스크립트 내에서 => 안녕하세요 (문자로 인식) + ${표현식}은 표현식의 결과를 문자열로 출력이 됩니다. 따라서 표현식에 따라 출력되는 결과가 다르며 문자열과 표현식의 결과를 묶어 하나의 문자열로 표현하는 방식이 바로 Template 리터럴 입니다. Template 리터럴 기본 예제 console.log("1:", `1234ABC가나다라`); // expression 조합이 없기 때문에 template literal 이라고 볼 수는 없음 console.log("2:", `라인1 \..

spread 연산자 이터러블 오브젝트의 엘리먼트를 하나씩 분리하여 전개할 수 있습니다. spread 연산자로 인해 분리된 엘리먼트들은 어떤 변수에 할당한다거나, 호출하는 함수의 파라미터 값으로 사용하는 여러가지 응용이 가능합니다. Spread 연산자 문법 spread 연산자는 기본적으 '...' 점 3개를 연속으로 붙인 기호를 사용합니다. 점 3개에 이어서 이터르블 오브젝트를 작성하면 spread 연산자를 통해 엘리먼트를 전개할 수 있습니다. let arrOne = [11,12]; let arrTwo = [21,22]; let spreadObj1 = [...arrOne, ...arrTwo, 31,32]; console.log(spreadObj1); console.log(spreadObj1.length);..

콜백(callback)함수는 간단히 말하자면 다른 함수가 실행을 끝낸 뒤 실행하는 함수를 의미합니다. 조금더 자세히 말하자면 함수가 다른 함수의 인자가 되어 타 함수 내에서 수행되어지는 것을 말합니다. 함수를 인자로 던진다는 것은 한 함수 내에서 다른 함수를 사용한다를 의미하는데, 그렇다면 외부함수를 정의하고 호출해 쓰는 것과 어떤 차이가 있지? 라는 의문이 들 수 있습니다. 이런 의문을 해소하기 위해선 먼저 동기 / 비동기 방식에 대한 이해가 있어야 합니다. 동기식 동기식은 우리가 기본적으로 익숙한 방식입니다. 동기식은 프로그래밍을 했을 떄 위에서 아래로 절차적으로 수행합니다 함수를 호출한다면 호출한 함수 블럭을 모두 수행한뒤 그 다음 해야할 일을 진행하는 방식이죠, let a = 3; let b = ..

Map은 key-value 의 쌍으로 이루어져 있습니다. Map은 해당 키와 value를 개발 단계에서 유용하게 사용하기 좋기 떄문에 유용한 개발을 위해서 Map 오브젝트의 구조와 Map에서 제공하는 함수를 보겠습니다. Map 오브젝트 구조 let newMap = new Map([ /*Map 작성*/ ["key1","value1"], ["key2","value2"], ["key3","value3"] ]); Map은 new Map() 를 통해 인스턴스를 생성합니다 여기서 하나 주의할점은 key:value 형식으로 작성하는 것이 아니라 ["key" ,"value"] 형태로 작성을 한다는 것입니다. 선언 하는 방법에 어려운점은 없을 것입니다. Map을 활용했을 때 좋은 경우에 대해서 알아보면 아래의 경우 정도..

ES6(ECMAScript6) 문법 부터 JS 에서는 새로운 함수 생성 방식이 등장했습니다 =>(화살표) 표시를 사용하여 함수를 생성하는 방식인데 화살표의 이름을 따 이를 arrow function(한글로 화살표 함수) 이라고 부릅니다. 화살표 함수는 기존의 function(param) 형식의 코드 형태를 축약했습니다. param => [함수 코드] 와 같은 방식으로 구현하게 되는데 이 함수는 파라미터의 경우에 따라 여러 방식의 함수를 작성 할 수 있으며, 무명/익명 함수라는 성질을 가지고 있기 때문에 화살표 함수를 즉시 적용하는 것이 아니라 호출을 하려면 Function 오브젝트를 할당할 변수를 만들고 이를 변수에 대입해 주어야 합니다 화살표 함수는 function 키워드 보다 간단하게 함수를 만들고 ..

JS를 처음으로 접하신 분들에게는 생소한 개념일 수도 있지만 c++, c#., java, 파이썬 등등 여러 언어를 학교나 학원 또는 개인공부를 통해 해보신 분들에게는 class(클래스) 것이 굉장히 익숙한 단어일겁니다. 객체지향언어의 핵심적인 역할을 하는 class는 개발에서 굉장히 중요한 요소입니다. 물론, JS도 class 라는 개념이 존재합니다. ES6(ECMAScript6) 문법이 처음으로 등장하게 되면서 JS에서도 class라는 개념을 활용할 수 는 있습니다. 그렇지만 JS에서의 class의 중요도는 위에 언급한 언어들과는 사뭇 차이를 보입니다 객체지향언어 ,프로토타입 기반 언어 객체지향언어는 말그대로 class - 객체 방식의 패러다임을 지향하는 언어 입니다. 실제로 java와 같은 언어는 전..

클로저? 자바스크립트에는 자바스크립트 만의 고유의 개념은 아니지만 '클로저' 라는 것이 존재합니다. 정의를 살펴보면 “A closure is the combination of a function and the lexical environment within which that function was declared.” - 클로저는 함수와 그 함수가 선언됐을 떄의 렉시컬 환경과의 조합이다 - 이런 의마라고 한다는데 ... 사실 이해가 되지 않았습니다. 그래서 클로저를 사용한 여러 예제를 찾아보고 실제 사용되는 의미를 파악해본 결과 일반적으로 클로저는 어떤 함수가 자신의 스코프가 아닌 외부에서 선언된 변수에 접근 하는것을 의미한다라는 정의를 내릴 수 있었습니다. 사실 이말도 이해가 안될거라고 생각합니다.....

scope 자바스크립트 뿐만 아니라 c/c++ ,java를 포함한 어떤 언어라도 공부해 보신분들이라면 누구나 알고 있을 내용이 있습니다 바로 전역변수/ 지역변수에 대한 내용인데요 java로 지역변수와 전역변수에 대한 내용을 잠깐 다뤄 보자면 class Ex_variables{ int global_v; void addmethod(int a, int b) { global_v = a + b; } } 큰 설명없이도 global_v 라는 전역변수 개념과 addmethod 라는 매소드 안에서 쓰이는 a, b에 대한 지역 변수에 대한 개념에 대해서는 다들 알고 있을 것입니다. 또한 static 이라는 키워드를 통해 해당 소스 내에서 어디든 사용할 수 있는 전역변수 설정 또한 가능합니다.. 그런데 자바스크립트에서는 스..