JavaScript
-
객체를 복사할 때 유의할 점JavaScript 2021. 4. 28. 22:04
자바스크립트에서 객체와 원시값의 큰 차이점 중 하나는 값이 할당되고 복사되는 방식이다. 어떤 변수에 값을 값을 할당하거나 복사할 때 원시값은 값 자체를 할당/복사 하는 반면, 객체는 그 객체가 저장되있는 메모리 주소인 '참조 값(reference)'이 복사된다. let origin = { awesomeKey: 'awesomeValue'}; let copied = origin; 예시 코드에서 변수는 두 개지만(origin, copied) 각 변수는 동일한 객체에 대한 참조 값이 담긴다. 둘 다 같은 객체를 바라보고 있기 때문에 변수 copied를 가지고 객체의 값을 변경했을 때 origin도 함께 변경된다. copied.awesomeKey = 'beautifulValue' origin.awesomeKey ..
-
반복문 빠져나오기 - break, continue, labelJavaScript 2021. 4. 22. 21:37
자바스크립트에서 반복문을 사용할 때 for loop와 while을 사용하는데, 조건문이 falsy 한 경우 반복문을 빠져나오게 된다. for(let i = 0 ; i < 3 ; i++) { console.log(i) } let i = 0 while(i < 3){ console.log(i) i++ } 위 코드에서는 i가 3이 되면 조건문이 falsy 가 되어 반복문을 종료하게 된다. 그런데 이외에도 반복문을 빠져나올 수 있는 방법이 있는데, break, continue, label을 활용한 방법이 있다. let sum = 0; while (true) { let input = Number(prompt("숫자를 입력하세요.", '')) if (!input) break; sum += input; } alert(..
-
이벤트 버블링(bubbling)JavaScript 2021. 3. 4. 21:11
개발을 하면서 버튼 클릭 이벤트 처리를 하면서 의도하지 않은 결과를 만난적이 있다. 면접 때 질문 받았던 '이벤트 버블링' 이슈였다. 모르면 당황스럽지만, 알면 별 것 아닌 내용이다. 아래 그림과 같이 갈색 div박스, 초록색 div박스, 가장 안쪽에 child라는 버튼을 만들어 각각의 요소들마다 클릭되었을 때 콘솔 창에 event.currentTarget과 event.target을 출력하도록 이벤트를 등록해보자. ... Child ... 가장 안쪽에 있는 Child 버튼을 클릭하면 아래와 같이 Child가 속한 부모와 조상 엘리먼트에 등록된 이벤트까지 호출된다. 이벤트 버블링(bubbling) 위와 같이 동작하는 이유가 자바스크립트의 이벤트 버블링 때문이다. 브라우저에서 한 요소에 이벤트가 발생하면, ..
-
클로저(closure)JavaScript 2020. 12. 7. 15:29
클로저 : 외부 함수의 변수에 접근할 수 있는 내부 함수, 또는 이러한 작동 원리. function makeFunc() { var name = 'Mozilla'; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); myFunc(); 내부함수 displayName은 외부함수 makeFunc의 지역 변수인 name에 접근이 가능하다. 여기서 displayName이 바로 클로저.
-
호이스팅JavaScript 2020. 10. 28. 14:04
호이스팅 호이스팅은 변수를 선언하고 초기화했을 때 변수의 선언 부분이 해당 스코프의 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 특성이다. 자바스크립트는 모든 선언(var, function, let, const, class)을 호이스팅한다. 하지만 var와 달리 let과 const로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생한다. 변수의 생성과정을 먼저 보면 이해하기 쉽다. 선언 단계 : 실행 컨텍스트의 변수 객체에 등록(이 변수 객체는 스코프가 참조하는 대상이 됨) 초기화 단계 : 변수 객체에 등록된 변수를 위한 메모리 공간 확보, 해당 변수는 undefined로 초기화됨 할당 당계 : undefined로 초기화된 변수에 실제 값 할당 var 키워드로 변수를 선언하면 선언 단계와 초..
-
ScopeJavaScript 2020. 10. 25. 12:11
Scope - scope: 어떤 변수에 접근할 수 있는 유효범위, 전역(global)과 지역(local)으로 나뉜다 - 전역 스코프(global scope) : 코드 어디에서나 참조할 수 있다 - 지역 스코프(local scope / function-level scope) : 함수 코드 블록이 만든 스코프, 함수 자신과 하위 함수에서만 참조할 수 있다 - 전역변수 : 함수 바깥에 선언된 변수, window 객체에 선언된 변수 - 지역변수 : 함수 안에 선언된 변수 자바스크립트는 변수의 범위를, 호출한 함수의 지역 스코프부터 전역 스코프까지 점차 넓혀가며 찾는다, 이것을 스코프 체인(scope chain)이라 한다 const drink = 'coffee'; function outer() { console...
-
const, let, var의 차이JavaScript 2020. 10. 12. 16:03
ES6 이전에는 값을 담는 데 var 키워드 만을 이용했다. var 키워드는 함수 단위의 scope를 가진다. 즉, 해당 값을 사용할 수 있는 코드 영역이 함수 단위다. function hello() { var a = "hello"; if(true) { // {1} var a = "world"; console.log(a); // world {2} } console.log(a); // world {3} } hello(); {1} if 문 밖에서 var 값을 "hello"로 선언하고, {2} if 문 안에서 "world"로 설정했다. if 문 안에서 새로 선언했음에도 if 문 밖에서 a를 조회하면 {3} 변경된 값이 나타난다. 이런 문제점을 해결해 주는 것이 바로 let과 const 인 것! function..