Web Frontend/JavaScript6 [ JavaScript ] 클로저: 캡슐화 예시를 통해 클로저 개념 쉽게 이해해보기 클로저 개념은 자바스크립트 공부에서 어려움을 느끼게 했던 주제 중 하나인데, 개인적으로 이해하기 쉬웠던 방법을 정리 해 보고자 한다. 클로저 개념을 쉽게 이해하기 위해서는 먼저, 스코프 개념을 이해하는 것이 중요하며 다음으로, 클로저가 되기 위한 조건을 파악하는 것이 필요하다. 클로저란? 클로저란 자신이 생성될 때의 스코프에서 알 수 있었던 변수 중 언젠가 자신이 실행될 때 사용할 변수들만 기억하여 유지시키는 함수이다. - 출처: 함수형 자바스크립트 프로그래밍 - 위에서 말했듯이, 클로저를 이해하기 위해서는 클로저가 되기 위한 조건을 파악하면 명확하게 이해가 가능해 진다. 다음은 클로저가 되기 위한 조건이다. 1. 내부 함수가 외부 함수 내에서 정의되어야 한다. (함수 내부에 정의된 함수) 2. 내부 함.. 2023. 5. 24. [ JavaScript ] 호이스팅: 변수와 함수의 동작 방식 및 결과의 차이점 비교 호이스팅이란? 변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다. 호이스팅은 변수와 함수의 동작 방식에 따라 출력 결과가 다르게 나타나는데, 이러한 차이점에 흥미를 느껴 각각의 경우를 자세히 정리하고자 한다. 먼저, 호이스팅에 따른 출력값이 각각 다르게 나타나는 것을 이해하기 위해서는 선언 과 참조, 초기화 개념을 알아야 한다. 선언이란, 변수나 함수를 정의하고 해당 이름을 사용할 수 있도록 식별자(변수 이름)을 지정하는 것이다. 변수선언은 var, let, const를 사용할 수 있고, 함수선언은 function을 사용할 수 있다. 참조란, 선언된 변수나 함수에 접근하여 값을 읽거나 변경하거나 함수를 호출하는 것을 의미한다. 변수나 함.. 2023. 5. 22. [ JavaScript ] var와 let의 유효범위 및 스코프 동작의 차이 "var를 사용하지말고 let•cosnt를 사용해라."는 말은 코딩공부를 시작하면서 많이 들었던 조언 중 하나였다. 그러나 var를 사용하지 말아야 하는 이유에 대해 깊게 이해하지 않고 그냥 사용하지 않았던거 같다. 그런데 '자바스크립트의 코딩의기술' 책을 읽으면서 var와 let의 유효범위로 인한 차이점에 대한 설명을 보게 되었다. 읽다보니 스코프와 관련해서 아주 중요한 개념이 담겨있다는 생각이 들었다. 그 예시를 이해하기 쉽게 정리 해 두고자 한다. 위 두 로직을 보면 for문 내 변수 i를 var로 할당했는지 let으로 할당했는지에 따라 결과값이 다르는게 나오는것을 확인 할 수 있다. 왜 이런 결과가 나오는 것일까? 결론적으로 var와 let의 유효범위가 다르기 때문이다. var는 함수스코프를 따르.. 2023. 5. 21. [ JavaScript ] 자바스크립트의 핵심: 스코프와 렉시컬 스코프 완벽 이해하기 클로저나 호이스팅 개념을 공부하려고하니 스코프 개념이 빠지지 않고 나왔다. 렉시컬스코프, 스코프, 전역스코프, 지역스코프, 함수스코프, 블록스코프 ... 여러 스코프 개념이 복합적으로 등장했고 그에 대한 이해가 기본이 된 상태여야 다른 개념을 이해할 수 있겠다는 생각이들어 이참에 확실하게 스코프 개념을 정리 해 두고자 글을 쓴다. 개념이해를 확실히 하기전에 포함관계를 한눈에 확인 가능하면 이해가 쉬워지겠다는 생각이 들어 위 이미지와 같이 도식화 해 두었다. 1. 스코프와 렉시컬스코프 이해하기 스코프란 무엇일까? 스코프는 참조대상 식별자, 쉽게 말해서 변수명•함수명을 찾아내기 위한 규칙이다. 일반적으로 스코프는 중첩된 구조를 형성하는데 동작방식을 설명하자면, 내부 스코프는 외부 스코프에 접근할 수 있지만,.. 2023. 5. 19. [ JavaScript ] 프로그래머스 치킨쿠폰 문제 설명 프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 chicken이 매개변수로 주어질 때 받을 수 있는 최대 서비스 치킨의 수를 return하도록 solution 함수를 완성해주세요. 문제 해설 몫과 나머지를 이용한 문제이다. 1. coupon / 10 => 몫1 + 나머지1 2. (몫1 + 나머지1) / 10 => 몫2 + 나머지2 3. if ( 몫 + 나머지 2023. 1. 4. [ JavaScript ] Nullish 병합 연산자 '??' Tabs 컴포넌트를 만들며 적용한 nullish 병합 연산자 개념정리 Nullish 병합 연산자 '??'란? 사용한 이유 사용 방법 Nullish 병합 연산자 '??' 란? 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 즉, nullish라는 이름과 같이 null과 같은 그에 상응하는 값을 말한다. 사용한 이유 Tabs컴포넌트를 만들며 Index의 초기값이 0으로 고정되어 있는 것이 아니라 제어 할 수 있게끔 기능을 구현 하고 싶었고, 그 경우 초기값을 무조건 0으로 설정하게 아니라 외부에서 주입되는 index값이 없을 경우에만 0이 되도록 구현을 해야 했다. 사용 방법 Tabs.context.tsx const .. 2022. 12. 3. 이전 1 다음
