JavaScript 강의 26

5-5 클로저

클로저 개념 : 함수와 렉시컬 환경과의 조합return function(){}이나const 함수명 = fuction(){ }return 함수명으로 함수를 리턴 시켜주기   출력값 x는 무엇인가? 1. inner 함수 내부에서 x가 선언 및 초기화가 있는지 찾아본다.2. inner함수(구현부분) 외부 함수가 존재하는지 보고 있으면그 함수 내부에 x가 선언 및 초기화 되는지 찾는다.3. 외부 함수에도 없다면 전역에x가 선언 및 초기화 되는지 찾는다. x : 10 동일한 방법으로 출력값 x는 무엇인가?  예상10실제1 x가 1인 이유는 innerFunc()함수 '호출'이 outerFunc() 함수내부에 있다고 함수 '정의' 부분이 outerFunc() 내부에 있는게 아니다!!!( innerFunc와 outer..

JavaScript 강의 2024.08.18

5-3 상속

상속 : 부모 Class로 부터 자식 Class에게 주요 기능과 정보를 내려준다.           자식 Class는 부모 메서드를 재정의 가능하고,           새로운 인스턴스와 메서드 만들 수 있다. 상속 방법 class가 존재할 때,class 자식 extends 부모{}로 부모로부터 상속 받은 자식 Class를 생성할 수 있다. 자식 메서드와 Overriding(중요) class 자식 extends 부모{    constructor(매개변수,....)    {        super(부모에게 보낼 매개변수)        this.인스턴스 = 매개변수    }     부모의 메서드 명과 동일한 메서드 명()    {        //메서드 안에서        //새롭게 재정의할 내용    }} ..

JavaScript 강의 2024.08.18

5-2 Class

JavaScript에서 ES6에 도입됐다. Class 생성 방법 class 클래스 이름{}으로 class를 생성 할 수 있다. Class의 내용물(인스턴스) 초기화 방법(constructor(생성자)) class 클래스 이름{    constructor(name, age, gender)    {        // this 연산        this.name = name        this.age = age        this.gender = gender         }}로 class의 내용물을 생성 및 초기화 할 수 있다. 클래스 객체 생성 방법 타입 변수명 = new(new 연산자) 클래스 이름 (인스턴스 값들) 로 클래스 객체를 생성할 수 있다. Class의 메서드 생성 class 클래스 이름{..

JavaScript 강의 2024.08.18

5-1 DOM

1. DOM(DOM API)1. JavaScript가 Document(HTML 파일)를 알 수 있는 Object 형태로 Modeling 한 것2. 브라우저에 기본적으로 내장 돼 있는 API 중 하나이다. API(Application Interface) :   소프트웨어 응용 프로그램에서 다른 소프트웨어 구성 요소 또는 서비스와 상호 작용을 하기 위한 인터페이스를 제공하는 프로그래밍 기술을 뜻한다 JavaScript가 생긴 이유 : 브라우저(Web 페이지)를 동적으로 만들기 위해서 만들어진 언어  따라서, DOM은 Web 브라우저 환경과 Node 환경에서 다른 결과로 출력 되는데 1. Web 브라우저 환경  document(HTML 파일)을 입력하면 HTML로 작성된 Code가 출력 되는걸 볼 수 있다. ..

JavaScript 강의 2024.08.18

4-1 콜백 함수의 기본 개념

콜백 함수 : 다른 코드의 인자로 넘겨주는 함수! call back = call(부르다) + back(되돌아오다) = 되돌아와서 호출해줘! 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다!위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행한다. 1. 호출 시점에 대한 제어권setInterval 함수  : 반복해서 매개변수로 받은 콜백 함수의 로직을 수행 + clearInterval 함수 : setInterval 함수의 로직에서 벗어나게 해준다. setInterval( handler 함수, 반복할 초 간격, 콜백 함수에 전달할 추가 인수들입니다)로사용 가능하다  위의 코드를 살펴 보면 setInterval 함수의 호출 시점 제..

JavaScript 강의 2024.08.14

3-3 this(정의, 활용법, 바인딩, call, applay, bind)

일반적인 C 계열, Java에서 this는class의 필드를 가르킬 때 사용된다. JavaScript에서 this는 다양한 의미에서사용된다. this 역할 : 주체 찾기 1. 전역 공간에서 this 역할 브라우저의 전역 환경에서 console.log(this)를 찍어보면Window라는 객체가 나오는 걸 볼 수 있다. 즉, 브라우저의 전역 환경에서 this는 Window 객체를 의미한다는 사실을 알 수 있다. 그럼 Node의 전역 환경에서 this란 무엇일까?Node의 전역 환경에 this는 gobal을 의미한다는 사실을 알 수 있다. 2. 메서드에서 this의 역할함수와 메서드 차이 ) 함수 : 독립적으로 실행 가능ex) function add() {~~~}add() 메서드 : 주체(객체)에 의해 실행 ..

JavaScript 강의 2024.08.14

3-2 실행컨텍스트(스코프, 변수, 객체, 호이스팅)

실행컨텍스트 : 실행할 코드에서 제공할 환경 정보들을 모아놓은 객체이다.역할 )1. 선언된 변수를 위로 끌어올린다 = 호이스팅2. 외부 환경 정보를 구성한다.3. this 값을 설정한다. 콜 스택스택은 LIFO(= FILO)으로 마지막에 들어간게 먼저 나온다 (= 먼저 들어간게 마지막에 나온다)큐는 FIFO(=LILO)으로 먼저 들어간게 먼저 나온다. (= 마지막에 들어간게 마지막에 나온다) 콜 스택은 실행할 코드에 제공할 환경 정보들을 모아 놓는 객체로 Stack 방식을 사용한다. 사용 이유 ) 코드의 실행 순서를 보장한다.  위와 같은 코드의 콜 스택을 알아보면 코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + oute..

JavaScript 강의 2024.08.14

3-1 데이터 타입 종류 및 메모

1. 데이터 타입 심화데이터 타입은 크게 2가지로 나뉘는데 기본형과 참조형으로 나눠진다. 기본형 : Number(숫자), String(문자열), Boolean(참, 거짓),null(개발자 지정 빈 값), undefined(빈 값), Symbol(ES6 추가된 자료형) 참조형 : refer 무언가를 참조하고 있는 변수로 Object(객체)이다.Array(배열), Function(기능), Date(연월일시분초),RegExp 정규 표현식), Map(모든 타입을 key로 가능), Set(중복 불허 배열)기본형과 참조형을 나누는 기준 1. 값의 저장 방식 및 복제 방식 : 메모리에 어떻게 저장되고, 복제되는가?2. 불변성 여부 : 값이 불변하는가, 아닌가?  1. 값의 저장 방식 및 복제 방식 1. 기본형 : 값..

JavaScript 강의 2024.08.13

2-4 (중요) Set(자료형) 소개 및 예시 코드 연습

Set 소개 Set : 고유한 값을 저장하는 자료구조 value(값)만 저장한다.(   배열과는 다르게   중복되지 않는 value(값)만   으로 구성된다.)Set 기능 -값 추가, 값 삭제, 모든 값 삭제, 존재 여부 확인 가능 Set 생성 및 초기화 방법 변수명 변수이름 = new Set() Set 관련 함수 및 변수 1. 변수명.size : Set의 개수를 출력하는 변수 add함수로 5개의 value를 넣어줬지만size로 4개가 출력 되는 이유는Set 자료형은 중복을 허용하지 않기 때문이다. 2. 변수명.has(찾고자 하는 value) : Set에 찾고자 하는 Value가 있는지 확인 has함수로 Set 자료형 안에찾고자 하는 value가 있는지확인 할 수 있다. 3. for-of-Set : Se..

JavaScript 강의 2024.08.13