[JavaScript] Mdn보며 학습

공부 내용

함수

자바스크립트 함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 여러 번 호출될 수 있으며 매번 호출될 때마다 동일한 작업을 수행합니다. 함수는 코드의 재사용성을 높이고 유지보수를 쉽게 해 줍니다.

JavaScript에서 함수는 다른 함수로 전달되거나 반환받을 수 있고, 변수와 속성을 할당받을 수도 있기 때문에 일급 객체에 해당합니다. 또한 다른 객체와 마찬가지로 속성과 메서드를 가질 수 있습니다. 다른 객체와 구별되는 점은 함수를 호출할 수 있다는 점입니다.

또한 함수 내에서 선언된 변수는 함수 안에서만 사용가능한 지역변수가 된다.
함수명을 지을때는 이 함수가 어떠한 목적을 가지고 사용되는지 생각해 함수명을 지어주는 것이 좋다.

매개변수와 인자

function add (x, y) {
  var result = x + y;
  console.log(result);
  return result;
}

add(3, 5);  // 함수 실행

// 결과 : 8

add함수의 x,y를 매개변수라 부른다 함수를 호출할 떄 3,5를 우리는 인자라고한다.

호이스팅

함수 선언식은 호이스팅되고 함수 표현식은 호이스팅 되지 않는다.

클로저

클로저란 선언된 당시의 그 환경을 기억하는 함수
생명주기가 끝낫지만 외부 함수의 변수에 접근할 수 있는 내부함수

function outerFunc() {
  // 외부 함수의 변수
  var x = 10;

  // 내부 함수에서 외부 함수의 변수에 접근할 수 있습니다.
  var innerFunc = function () {
    console.log(x);
  };

  return innerFunc;
}

var inner = outerFunc();
inner(); // 10

outerFunc함수는 innerFunc를 반환하고 생명주기가 끝났습니다.
따라서 outerFunc가 호출된 후에도 내부 변수 x가 존재하지 않는다고 생각이 들겁니다.
이때 inner를 호출하면 innerFucn는 실행되고 innerFunc는 선언된 당시의 환경을 기억(저장)되어 있기 떄문에 10이 반환됩니다.

렉시컬 스코프

수를 어디에 선언하였는지에 따라 상위 스코프가 결정되는 것입니다. 이를 정적 스코프라고 부르기도 합니다.

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 1
bar(); // 1

호출이 아니라 선언이 되었을 때 변수를 참조하게된다.

클로저 = 함수 + 렉시컬 스코프라고 생각하면 쉽다
즉 함수는 선언 당시의 상위스코프의 주소를 기억(저장)하고 있습니다.
이걸 바탕으로 외부 함수의 변수에도 접근 가능함.

클로저 사용이유

1.상태유지 2. 정보 은닉 3.전역변수 사용억제

클로저를 사용하면 메모리 측면에서 손해 볼 수 있음
이유는 클로저가 뭔지 생각해보면 생명주기가 끝나고 선언되었던 환경의 상위스코프의 주소를 기억한다고 생각해보자 메모리에 남게되면 메모리가 낭비가된다. 이말이다

이벤트

이벤트란 시스템에서 일어나는 사건이라고 생각하면 된다. 클릭 및 페이지 이동

캡처링 버블링

버블링: 자식에서 부모로 이벤트 전파
캡처링: 자식에서 발생한 이벤트가 부모부터 시작해서 자식까지 도달

브라우저의 이벤트는 기본적으로 버블링 방식으로 진행된다.

이벤트 전파 흐름

1. li를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파된다 (캡처링 단계)
2. 이벤트가 타깃 요소에 도착해 리스너를 실행한다 (타깃 단계)
3. 그리고 다시 상위로 이벤트를 전파한다 (버블링 단계)

이벤트 전파가 왜 생기나?

div 안에 ul 그리고 li가 존재한다 근데 li에서 존재하면 li는 div안에 있는것이다.
즉 li를 클릭하면 div도 클릭이 되기 때문에 그래서 같이 발생하는 것이 어떻게보면 맞다.

이벤트 전파가 생긴 이유

이벤트 전파가 없다면 li 마다 모두 이벤트를 붙여준다고 생각해보자.. 어우
이벤트 전파가 있기 때문에 부모 요소에만 넣어두 쉽게 이벤트를 적용시킬 수 있다.

이벤트 전파 제어하기

1. e.stopPropagation(): e.stopPropagation()를 사용하면 이벤트 전파를 강제로 막을 수 있다. => 특정한 경우 이벤트 전파가 필요한데, 무조건 막아버려서 예상치 못한 문제를 일으킬 수도 있음.

이후 다른 개발자가 코드를 유지보수할 때 이벤트 전파가 막혀 있는 걸 모르고 혼란스러울 수 있음.

2. e.target : e.target을 사용하여 부모 요소에서 제어 하면 좀 더 유연하게 이벤트의 전파를 막을 수 있다.

이벤트 위임 작동 방식

이벤트 위임은 부모 요소에 이벤트 리스너를 등록하고 이벤트가 발생하면 이벤트의 타겟을 확인하여 자식 요소에서 이벤트를 처리하는 기법

• 이벤트를 부모 요소에 등록하면, 자식 요소에서 발생한 이벤트를 부모가 감지할 수 있음.
• 많은 요소에 개별적으로 이벤트 리스너를 등록하는 대신 부모 요소 하나에만 등록하면 됨.
• 이벤트 버블링 개념을 활용함.

이벤트 위임 장점

• 성능 최적화
  여러 개의 요소에 각각 이벤트 리스너를 등록하는 대신, 부모 요소 하나에만 등록하여 성능을 향상시킬 수 있음.

• 동적 요소 처리 가능
  새로운 요소가 추가되더라도 이벤트 리스너를 새로 등록할 필요 없음.

• 메모리 사용 감소
  개별 요소마다 리스너를 등록하면 메모리를 많이 차지할 수 있는데, 이벤트 위임을 사용하면 이를 줄일 수 있음.