var, let, const

var 변수 선언

var var1 = "var1 변수";
console.log(var1);
var1 = "var1 변수 덮어쓰기";
console.log(var1);
var var1 = "var1 변수 재선언"
console.log(var1)

var 변수 선언의 문제점

1. 변수를 덮어 쓸 수 있다.

2. 변수를 재선언 할 수 있다.

 

let 변수 선언

let let1 = "let 변수";
console.log(let1);
let1 = "let 변수 덮어 쓰기";
console.log(let1);
//let let1 = "let 변수 재선언";

let 변수는 덮어 쓸 수는 있지만, 재선언 할 수 없음

 

const 변수 선언

const const1 = "cosnt 변수";
console.log(const1);
// const = "const 변수 덮어 쓰기";
// const const1 = "const 변수 재선언";

const 변수는 재선언, 덮어 쓰기가 모두 불가능한 변수 선언 방법

 

const obj = {
    name:"abc",
    age:1
}
console.log(obj.name); // abc
obj.name = "aaa";
console.log(obj.name); // aaa

// obj = { name: "ddd"}

Primitive types(숫자, 문자열, 불리언 값 등)은 값 자체를 변수에 저장하기 때문에 값을 바꿀 수 없음.

 

Object types(배열, 객체, 함수 등)은 값이 아니라 메모리 주소를 변수에 저장 변수의 저장된 주소는 바꿀 수 없지만, 주소가 가르키는 객체의 내용은 바꿀 수 있다.

 

템플릿 문자열

문자열과 변수를 합치기 위해 기존에는 + 연산자를 사용함.

const name = "홍길동";
const age = 24;
const print = "이름은 " + name + " 나이는 " + age;
console.log(print);

 

템플릿 문자열은 문자열 안에서 자바스크립트코드를 쓰기 위한 표기법

`` 역따옴표로 문자열을 감싸면 됨.

const name = "홍길동";
const age = 24;
const print = `이름은 ${name} 나이는 ${age}`;
console.log(print);

 

화살표 함수

function 키워드를 이용하지 않고 함수를 간결하게 작성할 수 있는 문법

const func1 = ()=>{
    console.log("화살표 함수");
}
func1();

 

인수가 1개인 경우 () 생략이 가능

const func1 = v, v2 =>{
    console.log(v + 1 + v2);
}
func1(1);

 

인수가 2개 이상인 경우 소괄호를 생략할 수 없음.

 

처리를 한 행으로 반환하는 경우 중괄호와 return을 생략할 수 있음

const func4 = (n1, n2) => n1 + n2;
console.log(func4(1,4));

const add = (a, b) => a + b;
// 위는 아래와 같음
const add = (a, b) => {
  return a + b;
};

const add = (a, b) => {
  a + b; // return 없어서 undefined 반환
};

 

()를 이용해 한행으로 모아서 반환

const func5 = (val1, val2) => (
{
name: val1,
age: val2,
}
)
console.log(func5("홍길동", 24));

 

() => { name: "홍길동" }	undefined	중괄호는 코드 블록, 객체로 안 인식함
() => ({ name: "홍길동" })	객체	괄호로 감싸면 객체로 명확하게 인식됨

 

분할 대입

const profile = {
    name: "홍길동",
    age: 24
}
const {age} = profile;
console.log(age);

// 객체가 반환
// const age = profile;
// console.log(age);

const profile = {
    name: "홍길동",
    age: 24
}
// 콜론(:)기호를 이용해 다른 변수명(별명)을 지정.
const {age: age2} = profile;
console.log(age2);

 

디폴트값

const hi = (name="게스트") => console.log(`${name}님 안녕하세요`);
hi();

 

객체 분할 대입의 디폴트값

const profile = {
    age:24
}

const {name="게스트"} = profile;
console.log(name);

// const {name} = profile;
// console.log(name); // undefined

 

스프레드 구문

 

...은 배열이나 객체 안의 값을 "펼쳐서(spread)" 개별 요소로 만드는 문법

const arr1 = [1,2];
console.log(...arr1);

 

요소 모으기

const arr1 = [1,2,3,4,5];
const [n1, n2, ...n3] = arr1;
console.log(n3);

const arr4 = [10, 20];
const arr5 = [30, 40];
const arr6 = [...arr4, ...arr5];
console.log(arr6);

const arr4 = {val1:10, val2:20};
const arr5 = {val3:30, val4:40};
const arr6 = {...arr4, ...arr5};

console.log(arr6);

 

map, filter

배열 처리에서 기존 for문을 대체하여 효율적으로 코드작성이 가능한 문법.

const nameArr = ["aaa", "bbb", "ccc"];
// for(let i=0; i<  nameArr.length; i++) {
//     console.log(nameArr[i]);
// }
nameArr.map(name => console.log(name));

 

filter 함수: return 뒤에 조건식을 추가하여 일치하는 것만 반환함.

const numArr = [1, 2, 3, 4, 5];
// 홀수(2로 나눈 나머지가 1)인 경우만 추출
const newNumArr = numArr.filter(num => num % 2 === 1);
console.log(newNumArr); //[1, 3, 5]