Javascript 기본

젤로·2022년 8월 11일
0

Javascript

목록 보기
1/1

Closure

  • 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.
    외부 함수에 접근할 수 있는 내부 함수를 뜻하며, 스코프에 따라 내부함수에서 외부함수의 지역변수를 참조 가능하다.

클로져_정리링크

This

  • 함수 실행에서의 this는 전역 객체(window)를 가리킨다.
  • 메소드 실행에서의 this는 해당 메소드를 가지고 있는 객체를 가리킨다.
  • 생성자 실행에서의 this는 생성자 new를 통해 만든 객체를 가리킨다.
  • call(), apply(), bind()를 이용하여 this를 명시적 지정이 가능하다.

This_정리링크

"==", "==="

"=="은 값만 비교하여 true/false를 반환, "==="는 조금 더 엄격하여 값과 데이터 타입까지 모두 같은지를 비교해서 true/false를 반환.

ES6

  • ECMA라는 국제기구에서 만든 표준문서 ECMAScript의 6번째 개정판 표준 스펙.
    특징으로는 화살표 함수, 멀티라인, 다양한 변수선언(let, var, const), spread operator(...array) 등이 있다.

ES6_정리링크

let, var, const

  • var는 재선언 및 재할당이 에러없이 가능함.
  • let은 변수 재선언이 안되고 재할당이 가능하다.
  • const는 변수 재선언 뿐만아니라 재할당도 불가능하다.

node.js

  • 노드는 브라우저가 아닌 다른 환경에서 javascript를 사용할 수 있게 해주는 크롬의 v8엔진 기반의 javascript 런타임이다. 노드를 통하여 자바스크립트 애플리케이션을 실행 할 수 있으며 서버를 실행하는데 제일 많이 사용한다.

Node.js_정리링크

hoisting

  • 코드를 실행하기 전에 선언되어있는 변수와 함수를 해당 스코프 범위안의 최상단으로 끌어올려지는거 같은 현상을 의미.
    함수는 전체 함수에 대한 참조와 함께 저장되고, var는 undefined, let과 const는 초기화 되지 않은 상태로 메모리에 저장 된다.
    호이스팅의 사이드 이펙트를 생각해서 변수 선언을 스코프 최상단에 선언 하는게 필요하고, 선언과 함께 초기화를 해야만한다.

hoisting_정리링크

call apply bind

  • call은 일반 함수들처럼 매개변수를 받아 this를 지정할 수 있다.
  • apply는 배열 형태의 매개변수를 배열 형태 그대로 전달 가능하다.
  • bind는 함수를 바인딩 받아서 다른 함수에 전달 하는 형태.

call,apply,bind_정리링크

shallow copy, deep copy

  • shallow copy, 얕은 복사는 하나의 객체를 다른 객체에 직접 대입할 경우 참조를 하게 되므로 두 객체는 같은 데이터(주소)를 가지게 된다. 객체 하나의 데이터를 바꿀 경우 다른 객체의 데이터도 같이 바뀐다. (ex: 바로가기)
  • deep copy, 깊은 복사는 주소를 복사하는게 아니라 속성만 복사해서 새로운 객체를 생성 하게 된다. 객체 하나의 데이터를 바꾸더라도 다른 객체의 데이터에 영향이 없다.(복사)

shallow copy & deep copy_정리링크

null, undefined, undeclared

  • null은 변수가 선언 되었으나 null 값을 할당한 경우
  • undefined는 변수가 선언 되었으나 아무런 값도 할당 되지 않은 상태.
  • undeclared는 변수 선언이 안되어있는 상태.

OOP

  • Object Oriented Programming, 객체 지향적 프로그래밍
  • 절차지향적 언어인 C언어와 다르게 객체의 관점에서 프로그래밍. 재사용성이 높고 유지보수가 쉽다.
  • 많은 객체들로 인하여 실행 속도가 절차지향언에 비해 상대적으로 느리다.
  • 특징
    1. 캡슐화: 클래스를 통하여 변수와 메소드를 하나의 단위로 묶고 접근제어자를 활용하여 데이터를 은닉할 수 있다.
      캡슐화는 데이터를 은닉함으로써 높은 응집도와 낮은 결합도를 갖도록 만들어 요구사항 변경에 유연하게 대처할 수 있다.
    2. 추상화: 객체를 만들 때 복잡한 원리나 구동 방식을 몰라도 사용자가 알 수 있게끔 추상화.
    3. 상속: 부모 클래스의 속성이나 메서드를 상속받아 자식 클래스에서 사용 가능.
    4. 다형성: 오버라이딩을 통하여 상속받은 기능을 다시 정의하여 변경할 수도 있다.

OOP_정리링크#1
OOP_정리링크#2

prototype, 상속

  • OOP에서 상속의 개념은 부모클래스의 속성들을 자식클래스에서 상속받아 사용가능하게 하는것을 의미. 자바스크립트는 프토로타입을 이용하여 상속이 가능하다. 이는 편리하고 메모리 절약이 가능하지만, 부모의 프로토타입에 대해서 주소 참조만 하기 때문에 부모 프로토타입의 속성이 변경 되면 상속받은 자식 모두에 영향을 미치게 된다.

프로토타입,상속_정리링크

promise

  • 자바스크립트 비동기 처리에 사용되는 객체를 프로미스라 한다. 주로 서버에서 받아온 데이터를 화면에 표시할때 사용. 여러개의 프로미스를 연결하여 사용도 가능하다.
  • 상태
  1. 대기: 비동기 처리 로직이 아직 완료되지 않은 상태
  2. 이행: 비동기 처리가 완료되어 프로미스가 결과 값을 반환 한 상태
  3. 실패: 비동기 처리가 실패한 상태

Promise_정리링크

javascript array

  • 배열의 각 원소에 접근 시, 인덱스와 자료형의 크기를 이용하기 때문에 배열에 할당 할 수 있는 데이터의 자료형이 정해져 있다.
  • C언어인 경우, int array 일 시, int 형만 배열에 할당 가능하다.
  • JS언어인 경우, javascript의 배열은 객체이기 때문에 어떤 자료형이든 배열에 추가할 수 있다.

splice, slice

  • slice()메소드는 시작지점부터 끝나는지점까지의 복사본을 새로운 배열객체로 반환.
    이는 원본 배열을 수정하지 않는다. 
let array = [0, 1, 2, 3]
array.slice(0,3);
// return 값: [0,1,2]
array.slice(0,2);
// return 값: [0,1]
  • splice()메소드는 배열의 기존 요소를 삭제 또는 교체, 추가 하여 배열의 내용을 변경한다. 원본 배열을 수정. 
let array = [0, 1, 2, 3]
array.splice(0,3);
// return 값: [0,1,2]
array.splice(0,2);
// return 값: [3] 
// 이미 위에서 splice(0,3)을 하여 원본 배열이 [0,1,2]로 변경됨

forEach, map

  • forEach는 for문과는 다르게 비동식 방식이다.
    forEach문 안에서 만약 에러가 발생하더라도 멈추지 않고 동작한다.
    가변적인 배열이나 리스트 크기를 구할 필요가 없기 때문에 복잡한 반복문에 적합하고,
    인덱스를 생성하여 접근하는 for문보다 수행속도가 빠르다.
    읽기 전용으로 불러오기때문에 반복문 내에서 리스트 값을 변경하거나 추가할 수 없다.
    배열을 역순으로 탐색 불가능하다. 
const words = ["A", "B"];
words.forEach(word => {
  console.log(word);
}
// 출력 값 
// A
// B
  • map은 배열을 돌면서 배열의 각 원소들을 출력하는 방식이다.
    forEach와는 달리 실행결과를 모은 새 배열을 출력한다.
    return 값이 있어야 undefined를 출력 안한다. 
const words = ["A", "B"];
returnArray = words.map(word => {
  console.log(word);
  return "English" + word
});
// 출력 값
// A
// B
// ["EnglishA", EnglishB"]

익명함수, 선언적함수

  • 익명함수는 이름이 없는 함수로써, 사용하기 위해서는 변수에 넣어서 사용해야 한다. 
var test = function () {
  console.log("test");
};
  • 선언적함수는 함수를 선언할때 이름을 붙여주는 것을 의미. 
function test() {
  console.log("test");
}
  • 웹브라우저는 선언적 함수부터 먼저 읽기 때문에 함수 선언 전에 함수를 실행하여도 에러가 발생하지 않는다.
test();
function test() {
  console.log("test");
}

이벤트 버블링

한 요소에서 이벤트가 발생하면 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다.
이는 최상단의 부모요소까지 반복한다.

이벤트 버블링 예시:

  • html 
 <body>
    <div class="DIV1">
      DIV1
      <div class="DIV2">
        DIV2
        <div class="DIV3">DIV3</div>
      </div>
    </div>
  </body>
  • js
const divs = document.querySelectorAll("div");

const clickEvent = (e) => {
  console.log(e.currentTarget.className);
};

divs.forEach((div) => {
  div.addEventListener("click", clickEvent);
});
// DIV3 클릭 시 return 값 DIV1, DIV2, DIV3
  • event.stopPropagation()을 사용하여 이벤트 버블링을 방지할 수 있다.
const clickEvent = (e) => {
  e.stopPropagation();
  console.log(e.currentTarget.className);
};
// DIV3 클릭 시 return 값 DIV3

타입스크립트

  • javascript의 슈퍼셋, 오픈소스 프로그래밍 언어.
  • 변수 선언, 객체 선언, 함수 선언할 때에 모든 타입을 선언하여 무슨 데이터 타입이고 어떠한 방식에 사용되는지 알 수 있게 도와준다.
  • 해당 타입에 맞지 않는 값을 넣으면 에러를 발생시킨다.
//javascript
const name = "Gelo";

//Typescript
const name:string = "Gelo";

//Typescript Error
const name:string = 1;

타입스크립트_정리링크

profile
젤로
Back-End Developer 🍏🍎

0개의 댓글

관련 채용 정보