01/26 국비학원 42회차수업 JavaScript (호이스팅, 함수, css)

JavaScript는 독립적인 언어가 아니라 스크립트 언어로써, 특정한 프로그램 안에서만 동작을 할 수 있는데, 크롬, 파이어폭스, 사파리, 익스플로러 등 이런 웹 브라우저가 없으면 사용할 수 없는 단점이 공존했다. 따라서 client개발을 위한 용도로만 국한되어 있었다.

Node/js는 터미널 프로그램(원도우 cmd, mac terminal 등)에서 node를 입력하여 브라우저 없이도 실행할 수 있게 됐다.

내가 지금 쓰는 nodemon이 이것이다. 크롬(Chrome)과 Node.js는 따라서 같은 엔진(Google의 V8 엔진)을 공유하지만, 다른 런타임(runtime) 환경, 즉 크롬(Chrome)과 Node.js라는 다른 실행 환경을 가지고 있다고 할 수 있다.

 

컴파일

고급언어를 저급 언어로 바꾸는것

 

자바의 경우

타입 변수이름 초기화

int i =10;

타입체크를 한다.

 

자바스크립트는 실행(런타임)이될때 타입이 체크된다.

 

 

❗️호이스팅이란?
호이스팅은 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다.
호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.
자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(*실행 컨텍스트를 위한 과정)을 거친다.
자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.
코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다.
(정확히는 var 키워드로 선언한 변수와 함수 선언문일 경우 오류 없이 동작한다. 이는 선언이 파일의 맨 위로 끌어올려진 것 처럼 보이게 한다.)
*실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한 실행 컨텍스트 과정(코드를 구분하는 과정)을 거친다.
이 호이스팅이라는 용어를 자바스크립트 실행 컨텍스트에 의한 위에 설명한 현상을 호이스팅이라고 부른다는 것으로 이해하면 되겠다. 그 현상이란 선언이 코드 실행 보다 먼저 메모리에 저장되는 과정으로 인한 현상을 말한다.
그래서 자바스크립트 실행 컨텍스트에 대한 이해하는 것이 호이스팅을 이해하는데 도움이 된다. (scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트 핵심원리이다. 코드를 보고 실행 컨텍스트를 이해할 수 있어야 코드 독해, 디버깅을 할수 있다.)

 

/함수 선언문에서도 호이스팅이 일어 난다.
//값이 달라질수있으니까 호이스팅 피한다.
//전역변수처럼 여기저기서 쓰면 계속 값이 바뀌니까.
//함수도 객체이다.
//메소드 오버라이딩 혹은 메소드 오버로딩에 대한 지원이 없다.
/*같은 이름의 함수를 중복 정의 불가능하다.
함수선언 2가지 방법
1. 선언문
2. 변수할당=함수 표현식

함수표현식에서는 호이스팅이 안된다.
함수도 파라미터로 넘길 수 있다.
*/

 

로컬에서만 써야하는 경우 있다.

지역변수처럼 써야하는데 var를 쓰면 전역변수처럼 되니까 쓸 수 없다.

 

함수에도 호이스팅이 일어난다.

 

자료형

Data타입

 

1.원시형

Primative데이터타입

호출하면 값이나온다. 

특정 값이 메모리에 저장

 

-문자형[Object String], slice(8,-1)

-논리형 (Boolean : true, false)

-undefined : 변수를 선언하고 그 값을 초기화하지 않으면 undefined 저장됨(에러의 원인이 된다.)

 

2.참조형

Reference타입

호출하면 주소값이 나온다.

값이 위치하고 있는 참조하는 주소값만 메모리에 저장된다.

관련되는 내장함수까지도 같이 참조가 된다.

 

-null(Object) : 명시적으로 특정한 변수의 값을 비워줄때

                       const myCar; //null

                       const myCar= new Car(); //자바스크립트도 된다. 객체지향 요즘 아닌것이 없다.

-Array (Object) : 연관된 값들을 그룹으로 묶어서 관리하는 자료형이다. ->[ ]

-객체->{ } : Object 데이터를 key라는 인덱싱을 통해 자료를 구조적으로 묶어놓은 형태

 

 

 

 

filter() 메서드는

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

 

callback

각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.

 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

 

구문

    arr.filter(callback(element[, index[, array]])[, thisArg])

Copy to Clipboard

매개변수

callback

각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.

다음 세 가지 매개변수를 받습니다.

element

처리할 현재 요소.

index Optional

처리할 현재 요소의 인덱스.

array Optional

filter를 호출한 배열.

thisArg Optional

callback을 실행할 때 this로 사용하는 값.

 

 

//arrow function(형식)에서는 실행문이 단일 행이면 ()를 생략하는것이 가능하다.

 

함수 -자주쓰는 실행코드들을 블록({,지변성격})단위로 묶어서 패키징 해 놓은 상태

:그런데 파라미터로 함수를 넘길 수 있다.(주의, 다른점)

-자주쓰는 코드들은 기능단위로 재사용하기 위함

-함수를 선언 :  function예약어를 이용 자주 쓸 코드를 묶음으로 처리하는것이다.

-함수의 호출 : 정의된 함수를 호출해야 기능이 실행된다.

 

함수 종류

1. 선언적 함수

-이름을 가지는 형태

-자바스크립트 파일을 읽을때 선언적 함수를 가장 먼저 읽어줌

-선언적 함수의 선언 위치는 호출 위치가 자유로움

 

2. 익명함수

-함수의 이름이 없는 형태

-콜백함수

-자체만으로 호출 불가

-변수에 익명 함수를 대입 또는 특정 이벤트에 객체에 대입 

3. 대입함수

-변수에 익명함수가 대입된 형태

 

4. 즉시 실행함수

-카카오 API-> 지도 서비스에서 많이 등장

*골때림

 

 

리턴값으로 뭘 반환하는지가 중요하다.

 

Array.prototype.slice()

slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다. 

깊은복사

 

background-image

CSS background-image 속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다.

z-index

CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.

포지션이 있어야 z-index가 된다.

 

의미를 담은 태그 : 시멘틱 태그

<header>는 소개 및 탐색에 도움을 주는 컨텐츠이다.

헤더는 시멘틱 태그중 하나이다.