JavaScript 재입문

📝 정리한 문서

JavaScript 재입문하기

JavaScript는 현재 많은 애플리케이션들에 사용되고 있어서 기술에 대한 지식이 중요한 기량이 된다.
JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고 1996년 초에 Netscape2와 함께 처음 릴리즈 되었다. 원래 LiveScript로 불리기로 되어 있었으나 Java 언어의 성공에 편승해보기 위해 마케팅 결정에 따라 이름이 변경되었다. (햄과 햄스터가 상관없는 것처럼, 두 언어 사이의 공통점이 매우 적음에도 불구하고 JavaScript라는 이름으로 불리게 되면서 혼란을 일으켰다.)

JavaScript는 유형 및 연산자, 표준 내장 객체 및 메서드가 있는 다중 패러다임, 동적 언어이다. 구문은 Java 및 C 언어를 기반으로 하며 이러한 언어들의 많은 구조가 JavaScript에도 적용된다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원한다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있다.

JavaScript

type

수(number), BigInt, 문자열(String), 부울(Boolean), 함수(Function), 객체(Object), 기호(Symbol)-ES2015에 새롭게 추가와 *undifined와 null이 있다. 또한 객체의 특별한 종류인 배열(Array) 객체, 날짜(Date) 객체와 정규식(RegExp) 객체가 있다. (정확히 말하자면 기술적으로 함수는 단지 객체의 특별한 타입으로 취급된다.)

정리하자면

• 수 (Number)
• BigInt
• 문자열 (String)
  문자열 역시 객체로 취급된다.
• 부울 (Boolean)
• 기호 (Symbol)
• 객체 (Object)
  함수 (Function)
  배열 (Array)
  날짜 (Date)
  정규식 (RegExp)
• 널 (Null)
  의도적으로 값이 없음을 나타내는 값
• 정의되지 않음 (Undefined)
  초기화되지 않은 값 (아직 어떤 값도 할당되지 않은 변수)

변수(variables)

새로운 변수는 let, const, var 키워드로 선언된다.
let은 블록 레벨 변수를 선언할 수 있다. 선언된 변수는 "변수가 선언된 블록"에서 사용가능하다.
const는 값이 변경되지 않을 변수를 선언할 수 있다.(변경 불가) "변수가 선언된 블록"에서 사용할 수 있다.
var는 let, const 키워드가 가지는 제한이 없다. "변수가 선언된 함수"에서 사용가능하다.

• 변수에 값을 지정하지 않고 변수를 선언하면 타입은 undifined로 지정된다.

• 블록에 스코프가 없었으나 let, const 선언으로 블록 스코프 변수를 만들 수 있게 되었다.

연산자(operators)

사칙연산, /,%, 비교 연산자, 증감 연산자, 논리 연산자, 삼항 연산자 등

제어 구조

• 조건문(if, switch)
• 반복문(for, while)

※ for...of와 for...in

for (let value of array) {
  // value로 작업을 실행합니다
}
for (let property in object) {
  // object의 항목(property)으로 작업을 실행합니다
}

객체(objects)

간단히 말하자면 이름-값 쌍의 모임이다. 다른 언어로 예를 들자면 Python의 Dictionaries, Perl과 Ruby의 Hashes, C와 C++ 의 Hash tables등과 같다.
빈 객체 생성에는 두 가지 방법이 있다.

• var obj = new Object();
• var obj = {}; //객체 리터럴 구문으로 더 편리하다. JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있다.

배열(Array)

array.length는 배열에 들어있는 항목의 개수가 아님을 주의하자. length 속성은 최대 인덱스에 하나를 더한 값일 뿐이라는 걸 기억해두자.

var a = ['dog', 'cat', 'hen'];
a[100] = 'fox';
a.length; // 101

함수(Functions)

0개 이상의 이름이 있는 매개변수를 가질 수 있다.

• 익명 함수
  익명 함수를 만들 수 있다. 이런 이름없는 함수들은 다른 함수의 인자로 전달하거나 변수에 할당하여 호출할 수 있다.

// 괄호 앞에 함수명이 없음을 주목해주세요.
let avg = function() {
  let sum = 0;
  for (const item of arguments) {
    sum += item;
  }
  return sum / arguments.length;
};

• 재귀 함수
  재귀적으로 함수 호출. 브라우저 DOM등에서 볼 수 있는 트리 구조를 다루는데 유용하다.
• 사용자 정의 객체
  고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메서드의 집합이었다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 클래스 구문이 없다(이런 이유로 클래스 구문에 익숙한 프로그래머들이 때때로 혼란을 경험한다). 그 대신, JavaScript는 함수를 클래스로 사용한다.

• this와 new 키워드를 사용함

• 내장 함수
  JavaScript의 함수 선언은 다른 함수 내부에서도 가능하다. makePerson() 함수 초기 버전에서 한번 본 적이 있다. JavaScript의 중첩 함수(nested functions)에서는 부모 함수 스코프에 있는 변수에 접근이 가능하다는게 중요하다. 이런 특성은 유지보수가 용이한 코드를 만드는데 유용하다. 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 된다. 복잡한 코드를 작성하게 될 때면 여러 함수들 간에 값을 공유하기 위한 용도로 전역 변수를 사용하고 싶어진다. 하지만 전역 변수는 유지보수를 힘들게 한다. 이런 상황에 중첩 함수는 부모의 변수를 공유함으로써 전역 이름공간을 더럽히지 않고 함수들을 연동할 수 있다. "지역 전역"이라고 불러도 괜찮을 것 같다. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야 할 유용한 기술이다.

클로저(closures)

클로저는 JavaScript가 제공하는 가장 강력한 추상화이며, 동시에 잠재적으로 가장 혼란스러울 수 있는 개념이다.

function makeAdder(a) {
  return function(b) {
    return a + b;
  };
}
var add5 = makeAdder(5);
var add20 = makeAdder(20);
add5(6); // ?
add20(7); // ?

여기서 일어나는 일은 함수 내부에서 정의된 어떤 함수가 외부 함수의 변수에 접근한다는 점에서 앞서 언급한 내장 함수에서 일어나는 일과 매우 비슷하다. 유일하게 다른 점은 내장 함수가 반환되었기 때문에 외부 함수의 변수는 사라지는 것처럼 보인다는 것이다. 하지만, 외부 함수의 변수들은 여전히 "존재한다". 그렇지 않다면 'adder' 함수는 동작하지 않을 것이다. 이에 더해서 makeAdder() 지역 변수의 다른 두 "복사본"이 존재한다. 하나는 a는 5이고, 다른 하나의 a는 20이 된다. 따라서 해당 함수를 호출한 결과는 다음과 같다.

add5(6); // returns 11
add20(7); // returns 27