JavaScript

JavaScript Tree Structure

function(함수)

함수를 정의하게 되면 global 안에 global과 동일한 방식으로 동작하는 함수의 환경이 생성된다.

변수를 찾을 때의 순서

1. 같은 블록 내에서 변수에서 찾는다.
2. 같은 블록 내의 매개변수에서 찾는다.
3. 상위 요소에서 변수에서 찾는다.
4. 상위 요소의 매개변수에서 찾는다.
5. 상위로 가면서 반복한다.

함수

즉시 실행 함수 표현식(IIFE)

전역을 오염시키지 않기 위해 사용한다.
=> IIFE를 변수에 할당하면 함수의 return 값만 저장된다.

(function () {
})();  // 뒤에 바로 ()를 붙여준다.

1. 익명 함수를 사용한다.
2. 함수 정의 후 ()로 감싸준 다음 뒤에 ()를 붙여 즉시 실행되도록 한다.

this

• 객체의 메소드를 정의할 때는 화살표 함수 사용을 지양한다.
  => 객체 안에서의 this를 찾을 수 없기 때문이다.
• 메소드 안에서의 함수를 호출할 때는 화살표 함수 사용을 지향한다.
  => 메소드 안에서 일반함수를 사용하고 this를 찾게 되면 예상한 값과 다르게 나올 수 있기 때문이다.

화살표 함수의 this

상위 환경에서 this를 찾았을 때의 값을 가져온다.

객체(Object)

• key를 변수로부터 받아와서 처리할 때는 . 표기법이 아닌 [] 표기법으로 불러온다.
  => 계산된 프로퍼티 (computed property)

단축 프로퍼티(Shorthand Property)

key와 value가 같을 때에는 하나만 써서 표현할 수 있다.

object = {
name,  // name: name
email  // email: email
}

key 조회

key in
hasOwnProperty

Property 나열

obeject.keys/values/entries

Property 제거 | 삭제

object.key = null;  // object의 key를 null로 한다.(제거)

delete object.key;  // object의 key를 delete한다.(삭제)

객체 구조 분해 할당

객체를 분해해서 변수에 담을 때 사용하며,
순서를 바꿀 수 있고 변수의 이름을 바꾸려면 변수 객체의 value를 설정해주어야 한다.

const salaries = {
  권: 50,
  이: 3000,
  강: 500,
  김: 700
}  // 변수 선언 및 객체를 변수에 할당

const {권, 이, 강, 김} = salaries  // salaries의 '권, 이, 강, 김'이라는 key의 value를 '권, 이, 강, 김'이라는 변수에 각각 할당한다.

/*
const 권 = salaries.권
const 이 = salaries.이
const 강 = salaries.강
const 김 = salaries.김
*/

객체 합성

{...객체이름, ...객체이름}

배열(Array)

배열 구조 분해 할당

배열을 분해해서 변수에 담을 때 사용하며,
순서를 바꿀수 없고 변수의 이름은 바꿀 수 있다.

let color = ['#ff0000', '#2b00ff', '#00ff2f']  // 변수 선언 및 배열을 변수에 할당

let [red, blue, green] = color  // 배열의 요소들을 순서대로 변수에 각각 할당한다.

/*
let red = color[0]
let blue = color[1]
let green = color[2]
*/

값 참조에서 복사하는 방법

• Object.assign(복사받을객체이름, 복사할객체이름1, ...)
• spread syntax(...)

복사받을객체이름 = {...복사할객체이름}

클로저(Closure)

함수 내의 지역 변수를 사용하는 함수 내의 지역 함수를 말한다.