1. Javascript 공부
- Google, MDN, stackoverflow 활용 - 가급적 영어로 검색해보기
- ES2015(ES6)+ 문법활용
- 함수는 명확한 하나의 역할에 집중
- 하위 함수 나누기
- 일관성이 최고임(자신만의 구현 패턴이 있는지)
- 고차함수의 활용 (함수형 프로그래밍으로 가기 위한 좋은 방법)
2. Javascript 사용 이유
- 처음은 정적이 웹페이지에서 동적인 웹페이지를 구현하기 위해 언어가 만들어짐
- 2000년까지 마이크로소프트, 넷스케이프, 모질라 등에서 각자 다른 언어를 사용하기 때문에 표준이 필요했음 → 이 때 만든 표준이 ECMAScript이다. → 인터넷 브라우저가 95%까지 점유율을 차지하면서 ECMA를 잘 안 지키려함
- JQuery, dojo, mootools는 라이브러리로 당시 많은 언어들을 통일되게 보여주는 기능을 가졌다
- 크롬이 등장하면서 ECMA 표준을 다시 개선
- SPA(Single Page Application) -하나의 페이지에서 필요한 데이터만 받아와서 필요한 곳만 부분적으로 업데이트 시키는 방법 → 자바스크립트도 가능하지만 React, vue, angula가 매우 편함
- v8엔진을 이용하여 백엔드에서 자바스크립트를 쓸 수 있게 해주는 것이 nodejs
- 타입 스크립트는 자바스크립트 위에 타입만 올려진 언어이다.
3. Javascript 변수 자료형
- let → ES6에 추가 (그 이전은 var을 사용 but 이제는 쓰지 않는 걸 권장)(mutable 데이터 타입)
- var은 변수를 선언하기도 전에 값을 사용할 수 있는 미친 짓이 가능했음(var hoisting: 변수를 어디에 선언했음에 상관없이 선언문을 맨 위로 올려주는 것을 말한다) / 또한 var은 block의 scope를 무시했었음 (큰 프로젝트에서 위험부담이 있음)
- const - 한번 할당하면 값이 절대 바뀌지 않는 자료형(immutable 데이터 타입)
- 보안상의 이유, 인간의 실수를 줄이기 좋음 등
4. Javascript 타입
(javascript에서는 타입을 생략해도 된다, 타입스크립트에서는 타입도 간단히 써주면 된다)
- Number : 정수, 소수
- 최근 bigInt가 등장(알고만 있어라)
- String: 문자들, 문자 하나 모두 가능
- null은 텅텅 비어있는 값이라는 것을 명시적으로 보여줌 / undfined 값이 지정이 안되어 있는 상태로 텅텅 비어있는지 들어가지 않았는지 정의가 안된 상태
- symbolic: 추후 공부할 예정
- Dynamic typing이 가능하다 : 처음에 어떤 변수에 string을 저장해 놨다가 Number로 바꾸는 것이 가능 → 굉장히 위험한 기능 → 타입 스크립트에서 해결 가능
- 메모리가 저장되는 방법 2가지
- primitive 타입
- 값 자체가 메모리에 저장된다
- object 타입
- 레퍼런스가 메모리에 저장 되어 레퍼런스를 통해서 실제로 메모리가 담겨 있는 곳으로 연결
- 모든 object는 mutation이 가능
- primitive 타입
5. Javascript 조건문, 반복문
5-1. 조건문
- 기본 형태
if (name === 'elice'){console.log('yes')}
else{ console.log('no')}- ? operator
console.log(name === 'elice' ? 'yes' : 'no')- switch
switch (){
case:
}5-2. 반복문
- while(){}
- do{} while()
for(let i =3 ; i> 0; i—){}6. Javascript function
- function is object
- Default parameters(added in ES6)
- 예시
function showMessage(message, from = 'unknown') {
~~
}
showMessage('Hi'); // Hi , unknown- Rest parameters (added in ES6)
- 배열 형태로 전달된다.
- 예시
function printALl(...args){
// 1번
for (let i= 0; i< args.length; i++){
console.log(args[i]);
}
// 2번
for(const arg of args){
console.log(arg);
}
// 3번
args.foreach((arg) => console.log(arg));
}
pringAll('dream', 'coding', 'elle'); //...args = ['dream', 'coding', 'elle']- 변수의 범위는 밖에서는 안을 못보지만 안에서는 밖을 볼 수 있다.
- 어떠한 조건일 때 반환하고자 할 때는 최대한 빨리 반환이 가능하도록 하여라
// 이러한 경우보다
function practice(user){
if(user.point > 10){
// 필요한 내용들
}
}
// 이렇게 미리 return을 해주는 것이 좋다
function practice(user){
if(user.point <= 10){
return;
}
// 필요한 내용들
}- function expression vs function declataion
- function declaration
- 언제든 호출이 가능하다 → hoisting이 벌어졌기 때문에 → 자바스크립트 엔진이 선언문을 제일 위로 올리기 때문
function print () { // named function console.log('print'); } - 언제든 호출이 가능하다 → hoisting이 벌어졌기 때문에 → 자바스크립트 엔진이 선언문을 제일 위로 올리기 때문
- function expression
- 변수에 할당이 된 다음부터 호출이 가능하다
const print = function () { // 익명함수(anonymous function) , 아니어도 가능함 console.log('print'); };- callback
- 함수를 전달해서 상황이 맞으면 이 함수를 불러라라는 기능
- 예시
- function declaration
const printYes = funtion (){ //anonymous function(익명함수)
console.log('yes!');
};
const printNo = function print(){ //named function(디버깅할 때 사용하기 위해 이름을 지어준다)
console.log('no!');
};
function randomQuiz(answer, printYes, printNo){// 함수를 인자로 받고
if(answer === 'love you'){
printYes();//조건에 따른 함수를 호출한다
} else {
printNo();
}
}
randomQuiz('worng', printYes, printNo);
randomQuiz('love you', printYes, printNo);
```
- arrow function(화살표 함수)
- 간단하게 익명함수를 만들 수 있다
- 한줄인 경우에는 {}쓰지 않고 return 을안써도 return이 되지만 여러 줄인 경우에는 {}와 return을 써줘야 한다.
- 예시
```jsx
const add = function(a,b){ // 보통의 익명함수를 사용하여 function expression
return (a+b);
};
const add = (a,b) => a+b; // arrow function을 사용하여 function expression- IIFE
- 함수를 바로 쓸 수 있게 해준다(사실, 최근에는 거의 쓰이지 않는다)
- 예시
(function hell(){
console.log('IIFE');
}();7. Javascript class
ES6에 도입
- class는 fields(변수)와 메소드(함수)로 이루어져 있다
- 간혹 fields(변수)로만 구성되엉 있는 class가 존재하는데 이를 data class라고 한다
- 클래스라는 틀을 사용해 객체(object)를 만든다
- 객체를 만들때는 new라는 키워드 사용
- 클래스에 get, set을 사용하는 이유
- 클래스를 사용하는 사람이 멍청한 값을 넣었을 때 일어나는 오류를 방지하기 위해서
- 예시 - get, set 동작과 오류가 난 경우
- 예시 - 변수의 이름을 다르게 해주는 것이 좋다
- public vs private
- publicField 는 어디서나 사용 가능
- privateField는 그 안에서만 사용 가능 변수 앞에 #을 붙인다
- 생긴지 별로 안되어서 사용하는 사례를 거의 볼 수 없음
- static
- 이녀석도 마찬가지로 생긴지 별로 안되어서 아직 많은 사람들이 사용 안함
- 상속과 다향성
- 자바와 거의 동일
- instanceOf
- object는 class를 통해 만들어진 instance이다
- instanceOf 는 왼쪽에 있는 object가 오른쪽 클래스로 만들어진 instance인지 알려준다
- 예시
```jsx
console.log(rectangle instanceOf Rectangle); // true
console.log(triangle instanceOf Rectangle); // false
```
8. Javascript Object
1. Object는 key, value로 이루어져 있다.
2. 오브젝트를 만드는 방법은 2가지
- object literal
```jsx
const obj1 = {};
```
- object constructor
```jsx
const obj2 = new Object(); //클래스를 사용
```
3. 자바스크립트는 Runtime 중 동적으로 type이 결정된다
- Object에 뒤늦게 하나의 property를 추가하거나 삭제할 수 있다
- 이런 특성은 금방금방 하기에는 좋지만 나중에 유지보수를 할때 힘들거나 생각치도 못한 에러에 맞닥뜨릴 수 있다
- 다른 언어에서는 흔치 않은 특징이다(파이썬도 같은 특성인듯)
4. Object의 Property에 접근하는 방법
- . 문법과 computed properties
- . 문법은 내가 어떤 키를 써야할지 알 때 사용하고, computed properties는 내가 어떤 키를 써야할지 모를 때 사용한다.
```jsx
console.log(elite.name); // . 문법
console.log(elite['name']); // computed properties
```
- 이 때, propertiy는 String type 이어야 한다
5. JavaScript에는 property value short라는 기능이 있어 key와 value의 이름이 동일하다면 이것을 생략할 수 있다.
6. for ,,in vs for..of
- for (key in obj)
```jsx
for(key in ellie){
console.log(key);
}
// name
// age
// haJob
```
- for (value of iterable)
```jsx
const array = [1, 2, 4, 5]
for( vlaue of array){
console.log(value);
}
// 1
// 2
// 4
// 5
```
7. 객체 복사
- 과거에는 for..in을 사용하여 key를 불러와 하나씩 저장했었다
- 현재는 assign()을 사용한다
- 예시
```jsx
// user라는 Object를 복사하려고 한다
const user4 = Object.assign({},user);
// 이렇게도 가능하다
const user4 ={};
Object.assign(user4, user);
```
- 여러개를 합치려고 할 떄 같은 key가 존재하면 덮어씌운다.
```jsx
const fruit1 = {color: 'red');
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2); // color는 blue로 된다
console.log(mixed.color);
console.log(mixed.size);
```
- 9. 배열 문법
- push() - 새로운 원소를 리스트 뒤에 추가 후 변경된 배열의 길이를 반환
- unshift() - push()와 유사하나 배열의 앞에 추가한다 - 그만큼 더 느리다
- pop() - 배열의 마지막 원소를 제거한 후 해당 값을 반환
- shift) - pop과 유사한 배열의 앞에서부터 제거 - 그만큼 더 느리다
- indexOf() - 배열에서 특정 문자열의 위치를 반환(문자열에서도 가능)
- 중복되는 값이 있는 경우 앞에서부터 한 개의 인덱스를 반환
- lastindexOf()를 하면 뒤에서 부터 한개의 인덱스를 반환
- includes() - 인자인 원소가 배열에 포함되어 있는지 boolean으로 반환
- sort() - 배열을 오름차순으로 정렬(default값은 문자열 변환하여 처리)
- slice() - 배열의 일정부분을 짤라 새로운 배열을 반환한다
- 첫 번째 인자는 시작 인덱스, 두 번째 인자는 끝 인덱스이지만 끝인덱스는 새로운 배열에 포함되지 않는다.
- 예시
arr = [1,2,3,4,5];
const result = arr.slice(1,3) ;
console.log(result); // [2,3]- splice() - 배열의 원소를 원하는 만큼 삭제하고 원하는 만큼 새로 집어 넣을수 있는 기능
- 반환형태는 제거된 원소들이 담긴 배열이고 배열은 나머지 원소들이 담긴 배열이 된다. 새로운 배열이 나오는 것이 아니다 → 이때는 slice를 사용한다.
- 예시
arr = [1,2,3,4,5,6];
arr.splice(1, 3, 1,2,3,4,5,6);
console.log(arr); // [1,1,2,3,4,5,6,5,6]
//arr 배열에서 1번째 인덱스부터 3개의 원소를 지우고 그 자리에 1,2,3,4,5,6 값을 모두 넣기- reverse()
- 배열을 거꾸로 뒤집을 때 사용하는 메소드
- 배열 자체를 뒤집으면서 동시에 반환값도 뒤집은 배열이다.
- 예시
arr = [1,2,3,4];
console.log(arr.reverse()); // [4,3,2,1]
console.log(arr); // [4,3,2,1]- find
- 예시)학생들이라는 배열에서 점수가 90점인 학생을 찾아라
- 콜벡 함수 return이 ture가 되는 순간 그 값을 return하고 함수가 끝난다.
const result = students.find((student,index) => student.score === 90);10. 문자열 문법
- concat() - 인자를 문자열과 합친 새로운 문자열을 만들어내는 함수
- 기존 문자열은 변화하지 않는다.
- 예 - str.concat('char')
- 파이썬과 유사하게 + 연산자를 통해서도 합칠 수 있다
- template literals(string)
- 작은 따옴표(' ')거 아닌 백팩 기호(` `)를 사용하는데 변수를 중괄호 안에 넣고 앞에 $를 붙이면 변수의 값이 자동적으로 나온다
- 예시 - `'value: ' + hellobob + 'type :'` 대신 ``value: ${hellobob}type :`` 로 사용한다.
- 작은 따옴표(' ')거 아닌 백팩 기호(` `)를 사용하는데 변수를 중괄호 안에 넣고 앞에 $를 붙이면 변수의 값이 자동적으로 나온다
- 줄 바꿈이나 escape 문자가 없어도 자동 인식이 가능하다
- split()
- 첫 번째 인자는 구분자로 해당 키워드를 기준으로 문자열을 나눈다
- 두 번째 인자는 limit으로 앞에서부터 몇 번째까지 나눌지 보여준다.
- 반환 형태는 배열이다
- 예시
- split()
arr = '1, 2, 3, 4';
const result = arr.split(',', 2);
console.log(result) // [1, 2]11. 고차 함수
- 정의: 다른 함수를 전달인자로 받거나 함수 실행의 결과를 함수로 반환하는 함수
