[TIL] Javascript 변수,모듈,리터럴,화살표 함수, 클래스,forEach(),Map(),reducd()

let vs Const vs Var

let과 Const는 ES6이후 새로 생긴 변수이다.

<역할 차이>

• let : 재정의 가능, 재선언 불가능, Block Scoped
• const : 재정의 불가능, 재선언 불가능, Block Scoped
• var : 재정의 가능 , 재선언 가능, Function Scoped

let a = 3
const b = 4
var c = 2
console.log(a); 3
console.log(b); 4
console.log(c); 2
//let, const 값 변경시
a = 12;
b = 23;
console.log(a); 12
console.log(b); // error
//let, const, var 값 재정의 시
let a = 23;
const b = 123;
var c = 132;
console.log(a); // error
console.log(b); // error
console.log(c); 132

• const 로 선언된 객체의 내용은 변경 가능

const arr = [1,2,3]
arr = [2,4,5] // error
arr[0] = 4
arr.push(5)
console.log(arr); [4,2,3,4]

모듈 import export

모듈 : 파일을 여러개로 분리하였을시 각각의 파일들

export : 변수나 함수, 클래스를 선언시에 앞에 export를 붙이면 내보내기 가능

//배열 내보내기
export let name = ['Lee','Seunghoon','hoon']

//상수 내보내기
export const City = 'Seoul';


//클래스 내보내기
export class Name{
	constructor(name){
		this.name = name;
	}
}

//함수 내보내기
export function Name(name){
	console.log(name)
}

선언부에서 떨어져서 export 붙이기

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄

import : 모듈 가져올때는 import {} from '경로'

import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

as : 모듈 이름 설정

import * as 'name' : import시에 모듈명을 변경하여 가져온다.

import {sayHi as hi, sayBye as bye} from './say.js';
hi('John'); // Hello, John!
bye('John'); // Bye, John!

export as : export시의 모듈명 변경

• export

export {sayHi as hi, sayBye as bye};

• import

import * as say from './say.js';

say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!

export default : export할 객체가 하나만 있을시에 사용

• export

export default function User(name) { // export 옆에 'default'를 추가해보았습니다.
 console.log(name);
}

// or

function User(name) {
	console.log(name);
}

export default User;

• import

import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔습니다.

User("John")

템플릿 리터럴(백틱)

' ', " " 처럼 문자열 표현시 사용
사용법 : `asdf`
특징 : 표현식을 ${...} 방식으로 문자열 안에 삽입 가능

const name = "Lee"
console.log(`my Name is ${name}`); 
// => 'my Name is Lee'

• 문자열을 여러줄에 걸쳐 표현 가능

let guestList = `손님:
 * John
 * Pete
 * Mary
`;

console.log(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함`
// 손님:
// * John
// * Pete
// * Mary

화살표 함수

함수를 ()=> 방식으로 축약하는 함수

let func = (arg1, arg2, ...argN) => expression;

let func = function(arg1, arg2, ...argN) {
  return expression;
};

class

• 선언법

clss Person{
	...
}
let Lee = new Person()

• 초기값 설정
  constructor(생성자)를 이용해 class 객체 초기값 설정

class Person {
	constructor(name,age,city){
    	this.name = name;
        this.age = age;
        this.city = city;
    }
}
let Lee = new Person('Lee','20','Seoul');

• 매서드 설정
  객체의 동작 설정

class Person {
	constructor(name,age,city){
    	this.name = name;
        this.age = age;
        this.city = city;
    }
    changeAge(changeAge){
    	return this.age = changeAge;
    }
}
let Lee = new Person('Lee',20,'Seoul');
Lee.changeAge(21)
console.log(Lee) // name : 'Lee', age : 21, city: 'Seoul'

forEach()

forEach() : 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한번씩 실행
반환 순서 : 배열 요소, index, 배열 순으로 반환해줌 (*순서가 중요*)

let names = ["Lee", "Seung", "Hoon"];

names.forEach((e) => console.log(e)) // "Lee","Seung","Hoon"

let names = ["Lee","Seung","Hoon"];

names.forEach(function(element,index,array){
	console.log(element,index,array)
    }
    // "Lee", 0, Array = ["Lee","Seung","Hoon"]
    // "Seung", 1, Array = ["Lee","Seung","Hoon"]
    // "Hoon", 2, Array = ["Lee","Seung","Hoon"]

map()

map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환.

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);
// Array [2, 8, 18, 32]

reduce()

reduce : 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값을 반환함.
모든 배열의 합을 구할때 씀
반환 순서 : 토탈, 선택 값, 꼭 쓰지 않아도 됨(선택 인덱스, 현재 배열)

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((누적된 수: acc, 현재 선택 요소: cur) => { return acc += cur; });
console.log(result);  // 15