Javascript기초 정리

wltjd1688·2025년 3월 30일

풀사이클

목록 보기
41/74

화면을 유저에게 보여주기 위해서는 다음과 같은 전체적인 흐름을 따른다.

[데이터 가공] --데이터 처리--> [화면 표현] <--interaction--> [유저]

  • 데이터 가공: 변수, 자료형, 함수(ex. flow control, 빌트인 객체) 등으로 데이터를 처리한다. 실행을 위해서는 엔진, 언어가 갖고 있는 매커니즘에 대한 이해, Error처리 등을 알아야 한다.
  • 화면 표현: 브라우저에서 파일을 로드해 데이터를 비동기로 조회한다. 보여주는 과정은 Rendering이고, 인터렉션 되도록 셋팅하는 것은 Event를 사용한다.
  • 유저: 여러 기능을 결합해 사용자의 문제를 해결하는 서비스를 개발한다. 이를 위해서는 코드를 잘 관리하는 방법과 서비스 개발을 위한 계획을 잘 짜는 것이 좋다.

정리

  1. 유저의 Pain Point를 해결하기 위해 서비스를 만든다.
  2. 서비스를 만들기 위해 웹개발을 배운다.
  3. 웹을 개발하기 위해 javascript를 배운다.

실습환경 setting

IDE: vscode
에뮬레이터: iterm2
브라우저: 크롬

  1. IDE : 문서를 작성하고 실행할 수 있는 도구로 소스코드 작업, 로컬에서 작동, 디버깅을 가능하게 해줌, vscode를 사용할 것이다.

  2. terminal: macOS라면 자체 터미널 또는 iTerm2를 사용할 것

  3. 브라우저: 크롬, 사파리, 오페라, 엣지 등 각 브라우저의 JavaScript 엔진(V8, SpiderMonkey 등)이 조금씩 다르므로 크로스 브라우징 이슈에 주의

브라우저와 디버깅

브라우저에는 개발자 도구라는 기능이 있다.
소스코드를 직접 확인하고, 자바스크립트와 css등을 편집할 수도 있다.

- elements: 소스코드를 볼 수 있다.
- console: js코드를 실행해볼 수 있다.
- sources: 브라우저에 로드된 파일을 볼 수 있다.
- network: 네트워크 로그를 확인할 수 있다.
- performance: 레코딩을 통해서 웹에서 실행되는 과정을 기록하여 성능등을 확인할 수 있다.
- application: 브라우저의 저장 기능을 확인할 수 있다.
- 등등이 있다.

개발을 하다보면 이슈(개발 중에 일어나는 일, 버그)를 많이 만나게 된다.
이러한 이슈를 찾아내서 원인을 밝히고 수정하는 작업을 디버깅이라고 한다.
디버깅 방법으로는 코드에 log함수 심기, 개발자 도구 source탭 활용하기 등이 있다.

javascript 훑어보기

인터프리터 언어

컴파일 언어: 사람이 작성한 코드를 기계어로 변환한 후 실행
인터프리터 언어: 코드를 실행 시점에 해석하며 동시에 실행
최신 엔진(V8 등)은 JIT(Just-In-Time) 컴파일 기법을 사용하여 성능을 개선합니다.

javascript만의 특징

  • 변수 타입
    • 동적 타입 언어
      변수에 들어가는 값에 따라서, 런타임에 타입이 추론된다.
      let 변수 = 1;
typeof 변수;  // "int
변수 = "abc";
typeof 변수;  // "string"
  • 함수의 특징
    • 일급객체
      • 함수는 일급객체의 특징을 가진다.
      • 함수는 객체와 동일하게 사용할 수 있다.
      • 함수는 값과 동일하게 취급한다.
        • 변수 할당문
        • 객체 프로퍼티 값
        • 배열의 요소
        • 함수 호출의 인수
        • 함수 반환문
  • 상속의 형태
    • 프로토타입 기반의 상속
      • 언어가 갖고 있는 프로토타입 체이닝 구조를 통하여 상속 가능
        보통은 class를 사용함
  • 패어다임 지원
    • 함수형 프로그래밍
    • 명령형 프로르개밍
    • 객체지향 프로그래밍

javscript 탄생배경과 ECMAScript

Funcdamental

  • 기술은 시간이 지남에 따라 고도화됨
  • 소프트웨어, 개발 언어도 마찬가지
  • 특정 시점을 기준으로 개선: 버전으로 관리

자바스크립트의 발전

  • 자바스크립트도 탄생 이후로 성장 시점마다 버전이 존재
  • 개발자는 버전을 확인하면서 개발

왜 표준화 작업을 했을까?
원래는 웹 페이지의 보조적인 기능을 수행하는 말 그대로 "스크립트"의 기능을 위해 생겨남
근데 이걸 실행할려먼 브라우저들이 자기들 만의 기능들을 개발함
그래서 어디서는 실행되고, 어디서는 실행안되는 크로스 브라우징 이슈가 생겨남,
즉, 개발자들 갈려나가는 호환성 문제 때문에 표준화를 진행함
그래서 넷스케이프가 이거 표준화하자 하면서 만듬, 이게 ECMAScript1, ES1으로 생겨난거임
언어 버전을 고려하면서 개발하는데, 아직 완전히 통일된게 아님
이런건 해결해줄려고 Bable과 같이 버전에 따라 코드를 수정해주는 여러 튤들이 있음

표준화 - ECMAScript 2015+로 개발하기

표기법이 있음

ECMAScript{{연도}}- ECMAScript2015
ES{{연도}} - ES2015
ES{{판}} - ES11
ECMAScript2015 - ES2015 - ES6모두 같은 버전이다.
지금은 ECMAScript2022까지 나옴

대부분 사용하는게 ES6임

  • 목표: 아래의 대상으로 사용하는데에 용이하도록 토대를 제공
    • 대규모 어플리케이션
    • 라이브러리 생성
    • 다른 언어의 컴파일
  • 개선사항: 모듈, 클래스 선언, 블록레벨 스코프, iterator와 generator, 비동기 프로그래밍, promise, 구조분해 패턴, 등의 개선이 존재

브라우저의 버전마다, 지원하는 자바스크립트 스펙이 상이함
개발 기능의 지원, Caniuse버전을 확인하면 좋음

개발에는 사용하고 싶은데, 브라우저 지원이 안될경우?

  • polyfill과 babel사용
  • polyfill
    • 지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드
    • 폴리필은 브라우저가 다른 방식으로 동일한기능을 구현하는데 문제를 해결하도록 도와줌
  • babel
    • 이전 버전의 브라우저에서 ES6 이전 버전의 JavaScript로 변환하는데 사용되는 도구
    • 문법을 번역 및 변환
    • 폴리필 기능

변수

변수란?

데이터를 담아둔 메모리의 주소를 쉽게 식별하기 위하여 붙인 이름

데이터를 처리하기 위해, 기억해야한다.

  • 데이터를 처리하는 과정에서, 처리 흐름마다 값들을 기억해둘 필요가 있다.
  • 컴퓨터는 데이터를 기억하기 위해 메모리를 활용한다.

메모리의 주소값의의 별칭, 변수

  • 메모리 주소값을 대신할 식별자를 지정하고, 식별자를 통해서 데이터 접근
  • 식별자 == 변수

자바스크립트의 변수 syntax

const foo = 1;
  • 키워드: const(cf. let, var)
  • 변수명: foo
  • 할당 연산자: =
  • 값: 1

변수 생성 방법과 호이스팅

log의 위치, 변수 키워드가 다른 것 뿐인데, 왜 결과가 다를까?

3단계를 거쳐 생성되는 변수
1. 선언 단계 변수를 변수 객체에 등록한다.
2. 초기화 단계 변수를 메모리에 할당하고, undefined로 초기화 한다.
3. 할당 단계 undefied로 초기화된 변수에 실제로 값을 할당한다.

변수 생성 3단계는
키워드별로다르게 동작한다.

var 키워드

  • 코드 평가 단계: 선언과 동시에 초기화 진행
  • 코드 실행 단계: 값 할당 진행

호이스팅

  • 모든 선언문이 해당 Scope의 선두로 옮겨진 것 처럼 동작하는 특성
  • 함수 호이스팅, 변수 호이스팅...

단점

  • 키워드의 생성 가능
  • 중복 선언 가능
  • 변수 호이스팅
  • 전역 변수화
    전역 변수화되어, 무분별한 변수 접근
  • 스코프: 코드가실행되는 과정에서, 변수와 같은 식별자를 찾아야하는 코드가 있을 때, 자바스크립트가 갖고 있는 규칙
  • 전역 스코프, 지역 스코프
  • 의도치 않은 변수값 변경, 코드 예측이 어려워짐

const, let키워드

  • 코드 평가 단계: 선언 진행
  • 코드 실행 단계: 초기화, 값 할당 진행

코드 평가 시점에 선언만 진행되므로, 변수의 할당문이 실행되기 전에 참조가 불가능하다.

  • 블록 레벨 스코프
    코드 블록 내에서 접근 가능한 스코프
  • 변수에 한정적으로 접근이 가능하게된다.
    예측 가능한 범위 내에서 변수 변경이 일어남

cosnt 키워드

  • 수정이 불가능함
  • "상수 변수"를 선언할 때 사용
  • 무조건 값을 할당

let키워드

  • 재할당이 가능함
  • 값을 할당하지 않아도 생성

변수 실습

console.log(a);		// 1
try{  
  console.log(b);	// undefined
  console.log(c);	// undefined
} catch {};

var a = 1;
const b= 2;
let c;

console.log(b);		// 2
console.log(c);		// undefined

변수 네이밍 컨벤션

  • camelCase
  • snake_case
  • PascalCase
  • CONSTANT_CASE

자료형이란?

데이터의 종류 - 자료형

컴퓨텉는 데이터를 어떻게 처리할까?

  • 우리는 컴퓨터에게 데이터 종류를 지정해주고, 알려줘야한다.
    데이터 종류에 맞게 적합한 로직처리를 할 수 있게 해주어야 한다.
  • 여기서 말하는 데이터 종류를 데이터타입, 자료형이라 한다.

데이터 타입은 언어마다 다르다.

자바스크립트의 데이터 타입

  • 원시 타입
    String, Number, BigInt, Undefined, Null, Boolean, Symbol
    특징으로는 변경 불가능한 값이다. "값으로 전달된다.
    • 원시 래퍼 객체가 따로 존재한다. 원시 데이터를 사용할 경우, 해당 래퍼 객체들을 상속받아 사용할 수 있다.
  • 객체 타입
    원시 타입의 값을 제외한 자바스크립트에서의 모든 것은 객체이다.
    객체는 여러 형태로 분류할 수 있다.
    일반 객체와 함수, 날짜, 인덱스 컬렉션, 키컬렉션등등...
    객체는 참조 형식으로 전달되어 속성들을 변경할 수 있는 mutable한 값이다.
    그래서 보통 복사한 형태를 보내준다.

원시타입 - Number Type, BigInt Type

Nuber Type

  • 숫자에는 정수, 실수가 존재
    다른 언어에서는 각각의 타입들이 존재하는데, 자바스크립트에서는 모든 숫자를 실수로 처리한다.
    그래서 0.1 + 0.2 = 0.3이 성립하지 않는 문제가 있다.

배정밀도 64비트 부동소수점
아까 말한 0.1 + 0.2 = 0.3이 성립하지 않는 문제가 있다. 이는 실수를 연산할 때, 근사값으로 처리하기 때문이다.

숫자형에는 이 외에도 2가지가 존재한다.

  • infinity: 무한대를 나타내는 숫자
  • NaN: Not a Number의 줄임말, 숫자가 아님을 나타낸다.

BigInt Type

  • 임의의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값
  • BigInt를 Number의 최댓값을 넘는 정수도 안전하게 저장하고 연산할 수 있다.
  • 다른 타입과 혼합하여 연산할 수 없다.

원시타입 - String Type, Boolean Type

String Type

  • 텍트스데ㅐ이터를 나타낼 때 사용
  • UTF-16코드 단위의 시쿼스로 표현
    • 16bit정수값의 요소로 구성된 집합
    • 각 요소가 string의 한자리
    • 0 번째 index부터 시작
  • 원시값은 불한다. == 문자값은 불변한다.
    표기법으로는 따움표, 쌍따움표 백팃으로 감싸서 문자열임을 표현
    템플릿 리터럴 표기법(``)
  • 백팃의 표현은 ES6 이후부터 사용 가능
  • 문자열 처리 기능 제공
  • String interpolation: `My name is ${ 표현식}`

Boolean Type

  • 논리적 데이터 유형
  • 참 혹은 거짓의 값만 가질 수 잇다.

원시타입 - Undefined Type, Null Type, Symbol Type

Undefined Type

  • 변수를 선언한 후 값을 할당하지 않은 변수에 할당되는 값
  • 변수 초기화 단계에서 Undefined는 개발자가 의도해서 넣는 값이 아님
    Null Type
  • 값이 없다는 것을 의도적으로 표현할 때 null 사용
  • null 타입체크는 일치 연산자(===) 사용하기
    • null의 type은 'object'라고 나오는데, 이는 자바스크립트 스펙 내의 버그
      Symbol Type
  • ES6에서 추가된 타입
  • 중복되지 않는 유니크한 값이다.
  • 객체의 key로 사용될 수 있다.
  • 클래스나 객체형식의 내부에서만 접근할 수 있도록 전용 객체 속성의 키로 사용
  • Symbol함수를 호출하여 생성함

Reference Type

  • 객체타입, Object type이라고 한다.
  • 객체 타입: 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
    • 객체: 데이터(속성), 데이터에 관련한 동작을(method) 포함하는 개념적 존재
  • 원시 타입의 값을 제외한 자바스크립트의 모든 것은 객체이다.
    mutable
  • 변경 가능ㅎ나 값: 객체의 속성을 변경, 추가, 삭제 가능
    • 원시갑은 immutable한 값
  • 힙 메모리에 저장: 동적으로 변화 가능하므로, 메모리 공간 확보 및 저장
  • pass-by-reference: 참조 타입이므로, 참조값으로 처리

여러 형태의 객체 타입

  • 일반 객체와 함수
  • 날짜
  • 인덱스 컬렉션
  • 키 컬렉션
  • ...

동적 타입 언어

  • 자바스크립트는 동적 타입 언어: 의도적으로 타입을 변환할 수 있지만, 의도와 상관없이 변경되기도 함

명시적 타입 변환
원시 래퍼 객체를 활용하여 개발자가 의도적으로 타입을 변경할 수 있다.

  • 값.toStirng(): 문자열 타입으로 변환
  • Number(값): 숫자 탕비으로 변환
  • Boolean(값): 블리언 타입으로 변환

암묵적 타입 변환
개발자가 의도하지 않았지만, 타입이 변경될 때

  • 값 + "": 문자열 타입으로 변환
  • 값 * 1: 숫자 타입으로 변환
  • !!값: 블리언 타입으로 변환

값이 전달될 때, 참조되어있는 변수 값 타입이 개발자의 의도와 다르게 암묵적 타입변환으로 변경될 가능성이 있다.
그래서 타입추론이 어려워져, 불필요한 디버깅 시간 발생한다.
이를 해결하기 위해서 typeof나 일치연산자를 사용하여 타입 가드 구현하거나, 타입스크립트 이용할 수 있다.

연산자

단항 연산자, 산술 연산자

연산자란?
하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만든다.

단항 연산자
하나의 피연산자만을 사용하는 연산자

  • void: 표현식을 평가할 때 값을 반환하지 않도록 지정한다.
  • typeof: 평 전의 피연산자 타입을 나타내느 문자열을 반환한다.
  • delete: 객체의 속성을 삭제한다.

산술 연산자
두 개의 숫자 값(리터럴 또는 변수)을 피연산자로 받아서 하나의 숫자 값을 반환한다.

  • 단항 산술 연산자
    1개의 피 연션자를 산술 연산하여 숫자값을 반환한다.
    • ++: 숫자 1을 증가시키고, 증가시킨 값을 암묵적으로 할당한다.
    • --: 숫자 1을 감소시키고, 증가시킨 값을 암묵적으로 할당한다.
    • +: 양수의 표현, 아무런 효과가 없다.
    • -: 양수를 음수로, 음수를 양수로 반전시킨 값을 반환한다.
  • 이항 산술 연산자
    2개의 피 연산자를 산술 연산하여 숫자값으 반환한다.
    • + 덧셈
    • - 뺄셈
    • * 곱셈
    • / 나눗셈
    • % 나머지

관계 연산자, 비교 연산자

관계 연산자
피 연산자를 비교하고, 결과가 참인지에 따라 boolean 값을 반환한다.

  • in: 객체 내에 속성이 존재할 경우 trur를 반환
  • instanceof: 특정 객체 타입에 속하면 true를 반환, 가드 형태로 사용됨

비교 연산자
피연산자를 비교하고, 결과가 참인지에 따라 boolean값을 반환한다. 피연산자에는 숫자, 문자열, 논리형, 객체타입

  • == 동등 연산자: 서로 값으면 true
  • === 일치 연산자: 사로 같고, 타입도 같으면 true
  • != 부등 연산자: 서로 다르면 true
  • !== 불일치 연산자: 서로 다르고, 타입도 다르면 true
  • > 큼 연산자: 왼쪽이 오른쪽보다 크면 true
  • >= 크거나 같음 연산자: 왼쪽이 오른쪽 보다 크거나 같으면 true
  • 반대로 존재

논리 연산자, 기타 연산자들

논리 연산자
두 개의 피연산자 중 하나를 반환
반한되 값이 무조건 boolean값이 아니다.
단축평가 논리: 첫번째 식을 평가한 결과에 따라서, 두번째 식 평가를 실행

  • A && B AND 연산자
    null검사에 활용
    • A가 false로 평가되면 A를 반환한다.
    • A가 true로 평가되면 B를 반환한다.
  • A || B OR 연산자
    캐싱 값에 대해서도 사용
    • A가 false로 평가되면 B를 반환한다.
    • A가 true로 평가되면 A를 반환한다.

만약 null, undefined, 빈 문자열이 들어오면 false로 평가된다.

기타 연산자들

  • 쉼표 연산자
    두 연산자를 모두 평가한 후, 오른쪽 피연산자의 값을 반환
  • 문자열 연산자
    두 문자열 값을 서로 연결하여 새로운 문자열을 반환
  • 옵셔널 연산자
    객체의 속성을 참조시, 유효하지 않는 경우, 에러를 발생시키지 않고 undefined를 반환
  • 할당 연산자
    오른쪽 피연산자가 왼쪽 피연산자에 값을 할당한다.
    • +=: 더하기 할당
    • -=: 빼기 할당
    • *=: 곱하기 할당
    • /=: 나누기 할당
    • %=: 나머지 할당
    • **=: 거듭제곱 할당
    • &&=: 논리 AND 할당
    • ||=: 논리 OR 할당
  • 삼항 연산자
    조건 연산자에 따라 두 값중 하나를 반환한다.
    조건문 ? 참일 경우 반환: 거짓일 경우 반환

함수

재사용 처리기, 함수

동일한 처리를 해야 하는 경우에 함수를 사용함
예를 들어 n번의 횟수만큼 3을 더해야하는 로직을 생성할때, 중복 코드가 발생하고, 가독성도 떨어짐
이러한 문제를 해결해 주는게 함수임

함수란?
소프투에어에서 특정 동작을 수행하는 코드 일부분을 의미
외부 코드가 "호출"할 수 있는 하위 프로그램

  • 함수 외부에서 addAge를 호출하는 모숩
  • 자바스크립트에서는 괄호를 사용하여 호출 함수명()
  • 대부분의 언어에서 지원해줌

함수의 형태

  • input: 로직 처리를 위해 주입받는데이터
  • output: 로직 처리 후 반환되는 결과 데이터
  • 본문: 명령문의 시퀀스로 구성

JavaScript의 함수
자바스크립트에서 함수는 객체처럼 속성과 메서드를 가질 수 있음
객체와의 차이점은 함수는 외부에서 "호출"이 가능하다는 점임, 객체는 못함
또, 자바스크립트 함수는 일급객체의 특징을 모두 가지고 있음

일급 객체
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.

  • 일급 객체는 함수의 실제 매개변수가 될 수 있다.

    function foo(input) {
  return input +1;
}

function bar() {
  return 1;
}

foo(bar); // foo(1) -> 1 + 1 -> 2

  • 일급 객체는 함수의 반환값이 될 수 있다.

    function foo(input) {
  return input +1;
}

function bar() {
  return 1;
}

function baz() {
  return bar;
}

foo(baz); // foo(bar) -> foo(1) -> 1 + 1 -> 2

  • 일급 객체는 할당명령문의 대상이 될 수 있다. (변수 등에 할당 가능)

  • 일급 객체는 동일 비교의 대상이 될 수 있다. (값으로 표현 가능)

    const foo = function foo(input) {
  return input +1;
}

foo(1); // input + 1 -> 2

JavaScript 함수의 특징

함수의 형태

function addAge(age) {
  if (typeof age !== 'number') return age
  return age + 5
  • 함수 이름: addAge
  • 매개변수: age
  • 함수 몸체: 안에 구성된 로직

매개변수 parameter

  • 기본값 매개변수

    • 매개변수 값이 없거나, undefined가 전달될 경우 대체되는 초기값

    • 매개변수에 할당연사자와 함계 초기값을 할당

      function foo(arg = 1) {
return arg;
}

foo(); // arg = 1 -> 1

  • 나머지 매개변수

    • 가변항 함수

    • spread 연산자

      function foo(arg, ...rest){
console.log(rest);
return arg;

foo('a','b','c');
// ['b','c']
// 'a'

  • arguments 객체: 함수에 전달되는 인자들을 참조할 수 있는 객체

    • 자바스크립트의 함수: Function 객체 상속
    • Function 객체의 기본 속성: arguments
    • 형태: 배열이 아니고 유사배열 형태
      • 배열 내장 method 사용 불가
let foo;
function bar(arg, ...rest){
  console.log(arguments)
  return arg
}

bar(1,2,3)
// Arguemtns(3) [1, 2, 3, callee: (...), Symbol(Symbol.iterlater...
foo.forEach(item => console.log(item))
// Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')...

매개변수(parameter)와 인자(arguments)의 차이

  • 매개변수: 함수를 정의할 때 사용하는 변수

  • 인자: 함수가 호출될 때 넘기는 값

    function 함수( 매개변수, ... 나머지_매개변수) {
  console.log(나머지_매개변수);
  reutnr 매개변수;
}

함수();
// []
// undefind
함수(1);
// []
// 1
함수('a','b','c');
// ['b','c']
// "a"

함수의 생성과 사용 패턴

함수 생성 방법

  • 함수 선언문

    function foo(arg){
  return arg;
}

const bar = foo(1);
console.log(bar) // 1
    • 함수 표현식
      • 익명 함수
      • 기명 함수
    const foo = function(arg){
  return arg;
}

const bar = function bar(arg){
  return arg;
}

const temp = foo(1);
console.log(temp);
// 1
console.log(baz(1));
// ReferenceError: baz is not defined
		```

  • Function 생성자 함수: 자바스크립트 내장 객체 중 하나

    • 함수 생성방법의 기본 원리
      함수 표현식, 함수 선언문: 축약법
    • 생성자 함수
      내장 객체 활용: 인스턴스 생성 new 내장객체() new Function(arg1, arg2, ..., 'return 1')

  • 화살표 함수
    ES6부터 사용 가능한 함수 선언문
    function키워드 사용하지 않고, 화살표 사용

    const foo = (arg) =>{
  return arg();
}

foo(() =>{
  return 1;
})

함수 사용 패턴

  • IIFE(즉시 실행 함수)
    함수 정의와 동시에 실행
    코드 평가 -> 코드 실행 -> 최초 1회 실행

    • 초기화 처리에 주로 사용

    작성방법

    • 즉시 실행할 함수를 괄호로 감싸기
    • 괄호로 감싸진 함수를 실행
      (function (){
    return 1;
})();

  • 재귀함수
    Recursive function 자기자신을 호출하는 하뭇
    계속 자기을 참조하여 호출하므로 무한히 호출될 수 있음

    • 탈출 조건을 초기에 정의해야함

    직관성이 떨어질 수 있어, 한정적 사용 권장

    function foo(arg){
  if (arg === 3) return arg;

  console.log(arg);
  foo(arg + 1);
}

foo(1);
// 1
// 2

  • 중첩함수
    inner funtion 내부함수
    내부함수 내의 변수 참조 -> 부모를 포함한 외부 범위 참조 가능
    부모함수 내의 변수 참조 -> 자식 범위 참조 불가능
    스코프 체인과 관련있음

  • 콜백함수
    Callaback function
    함수 매개변수가 될 수 있다.

    • 인자로 B 함수를 받은 A함수
    • A함수가 호출되는 시점에 B함수도 호출

    특정 이벤트가 발생했을 때, 시스템에 의해 호출되는 함수

    const foo = (arg) => {
  return arg();
}

foo(()=>{
  return 1;
})
profile
일단 해!!!!
이전 포스트

백엔드 실습(13)

다음 포스트

JavaScript기초 정리-2

0개의 댓글