본문 바로가기

JavaScript11

[Development] 프론트엔드 면접 예상 질문 - JavaScript(1) 1. 클로져(closure)는 무엇이며, 어떻게/왜 사용하는지 알려주세요. 2. 스코프(scope)에 대해서 아는 대로 설명해주세요. 3. 프로토타입(prototype) 기반 상속은 어떻게 이루어지는지 설명해주세요. 4. this는 자바스크립트에서 어떻게 작동하는지 알려주세요. 5. null과 undefined 그리고 undeclared의 차이점은 무엇인가요? 1. 클로져(closure)는 무엇이며, 어떻게/왜 사용하는지 알려주세요. 클로져란 함수의 실행이 끝난 후에도 함수에 선언된 값을 접근할 수 있도록 만든 함수이다. 이것이 가능한 이유는 자바스크립트에서 함수는 호출되는 환경과 관계없이 자신이 정의된 환경을 기억하기 때문 정확히 말하면 함수는 자신의 내부 슬롯에 자신이 정의된 환경, 즉 상위 스코프에.. 2022. 8. 2.
[JS] 이벤트 위임 - 1억개의 자녀요소를 한 번에 통제하기 event delegation CSS에서 부모의 속성이 자녀에게 상속되는 것처럼, 부모의 요소에 특정 이벤트 핸들러를 할당했다면 그것이 자녀에도 그대로 적용되는 것을 이벤트 위임(event delegation)이라고 합니다. event delegation의 활용 API를 통해 사용자의 친구 정보를 불러 온다고 가정해봅시다. 등록된 친구가 5명이라면 데이터 배열안에 다섯 사람 분량의 정보가 담겨 있을 것이고, 100명이라면 100명의 정보가 담겨있을 것입니다. 받아온 정보를 가지고 이름 정보의 태그들을 태그안에 넣어주는 함수를 만들었습니다. 코드를 확인해볼까요? See the Pen Untitled by JO SEOYOUNG (@seoyoung-dev) on CodePen. 사용자에 따라 1명의 친구 등록.. 2022. 3. 6.
[TIL] 2022-01-18 (input tag properties, arrow function) ▷ input tag properties import React, { useState } from "react"; function Problem(props) { return {props.text} ; } const GradingForm = (event) => { const [score, setScore] = useState(0) const answer1 = "아닌 밤중에 홍두깨"; const answer2 = "세살 버릇이 여든까지 간다"; const handleSubmit = (event) => { event.preventDefault(); let totalscore = 0 if (event.target.answer_one.value === answer1) totalscore += 50 if (even.. 2022. 1. 18.
[JS] find, findIndex, indexOf, includes 비교 ▷ find( ) : 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환, 없다면 undefined를 반환 const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); // 12 ▷ findIndex( ) : 주어진 판별 함수를 만족하는 첫번째 요소의 인덱스을 반환, 없다면 -1을 반환 const array1 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber)); // 3 ▷ indexOf( ) : 문자열 혹은 배열에서 지정된 요소를 찾을 수 있는 첫번째.. 2021. 12. 27.
[JS] JSON(Javascript Object Notation) ▷ JSON - 데이터 전송을 목적으로 사용 - 문자열 상태로 존재 - parsing: 문자열을 네이티브 객체로 변환 stringfication: 객체를 문자열로 전환(네트워크를 통해 전달 목적) - JSON은 순수한 데이터 포멧으로 구성됨 - 값을 표현할 때 문자열, 숫자, 불 자료형만 사용할 수 있음(함수 등은 사용불가) - JSON에서 문자열을 표현할 때는 오직 큰따옴표("")만 사용가능 - key에도 반드시 따옴표를 붙어야 함 2021. 12. 26.
[TIL] 2021-11-14 (shift, pop, Object.values, Object.entries) ▷ shift() - 배열에서 첫번째 요소를 제거(배열의 길이가 바뀜) - 제거한 값을 반환 const array1 = [1, 2, 3]; const firstElement = array1.shift(); console.log(array1); // expected output: Array [2, 3] console.log(firstElement); // expected output: 1 ▷ pop() - shift와 유사, 마지막 요소를 제거한다는 점이 다름 const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; console.log(plants.pop()); // expected output: "tomato" console.lo.. 2021. 11. 14.
[JS] 함수 선언문과 함수 표현식 ▷ 함수 선언문(function declaration) - 함수의 정의부만 존재하고 별도의 할당 명령이 없는 것 - 반드시 함수명이 정의되어야 함 function a () { } a(); ▷ 함수 표현식(function expression) - 정의한 함수를 별도의 변수에 할당하는 것 - 함수명이 반드시 정의될 필요는 없음 (기명 함수 표현식 / 익명 함수 표현식) // 익명함수 표현식 let b = function () { } b(); // 기명함수 표현식 let c = function d () { } c(); d(); // 에러 발생 ▷ 호이스팅에 따른 차이 - 함수 선언문 : 함수 전체를 호이스팅함, 함수 선언문이 정의되기 전에도 호출할 수 있음 - 함수 표현식 : 함수 선언부만 호이스팅함, 실제 .. 2021. 11. 13.
[JS] \n과 <br>의 차이 ▷ HTML상에서 사용하는 줄바꿈 방법 ▷ \n JS에서 사용하는 줄바꿈 방법 ▷ 템플릿 리터럴(Template literals) escape 문자인 \n 대신에 백틱(`)을 사용하는 방법 백틱 안에 있는 내용이 그대로 표현됨 안녕\n하십니까? 감사합니다. - 웹페이지 출력 결과 - console 창 출력 결과 2021. 11. 3.
[development] front-end 개발자가 되기 위하여 알아야 할 Javascript 개념들 ▷ 함수, 객체 ▷ 비동기라는 개념 - 이벤트 드리븐 프로그래밍 ▷ callback, promise, async/await ▷ 호출스택, 이벤트루프, 실행 컨텍스트 ▷ scope ▷ this(call, apply, bind) ▷ closure ▷ 생성자 ▷ 프로토타입 ▷ 서브타입 & 슈퍼타입 📌 부차로 공부할 것 ▷ DOM ▷ 디자인 패턴 ▷ map, filter, reduce (필수) ▷ 이차원 배열 ▷ 함수형 프로그래밍 (선택) 2021. 9. 26.
[JS] object에서 method를 작성하는 두 가지 방법 method: 객체의 속성 중에 동작(함수)인 것 method를 작성하는 방법 두 가지 ▷ 첫 번째 방법 // eat() 메소드를 활용한 예시 const pet = { eat: function (food) {} } pet.eat() const superEventHandler = { handleEnter: function() { h2.innerText = "The mouse is here!"; h2.style.color = colors[0]; } } h2.addEventListener("mouseenter", superEventHandler.handleEnter); ▷ 두 번째 방법 const pet = { eat(food) } pet.eat() const superEventHandler = { handl.. 2021. 7. 31.

티스토리툴바