클로저란?MDN에서는 클로저를 "함수와 함수가 선언된 어휘적 환경의 조합이다."라고 적혀있습니다. 조금 더 풀어서 얘기해볼까요? 저번 포스팅에 스코프에서 대해서 다뤘습니다. 자바스크립트는 정적(Lexical)스코프를 가지고 있었습니다. 선언될 때 자기가 접근할 수 있는 스코프가 정해졌었습니다. 그리고 블록의 내부에서는 블록의 외부로 접근할 수 있었지만 외부에서는 내부로 접근할 수 없었습니다. 이러한 환경들이 합쳐 클로저(closure)가 만들어집니다. function outer(){ const name="lemonCandy"; function inner(){ console.log(name); } return inner }; const func = outer(); outer라는 함수 내부에 name이라는 ..
스코프란 무엇일까요?스코프는 유효범위, 가시성(visibility) 이라고 불립니다. 단어만 봐서는 어려울 수도 있습니다. 예시를 들어서 좀 더 설명해보겠습니다. const x = 10; console.log(x); //10 { const y = 9; } console.log(y); //? 아주 간단한 코드입니다. x를 정의하고 x의 값을 물어보고, y를 정의하고 y의 값을 물어보았습니다. 하지만 코드를 실행해보면 x 값은 콘솔창에 나오는데 y 값을 물어보면 에러가 뜹니다. 분명히 y를 정의했는데 정의되지 않았다고 나오는 이유가 뭘까요? 바로 스코프 때문입니다. 블록({}) 사이에 y 값을 정의했기 때문에 블록 밖에서는 y가 정의되지 않았다고 뜬 것이죠. 유효범위나 가시성이라는 단어가 조금은 이해가시나요..
화살표 함수의 추가es6에서 추가된 화살표 함수를 통해서 기존 문법에서 조금 단축되고, 약간의 차이점들이 생겼습니다. 비교해가면서 하나씩 적어보도록 하겠습니다. const func = function(name){ console.log("hello " + name); }; func("lemon"); //hello lemon 기존의 함수표현식은 위와 같은 형태였습니다. 하지만 똑같은 내용을 화살표 함수로 적으면 어떻게 될까요? const func = (name) => { console.log("hello " + name); }; func("lemon"); //hello lemon function이라는 단어도 없애면서, 함수에 매개변수가 하나라면 괄호도 생략하셔도 됩니다. name => {}이라는 형태를 적어..
new 생성자에 대해 이해하기자바스크립트에서는 new라는 키워드를 통해 특정 함수로 객체를 만들어 낼 수 있습니다. 쉽게 설명하자면, 붕어빵 틀이 있으면 똑같은 형태의 붕어빵을 계속 찍어낼 수 있습니다. 속에 넣는 재료를 팥이나 생크림, 초콜렛을 넣는다고 하면 맛은 다양하지만 그래도 같은 틀에서 찍어냈으니 똑같은 형태를 가지고 있겠죠. new 생성자는 생성자 함수(붕어빵 틀)로 객체 인스턴스(생크림 맛 붕어빵, 초코 맛 붕어빳)를 만듭니다. 생성자 함수 만들기function Bread(flavor, price){ this.flavor = flavor; this.price = price; }; const chocoBread = new Bread("choco", "2200원"); const creamBrea..
함수를 왜 사용할까요?"컨트롤 c + 컨트롤 v"를 누르면 복사한 것을 붙여넣을 수 있습니다. 무언가 반복해서 사용할 때 자주 쓰는 단축키입니다. 코드를 작성할 때도 똑같습니다. 반복해서 사용해야할 것이 있다면 코드를 복사해서 그대로 붙여넣으면 됩니다. 하지만 계속 똑같은 코드를 복사해서 붙여넣는다면 엄청나게 용량이 커져버리겠죠? 반복되는 코드를 한번만 정의하고 필요한 순간에 실행만 할 수 있다면 엄청난 시간과 용량을 절약할 수 있습니다. 이게 함수가 필요한 이유입니다.함수 알아보기 그림처럼 생각하시면 됩니다. x가 들어가서 f(x)가 되서 나오는 것입니다. 위의 과정을 코드로 표현해 볼까요? function hello(x){ return "hello "+ x; }; hello("lemonCandy");..
일반적인 매개변수의 형태매개변수는 함수에 들어가는 값입니다. function f(a, b, c){ return a + b + c; }; f();//NaN f("I ", "LOVE ", "JS");//I LOVE JS 위의 소스코드에서는 a,b,c가 매개변수에 해당됩니다. 일반적으로 함수를 호출할 때 매개변수가 정의할 때의 수와 다르면 그 매개변수의 값은 undefined의 값이 됩니다. 그래서 인수(매개변수)를 아무것도 넣지 않은 f()는 NaN이 되는 것입니다.배열의 구조분해를 매개변수에 활용우선 배열의 구조분해에 대한 기초가 필요하시면 아래 링크를 통해 공부하고 오시면 이해하기가 더 쉽습니다. 자바스크립트 배열의 구조분해 function f([one, two, three]){ return one + ..
조건연산자란?자바스크립트에는 피연산자 3개(3항)를 필요로 하는 조건 연산자가 있습니다. 조건에 따라서 값이 할당됩니다. 삼항 연산자라고도 합니다. const foo = true; const bar = foo ? "true" : "false"; 물음표 앞에 있는 첫 번째 피연산자가 true(또는 참 같은 값)이면 :(콜론)의 왼쪽에 있는 값이 bar에 할당되고, false(또는 거짓 같은 값)이면 :(콜론)의 오른쪽에 있는 값이 할당됩니다.if...else문과 조건연산자if...else문을 통해서 변수의 값을 얻을 수 있습니다. const foo = true; let bar; if(foo){ bar = "true"; } else{ bar = "false"; }; 어떤가요? 위의 소스코드는 foo의 값에 ..
논리 연산자란?컴퓨터는 논리 연산이라는 과정을 통해 상황을 판단(true인지 false인지 판단)하고 명령을 수행합니다. 이러한 논리 연산에서 사용되는 것이 논리 연산자입니다. 자바스크립트가 지원하는 논리 연산자는 AND(&&), OR(||), NOT(!)이 있습니다. AND를 논리곱, OR을 논리합, NOT을 논리부정이라고 나타내기도 합니다. 논리연산 진위표어떤 때에 참이 되고, 어떤 때에 거짓이 되는 지는 표를 보면 쉽게 이해할 수 있습니다. x y x && y false false false false true false true false false true true true AND(&&)연산의 진위표 표를 보시면 x && y 일 때 true 값을 가지는 것은 하나밖에 없습니다. 즉 AND를 쓸 ..
for...of를 이용하자.배열과 객체 내에서 값을 꺼내야 할 순간은 많습니다. 하나만 꺼내면 될 때는 인덱스나 키 값을 넣어서 갖고오면 되지만 전체나 또는 어떤 조건으로 값을 추려내야 할 때는 반복문을 통해 값을 갖고옵니다. let arrs = ["arr1","arr2", "arr3", "arr4"]; for(let i=0; ilet arrs = ["김수한무","거북이", "두루미", "삼천갑자", "동방삭"]; for(let arr of arrs){ if(arr.length