객체 개요, 함수, ES6 문법 몇가지

 

순차적으로 공부한 게 아니고

의식의 흐름으로 공부하고 노션으로 정리한거라서

내용이 이것저것 섞여있고 

어떤건 자세하게 어떤거는 가볍게만 적어놓았음

 

일부는 Javascript Deepdive 책을 참조하였음

 

중간에 재수없게 왜 한글로 안쓰고 영어 섞었냐면

용어랑 맨날 보는 글자가 영어기 때문에 나도 익숙해지려고 적은거임 어쩔수없음

 

늘어가는 타자속도

---

 

 

객체란?

• 자바스크립트에서는 원시값을 제외한 나머지 값은 모두 객체임

 

원시 타입

변경 불가능한 값(immutable value)

읽기 전용 값으로 변경할 수 없다는 뜻임

• Boolean
• null
• undefined
• string
• number
• BigInt
• symbol (ES6)

객체 타입

변경 가능한 값(mutable value)

• 함수, 정규표현식 등등 원시타입을 제외한 전부

 

각 Type의 특징에 대해서는 나중에 상세하게 정리할 예정

 

---

 

객체를 생성하는 방식으로 구분

• 클래스 기반 객체 지향 언어 : 클래스를 사전에 정의하고, 필요할 때 new 연산자와 함께 생성자를 호출해서 인스턴스를 생성하는 방식으로 객체를 생성
• 프로토타입 기반 객체 지향 언어 : 다양한 객체 생성이 가능함
  • 객체 리터럴
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메소드
  • 클래스(ES6)

리터럴이란?
사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해서
값을 생성하는 표기법

메소드(method)
프로퍼티 값이 함수일 경우 메소드라고 부름

인스턴스(instance)
메모리에 할당된 실체화한 객체

 

 

함수(function)

 

일급 객체(first-class object)라고 함

(=다른 객체들에 일반적으로 적용가능한 연산을 모두 지원하는 객체)

 

 

<일급 객체의 조건>

• 변수에 할당(assignment)할 수 있음,
• 객체나 배열같은 자료구조에 저장 가능
• 다른 함수를 인자(argument)로 전달 받음
• 다른 함수의 결과로 return될 수 있음
• 무명의 리터럴로 생성 가능(런타임에 생성이 가능함)

 

함수도 다른 데이터 다루듯이 다룰 수 있음

데이터를 다룬다 : ‘변수에 할당이 가능하다’

 

 

 

함수도 객체임

 

 

 

함수가 할 수 있는 일

• 고차함수(Higher order function)를 생성가능
• 콜백을 할 수 있다.

 

함수는 이름이 있고 없고에 따라 호출 시점이 달라짐

 

 

기명함수(named function) : 이름을 명시한 함수

• 호출될 때 호이스팅이 발생함.
• 선언한 후에도 호출할 수 있음

Hoisting (호이스팅) 현상 ★★★★★
자바스크립트에서 변수나 함수를 선언할 때
변수나 함수의 선언부분을 가장 먼저 위로 끌고와서 해석하는 현상

console.log(test);
var test = 'Key';
console.log(test);

자바스크립트의 작동 순서는

var test; 
console.log(test);
test = 'Key'
console.log(test);

선언 부분을 맨 위로 끌고오며 해석함

 

첫번째 콘솔값은

선언만 되고 할당이 안되었기 때문에

undefined 자료형이 뜰 것이고

 

두번째 콘솔값은

할당이 되었기 때문에

test라는 변수에 할당된 Key라는 값이 뜰 것임

 

이것이 호이스팅 현상

 

 

익명함수(anonymous function) : 이름이 없는 함수

• 할당한 뒤에만 함수를 호출할 수 있음

 

 

 

 

프로그래밍 언어 분류

분류	언어의 종류
저급언어	기계어, 어셈블리어
고급언어	컴파일러 언어, 인터프리터 언어
간이언어	RPG
특수문제언어	시뮬레이션 언어, 리스트처리 언어, 수치제어용 언어

 

• 컴파일러 언어 : 프로그램 전체를 기계어로 변환하는 언어
• 인터프리터 언어 : 한 줄씩 번역하면서 실행하는 언어

 

컴파일러 언어	인터프리터 언어
코드가 실행되기 전(컴파일 타임) 소스코드 전체를 머신코드로 변환한 후 실행함	코드가 실행된 후(런타임) 한줄씩 중간코드인 바이트코드로 변환한 후 실행함
실행파일을 생성함	실행파일을 생성하지 않음
컴파일단계와 실행단계가 분리되어 있음	인터프리트 단계와 실행 단계가 분리되어 있지 않음
컴파일은 단 한번 수행	코드가 실행될 때 마다 인터프리트 과정이 반복 수행
컴파일과 실행 단계가 분리되어있어서 코드 실행 속도 빠름	반복 수행 때문에 코드 실행 속도 느림

 

 

자바스크립트는 인터프리터 또는 스크립트 언어라고 한다

 

 

 

동적타입 언어 & 정적타입 언어

 

Dynamically typed language(동적 타입 언어)
런타임 시 자료형이 결정됨
재할당에 의해 변수의 타입이 언제든지 동적으로 변할 수 있음
타입 없이 변수만 선언해서 값을 지정할 수 있다

Statically typed language(정적타입언어)
컴파일 시 자료형이 결정됨
변수에 선언한 타입에 맞는 값만 할당할 수 있음
직접 변수의 타입을 명시해줘야 함

 

 

자바스크립트는 매개변수(parameter)의 타입이나 반환 타입은 없지만

프로그램이 실행될 때 동적으로 타입을 할당해 추론된 타입이 지정됨

(부정확한 대신에 속도는 빠름)

(=유연성은 높지만 신뢰성은 떨어짐)

 

그러나 타입이 없기 때문에

런타임때 의도치 않은 타입 변환이 일어날 수 있음 (=Type Error)

 

왜냐면 런타임에서 호출하기 전까지

무슨 자료형이 들어갈지 알 수 없기 때문임

→ 이런 이유때문에 타입을 신뢰할 수 없어서 타입을 검사하는 코드와 타입 캐스팅을 수행하는 코드가 필연적

→ 타입스크립트가 이 부분을 보완해서 나옴

 

엄-격

타입스크립트는 함수의 매개변수나 반환 타입을 추가해놔서

타입 안정성을 강화함

 

 

ES6 문법의 default parameter

특정 매개변수에 인수가 전달되지 않으면

매개변수에 설정된 초깃값으로 값을 초기화하는 기능이 추가되었다.

function test (a,b=3) {

return a*b

}

console.log(test(2)); 

//b의 인자가 적혀있지 않아서 자동으로 b=3이 출력됨

 

나머지 매개변수(Rest parameter)

ES6 문법에 추가된 특징으로

개수가 정해지지 않은 arguments를 배열(array)로 받을 수 있는 기능

function test(a, b, c, ...rest){ 
  console.log(a, b, c); // 1 2 3
  console.log(rest); // [4, 5]
}
test(1, 2, 3, 4, 5);

대신 파라미터 끝부분에만 쓸 수 있음

파라미터 값에 4,5,6,7,8 … 넣어도 배열로 묶여서 나옴

 

 

모양이 똑같은걸로는 Spread operator가 있는데

함수의 parameter 자리에 쓰인 것은 Rest parameter,

그 외 자리에 쓰이면 Spread operator로 쓰인다고 보면 된다

 

 

 

'인수' = arguments = '전달인자'

'인자' = parameter = '매개변수'

 

---

 

알면 알수록 더 재밌는 자바스크립트

실제로 이게 왜 그러지? 하던 부분을 나중에 공부하다가 이해하는 경우가 더러 있음