var, const, let 변수선언

var의 문제점

모던 js 이전에는 var를 이용해서 변수를 선언 했습니다. 그런데 왜 const와 let이 나왔을까요
대표적인 문제점은 변수를 덮어 쓸 수 있다는 것과 다시 선언할 수 있다는 것 입니다.

• 덮었 쓰기 가능 : 유용하게 사용할 수도 있지만, 고정된 값을 쓰고 싶을수도 있습니다. -> const 라는 변수 선언이 생기게 됩니다.
• 재선언 가능 : 코드가 많아지면, 이미 생성된 변수명임에도 생각하지 못하고 선언하게 될 수 있습니다. 이는 개발자가 생각하지 못하는 에러를 만든다고 할 수 있습니다.

//var를 이용한 변수 선언의 문제잠 
var val1 = "var 변수";
console.log("덮어쓰기 전 : ", val1); // var 변수

//var 변수는 덮어 쓰기 가능 
val1 = "var 변수 덮어 쓰기";
console.log("덮어쓰기 후 : ", val1); // var 변수 덮어 쓰기

//var 변수는 재선언 가능
var val1 = "var 변수를 재선언";
console.log("var 변수를 재선언 : ", val1); // var 변수 재선언

let, const 새롭게 등장

let 의 특징

let을 이용한 변수 선언 :
재선언 할 수 없습니다. 변수를 덮어 쓸 수는 있습니다.

• 변수 덮어쓰기 가능

// let으로 변수 덮어 쓰기
let val2 = "let 변수";
console.log(val2); // let 변수 

// let은 덮어쓰기 가능 
val2 = "let 변수 덮어 쓰기";
console.log(val2); // let 변수 덮어 쓰기 

• 재선언은 불가능

//let은 재선언 실행이 불가능
let val2 = "let 변수";
console.log(val2); // let 변수 

//let은 재선언 불가능 
let val2 = "let 변수 재선언" // 에러

const 의 특징

const를 이용한 변수 선언 :
재선언 할 수 없습니다. 변수를 덮어 쓸 수도 없습니다.

주의 : const로 선언한 객체의 속성값은 변경 및 추가 가능합니다.

• 덮어쓰기 불가능

//const를 이용해 정의한 변수 덮어쓰기 
const val3 = "const 변수";
console.log(val3); // const 변수

//const 변수는 덮어 쓰기 불가능 
val3 = "const 변수 덮어 쓰기"; // 에러 

• 재선언 불가능

//const에서의 재선언
const val3 = "const 변수";
console.log(val3);  // const 변수 

//const 변수는 재선언 불가능
const val3 = "const 변수 재선언"; // 에러 

템플릿 문자열

템플릿 문자열은 문자열 안에서 변수를 전개하기 위한 새로운 표기법 입니다.

const name = "윤준호";
const age = 24;

const message = "내 이름은 " + name + " 입니다. 나이는 " + age + "살 입니다.";
console.log(message);

const message2 = `내 이름은 ${name} 입니다. 나이는 ${age}살 입니다. `
console.log(message2);

기존 방식은 문자열과 변수를 결합할 때 +를 이용해서 결합했습니다.
하지만 템플릿 문자열을 이용하면 더욱 편리하게 작성할 수 있습니다.
위의 message와 message2의 콘솔 출력 값은 같습니다.

화살표 함수 () => {}

화살표 함수를 사용하면 기존보다 간단하게 함수를 기술할 수 있습니다. 이 외에도 조금의 차이들을 갖고 있지만, 일단은 표기법을 살펴보려고 합니다.

function func1(value) {
    return value;
}

console.log("기존 함수 : ", func1("func1입니다"));

const func2 = function (value) {
    return value;
}

console.log("기존 함수 2 :", func2("func2 입니다."));

const func3 = (value) => {
    return value;
};

console.log("화살표함수 : ", func3("func3입니다."))

간단하지만 규칙은 명확히 지켜야하며, 처음에는 인식이 어려우니 => 라는 화살표 표시를 보면 일단 함수라는 것을 인식하고 코드를 해석하는 과정이 필요합니다.

분할 대입 {}[]

분할 대입은 객체나 배열로부터 값을 추출하기 위한 방법입니다.
기본 방식을 보면 objProfile을 계속 붙여줘야합니다. 코드가 길어지면 별로 보기 안좋고 입력하기 번거롭습니다. 이럴 때 분할 대입을 활용할 수 있습니다.

const objProfile = {
    name: "윤준호",
    age: 24,
}

const message = `내 이름은 ${objProfile.name}입니다. 나이는 ${objProfile.age}살 입니다.`
console.log("분할 대입 이용하지 않고 문자열 출력 : ", message);

const { name, age } = objProfile;
const message2 = `내 이름은 ${name}입니다. 나이는 ${age}살 입니다.`
console.log("분할 대입 이용해서 출력 : ", message2)

const arrProfile = ["윤준호", 24]
const message3 = `내 이름은 ${arrProfile[0]} 입니다. 나이는 ${arrProfile[1]} 입니다.`
console.log("배열 인덱스르 지정해서 대입 : ", message3);

const [name2, age2] = arrProfile;
const message4 = `내 이름은 ${name2} 입니다. 나이는 ${age2} 입니다.`
console.log("배열에 분할 대입 : ", message4);

디폴트 값

함수의 인수나 객체를 분할 대입할 경우 설정해 사용합니다. 값이 존재하지 않을 경우를 대비해서 초기값을 지정해줌으로서 더욱 안전한 처리를 할 수 있습니다.

const sayHello = (name = "게스트") => console.log("인수의 디폴트값 설정 : ", `${name}님, 안녕하세요`);

sayHello();
sayHello("윤준호");

const myProfile = {
    age: 24,
}

const { name = "게스트" } = myProfile;

const message = `${name}님, 안녕하세요`;
console.log("분할 대입 시 디폴트값 설정 : ", message);

스프레드 구문

배열이나 객체에 활용할 수 있는 표기법이며, 활용방법이 매우 여러가지 입니다.
요소 전개, 요소 모으기, 요소 복사와결합하기 등이 있습니다.

const arr1 = [1, 2, 3, 4, 5, 6];

const summaryFunc = (num1, num2) => console.log(num1 + num2)

summaryFunc(arr1[0], arr1[1]);
summaryFunc(...arr1);

const [num1, num2, ...arr2] = arr1;

console.log(num1);
console.log(num2);
console.log("스프레드 구문으로 나머지 요소 모으기 : ", arr2);

const arr4 = [10, 20];

const arr8 = [...arr4];

arr8[0] = 100;

console.log("기존 배열", arr4);
console.log("스프레드 구문을 이용한 복사", arr8);

map, filter

map함수에서는 배열을 순서대로 처리한 결과를 배열로 받을 수 있습니다.

filter 함수는 map함수와 이용방법은 거의 동일하지만, return 뒤에 조건식을 입력해서 일치하는 것만 반환 합니다.

// 기존 for문 
const nameArr = ["윤준호", "김호준", "가나다"];

for (let i = 0; i < nameArr.length; i++) {
    console.log(nameArr[i]);
}

// map을 이용한 방법
const nameArr2 = nameArr.map((name) => {
    console.log("map을 이용한 방법", name);
});

// filter 를 사용해보자 
const numArr = [1, 2, 3, 4, 5];

const newNumArr = numArr.filter((num) => {
    return num % 2 === 1;
});

console.log("filter를 이용한 순환", newNumArr);

하루 느낀점

차근차근하면 된다고 생각했는데, 그렇지 않은 것 같다. 탄탄한 기초를 조금 더 빨리 쌓도록 노력하고 리액트에서도 항상 생각하면서 공부하는 습관을 들여야겠다.

추가로 집중력이 너무 안좋다. 산만하다 산만해...일단 pc카톡은 지워야겠다. 정신사나와