# let vs Const
- 자바스크립트에는 원래 var만 잇었는데 ES6부터 let과 const가 추가되었다.
- let : 값을 수정할 수 있는 변수를 선언할때 사용 Variable values
- const : 한 번 지정하면 절대 변하지 않는 값인 상수를 선언할때 사용, 새로운 값을 할당할 수 없음 Constant values
# Arrow Functions
- 전통적으로 쓰던 방식과 다르게 function 키워드를 생략하기 때문에, 일반 함수보다 짧다
function myFuc(){
...
} // conventional funcion declare
const myFuc=()=>{
...
}
- 화살표 함수는 키워드 this로 인해 생겼던 많은 문제들을 해결해주는 장점이 있음
- JS에서 this가 항상 우리가 원하는 객체를 참조하지 않는다는 것을 알 수 있다. 화살표 함수를 사용하면 해결 가능
- 화살표 함수에서는 딱 하나의 인수를 받는 경우 ()를 생략할 수 있다. 인수가 없다면 생략은 불가능
- 코드가 짧다면 한줄에 모두 올려쓰기도 가능하다. 이 경우에는 return을 생략가능
const printMyname= ()=>{
console.log('Max');
}
printMyname();
const multiply = number => number*2 // 한줄에 모두써서 return을 생략함
# Exports & Imports
- 우리는 파일을 여러개로 나눌 수 있고 html 파일에 올바른 순서로 코드를 가져오기만 하면 된다.
- statemenf를 import 하는 모듈이라는 것은 자바스크립트 파일 안에 있는 것으로, 다른 파일에서 컨텐츠를 불러 올 수 있고 자바스크립트 파일은 그 컨텐츠가 어디에서 온것인지를 알고 있다.
- 한 번에 여러개를 export 하는 것도 가능하다.
- person.js 파일에서 쓰고 있는 default 키워드는 다른파일에서 파일을 import 할때 항상 default export가 냅낸 것을 기본값으로 가져온다는 것을 의미한다
//person.js
const person = {
name : 'max'
}
export default person
// export키워드로 어딘가로 파일을 내보낼 수 있음
//utility.js
export const clean = ()=>{...}
export const baseData = 10;
// 여러가지를 export 하는것도 가능함
- 다른 곳에서 파일을 가져오기 위해서는 import 키워드가 필요하다.
- person.js 파일에서 가져온 person 데이터는 default 로 설정이 되어있으니 항상 그걸 기본값으로 가져온다. 이름은 마음대로 설정이 가능하다.
//app.js
import person from './person.js'
import prs from './person.js'
//imports default and ONLY export of the file Name in the receiving file is up to you
import {baseData} from './utility.js'
imort {clean} from './utility.js'
- 하지만 utility 파일에서 불러온 것은 두개의 다른 상수를 불러오는데 그 파일에서 어떤 특정한 것을 가르키기 위해서 {}curly brace를 사용해준다. 이걸 named export라 부른다. 이름으로 어떤 것을 불러오기 때문이다.
- baseData와 clean이라는 특정하게 이름이 지어진 애들을 불러오지만 어떤 것도 default 설정이 되어있지 않다. 그래서 우리가 원하는걸 정확하게 자바스크립트가 알게 하려면 정확한 이름을 중괄호 사이에 입력해야 한다.
- {baseData , clean } 처럼 콤마를 사용해서 한 괄호에 넣을 수도 있다.
- default export는 import 할 때 이름을 바꿔도 되지만 named export는 중괄호 안에 정확한 이름을 넣어줘야 한다. 하지만 import {smth as Smth} from './utility.js' 처럼 as 키워드를 써서 자유롭게 선택할 수 있는 별칭을 할당할 수도 있다.
- named export 에서는 특수문자 * 를 사용해서 모든것을 import 할수도 있다. import *as bundled from './utility.js'
- 또 무엇이든 export 하는 것에 접근하기 위해서는 bundled.baseData, bundled.clean 처럼 쓸 수도 있다.
#클래스 이해하기
- 클래스는 객체를 위한 청사진 같은 것이다
- class 라는 키워드로 선언할 수 있고 아래의 name 과 같은 property, call과 같은 Method를 가질 수 있다.
- 메소드는 클래스에 정의 한 함수이고 프로퍼티는 클래스에 정의한 변수이다.
- 클래스로 자바스크립트 객체를 생성할 수 있다.
class prson {
name= "max" //property
call =()=>{...} // method
}
// usage (constructor funcions anyone)
const myPerson = new Person()
myPerson.call()
console.log(myPerson.name)
- 클래스에서는 상속(inheritance)를 사용할 수 있다. 만약 다른 클래스에 있는 프로퍼티와 메소드를 상속하면 잠재적으로 새로운 프로퍼티와 메소드를 추가한다.
class Person extends Master
- 또 익숙한 것으로 프로토타입이 있다 .
- class를 만들면 이제 프로퍼티를 사용할 수 있고, 가장 간단한 프로퍼티의 형태는 생성자함수(constructor)를 추가하는 것이다 . constructor is default function. 어떤 클래스에도 추가해서 클래스의 객체를 생성할 때마다 실행될 것이다.
- 메소드는 메소드의 이름 다음에 중괄호를 넣어서 만들 수 있다.
class Person{
constructor() {
this.name = 'Max'; // property
}
printMyName(){
console.log(this.name); // method
}
}
const person = new Person();
person.printMyName(); // max출력됨
- 클래스는 상속을 할 수있다.
- 또다른 클래스를 만들어서 다른 클라스에 상속시킬 때는 extedns_____를 붙여준다. 또 상속을 사용할 때는 생성자 함수 안에 super()메소드를 추가해야한다.
class Human {
constructor(){
this.gender = 'male';
}
printGender(){
console.log(this.gender)
}
}
class Person extends Human{ // 상속을 위해 extends 사용
constructor() {
super(); // 상위클래스의 생성자 함수를 실행하기 위해 넣음
this.name = 'Max'; // property
}
printMyName(){
console.log(this.name); // method
}
}
const person = new Person();
person.printMyName();
person.printGender();
- 하위클래스에서 상위클래스의 값을 덮어쓰면 하위클래스의 값으로 출력된다.
#클래스 속성 및 메서드
- Properties are like "Variables attached to classes/ objects" 클래스와 오브젝트에 추가되는 변수 같은 것
- 기존 문법에서는 construtor를 통해서 프로퍼티를 만들었지만 최신 문법에서는 바로 할당이 가능하다.
//ES 6
constructor(){
this.myProperty = 'value'
}
//ES7
myProperty = 'value'
// 최신문법에서는 생성자함수 없이 바로 호출 가능
- Methods are like "functions attached to classes/objects"클래스와 오브젝트에 추가되는 함수같은것
- 방식은 크게 다른 것이 없지만 화살표 함수를 이용하면 this 키워드를 사용하지 않아도 되서 좋다.
//ES 6
myMethod(){...}
//ES 7
myMethod=()=>{...}
// arrow function을 이용해서 생성
- 이렇게 신 문법으로 위에서 만든 클래스를 바꿀 수 있다.
- javaScript 에서 ES6 / babel 로 변경해줘야 에러없이 사용 가능
class Humen {
gender ='male'; // constructor 삭제
printGender = ()=>{
console.log(this.gender)
}
}
class Person extends Human {
name = 'max'; // 기존에 있던 this 삭제, super 삭제, constructor삭제
gender = 'female';
printMyName =()=>{
console.log(this.name);
}
}
const person = new Person()
person.printMyName();
person.printGender();
#스프레드 및 나머지 연산자
- ... 점 세개로 된 녀석인데 사용법에 따라 spread와 rest로 나뉘어 불린다.
- Spread : Used to split up array elements OR object properties 배열의 원소나 객체의 프로퍼티를 나누는데 사용된다. 배열이나 객체를 펼쳐 놓을 수 있다.
- 예를들어, 기존에 우리가 oldArray라는 배열을 가지고 있는데 거기에 1, 2 를 추가해서 새로운 newArray를 만들고 싶다면 스프레드 연산자를 통해 만들 수 있다.
- object에서도 동일하게 기존 oldObject를 가져와 거기에 새로운 키 값을 넣어줄 수 있다.
const newArray= [...oldArray , 1,2]
const newObject = {...oldObject, newProp:5}
- Rest : used to merge a list of function arguments into an array 함수의 인자들을 배열로 합치는데 사용됨.
- 사용 빈도는 낮지만 함수에서 사용됨.
fuction sortArgs(...args){ // 1개이상의 매개변수를 받으면 모두 배열로 통합됨
return args.sort()
}
const number = [1,2,3];
const newNumbers= [...number, 4]
console.log(newNumbers) // [1,2,3,4]
//만약에 그냥 ...없이 그냥 number를 사용하면
const newNumbers =[number,4]
console.log(newNumbers) // [[1,2,3], 4]
const person ={
name: 'Max'
}
const newPerson ={
...person,
age : 28
}
console.log(newPerson); // newperson{age : 28, name:'Max'}
const filter = (...args) =>{
return args.filter (el=>el ===1); // 매개변수가 1이면 리턴해주는 필터를 걸었음
}
console.log(filter(1,2,3)); // [1] 1이 들어있는 배열이 나옴
#구조분해할당(Destructuring)
- Easily extract array elements or object properties and store them in variables 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해준다.
- 스프레드와 비슷하게 들리지만, 디스트럭쳐링은 원소나 프로퍼티를 하나만 가져와서 변수에 저장한다. (스프레드는 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체에 넣어줌)
//Array Destructuring
[a,b] =['hello','Max']
console.log(a) //Hello
console.log(b) //Max
//Object Destructuring
{name} ={name:'Max', age:28}
console.log(name) //Max
console.log(age) // undefined
// numbers 에서 1,2만 가져옴
const numbers = [1,2,3];
[num1,num2] = numbers;
console.log(num1,num2) // 1,2
//numbers에서 1,3만 가져옴
[num1, ,num3] = numbers;
console.log(num1,num3) // 1,3
#참조형 및 원시형 데이터 타입 ★★★
- 숫자, 스트링, 불리안 등 같은 원시형 타입은 값을 그대로 복사해와서 진짜 복사본을 만들어 준다.
- 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사해온다.
const number = 1;
const num2 = number; //
console.log(num2) //1
- 객체나 배열은 참조형 타입이다.
- 아래처럼 코드를 작성하면 person과 secondPerson은 같은 값을 출력하지만 사실 객체 person을 그대로 복사해 온 것은 아니다.
- 대신에 객체 person은 메모리에 저장되어 있고, 상수person에는 메모리에 있는 주소를 가리키는 포인터를 저장한다. 그래서 secondPerson에 person을 할당하면 포인터가 복사된다.
const person = {
name : 'Max'
};
const secondPerson = person;
console.log(secondPerson) // {name : 'Max'}
- 이렇게 두개의 객체가 같은 포인터를 가지고 있다면, 기존에 있던 person의 이름이 바뀐 뒤 secondPerson을 다시 호출해도 값은 person에 있는걸 그대로 받아 올 수 있다.
const person={
name : 'Max'
};
const secondPerson = person;
person.name = 'Manu'; //person의 이름을 바꾸고
console.log(secondPerson) // {name : 'Manu'} // secondPerson을 호출했지만 person과 동일한 값을 가져옴
- 이런 현상은 리액트에서 예상치 못했던 결과를 초래할 수도 있기 때문에 아주 중요한 개념이다.
- 만약 객체나 배열을 이렇게 복사한다면, 한 앱에 있는 주소에서 객체를 조작할 수도 있기 때문이다. 그리고 실수로 앱의 다른 주소에 있는 같은 객체를 다르게 사용하도록 조작할 수도 있다.
- 변경할 수 없는 방법으로 복사하는 법 : 스프레드 연산자를 사용한다
const person={
name : 'Max'
};
const secondPerson = { // 스프레드를 사용하면 포인터가 아닌 진짜 복사본을 생성할 수 있다.
...person
};
person.name = 'Manu';
console.log(secondPerson) // {name : 'Max'} 기존에 복사해온 person의 값 그대로 출력된다
- 꼭 기억해야 할 것은 값을 재할당 하는 경우는 value가 아닌 pointer / reference를 복사해오는 것이고, 진짜 복사를 제대로 해오고 싶다면 새로운 객체를 생성해서 전체 객체를 복사하는게 아니라, 프로퍼티를 복사해 오는 것이다.
#배열 함수 새로고침
- 자주보게 될 배열 함수로 filter / sort/ map이 있다.
- map은 새로운 배열을 리턴해준다.
const numbers = [1,2,3]
const doubleNumArray = numbers.map((num)=>{
return num * 2;
})
console.log(nmbers) // [1,2,3]
console.log(doubleNumArray) //[2,4,6]
댓글