TIL

[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240805

sod0l 2024. 9. 25. 00:08

𝜗𝜚 오늘 공부한 내용

JavaScript 문법 종합반 1주차 강의
JavaScript 기초반 실습

[수강] JavaScript 문법 종합반

1. 조건문의 중첩

let age = 20;
let gender = "여성";

// 미성년자 구분
if (age >= 18) {
    // console.log("성인입니다.");
    if(gender === "여성") {
        console.log("성인 여성입니다.");
    } else {
        console.log("성인 남성입니다.");
    }
} else {
    if (gender === "여성") {
        console.log("미성년 여성입니다.");
    } else {
        console.log("미성년 남성입니다.");
    }
};

2. 조건부 실행

어떤 특정한 경우에 실행하도록 함

let x = 10;

if (x > 0) {
    console.log("x는 양수입니다.");
    };

and 조건(&&)

(x > 0) && console.log("x는 양수입니다.");

3. 삼항 연산자와 단축 평가(short-circuit evaluation)

3-1) or 조건(||)

let y; // (할당하지 않고 선언만)
let z = y || 20;

// 변수 y가 존재하지 않는 경우 기본값으로 20을 사용
// or 조건(||) 연산자를 사용해서 단축 평가를 할 수있음
// 변수 y가 존재하지 않는 경우 || 연산자는 false 값을 반환하고 기본값으로 지정한 20 반환

4. falsy한 값, truthy한 값

if () { -> () 안에는 true 또는 false 값인 조건이 들어감
* 메인 로직이 들어가는 자리 *
};

조건이 Number Type 일때

if (0) {
    console.log("hello");
};
// if(0) -> 괄호 안의 조건에 Number Type(숫자)가 들어갈 수 있음

0, 빈 문자열, null, undefined, NaN, false는 falsy한 값
-> if문의 조건을 만족시키지 못함
그외의 값은 모두 truthy한 값으로 if문의 조건을 만족시킴

if ("") {
    console.log("hello");
};

if (null) {
    console.log("hello");
};

if (undefined) {
    console.log("hello");
};

if (NaN) {
    console.log("hello");
};

if (false) {
    console.log("hello");
};

if (true) {
    console.log("hello");
};

5. 객체

key - value Pair!! 중요!!
하나의 변수에 여러 개의 값을 넣을 수 있다.
value에 올 수 있는 데이터 타입의 형태는 제한이 없다.
(boolean, 함수, 배열, 또 다른 객체도 가능)

5-1) 객체 생성 방법

기본적인 객체 생성 방법

let person = {          // 중괄호 사용
    name: "홍길동",       // key: 밸류;
    age: 30,
    gender: "남자",
};

생성자 함수를 이용한 객체 생성 방법
- 생성자 함수 장점: 많은 객체를 생성할 수 있다.

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 20, "여자");

5-2) 접근하는 방법

console.log("1", person.name);
console.log("2", person.age);
console.log("3", person.gender);

5-3) 객체 메소드(객체가 가진 여러가지 기능 : Objects.~~~)

Objects.key() : key를 가져오는 메소드

let person = {          // **중괄호** 사용
    name: "홍길동",       // = key: 밸류;
    age: 30,
    gender: "남자",
};

let keys = Object.keys(person); // person 객체의 key 들이 배열 형태로 찍힘
// console.log('keys => ', keys);

values

let values = Object.values(person);
console.log("values => ", values);

entries
- key와 value를 묶어서 배열로 만든 배열!! (2차원 배열)

let entries = Object.entries(person);
console.log("entries => ", entries);

assign
- 객체를 복사

let newPerson = {};
Object.assign(newPerson, person, { gender: "여자" });
// { gender: "여자" } -> 일부만 수정해서 복사하고 싶을 때(남자 > 여자로 변경하여 복사) 
console.log("newPerson => ", newPerson);

객체 비교
- 객체와 배열은 크기가 상당히 크다. -> 메모리에 저장할 때 별도의 공간에 저장
- person1은 별도 공간에 대한 주소 가지고 있고 person2도 별도 공간에 대한 주소를 가지고 있음
- 즉 person1과 person2은 주소값이고 각각의 주소값은 다르다. (주소값: 저장 위치)

let person1 = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

let person2 = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

let str1 ="aaa";
let str2 ="aaa";

console.log(person1 === person2); // = person1과 person2가 같은 객체니? (일치 연산자)
console.log(str1 === str2);
// str은 값이 작아서 직접 저장하지만 person은 별도의 공간에 저장함!
// 그래서 str은 value 값 자체가 저장되어 있어서 str1과 str2를 객체 비교 했을때 true로 나오고
// person1과 person2은 객체 비교 했을때 false가 나옴 (주소값이 다르기 때문에)
// 결론 1. person1,2: 각각의 객체의 주소값을 저장(배열이라 크기가 상당히 크기 때문)
// person1과 person2의 각각 별도로 저장된 주소값 비교
// 결론 2. str은 값(value)이 크지 않기 때문에 직접 저장함
// str1과 str2의 값을 바로 비교

// 그렇다면 주소값이 아닌 값을 비교하려면? -> JSON.stringify
// stringify = 객체를 문자열화 시킨다.
// 이 경우에서는 벨류값을 주소값이 아닌 벨류값 그대로 문자열화 시킨다고 보면 됨

console.log(JSON.stringify(person1) === JSON.stringify(person2));

객체 병합
- spread operator: 중괄호 안의 '키: 벨류' 값을 풀어서 다 해체 시켜줘 하는 명령어
- {...객체명}

let person1 = {
    name: "홍길동",
    age: 30,
};
// (person2 별도 공간에 대한 주소)

let person2 = {
    gender: "남자",
};
// spread operator 적용

let perfectMan = { ...person1, ...person2 };  
// { ...person }; = {name: "홍길동", age: 30};
// 대괄호 처음과 끝 안쪽에 공백 꼭 넣기
// 겹치는 key-value는 하나만 표시됨

console.log(perfectMan);

6. 조건문의 중첩

6-1) 생성

기본 생성
- 1이 아닌 0부터 시작(인덱스라고 함)
- 대괄호 사용, 콤마로 각각의 요소들을 구분 ["요소1", "요소2", "요소3"];

let fruits = ["사과", "바나나", "오렌지"];
// 사과: 0번째, 바나나: 1번째, 오렌지: 2번째

// 1-2. 크기 지정해서 생성하는 방법
// new Array(숫자);
let number = new Array(5);  // = 크기가 5인(요소가 5개인) 배열을 만들어줘
// 출력
console.log(fruits);
console.log(number);

// length를 출력해보기 **배열의 length는 많이 쓰이니까 기억해두기**
console.log(fruits.length);
console.log(number.length);

6-2) 요소 접근

배열명[인덱스]

console.log(fruits[0]); // 0번째 요소인 사과과 출력됨

6-3) 배열 메소드

push() 메소드
- 배열명.push("넣을 요소");

let fruits = ["사과", "오렌지"];
console.log("1 => ", fruits);  // 1) push 전

fruits.push("오렌지");
console.log("2 => ", fruits);  // 2) push 후

pop() 메소드
- 마지막 요소 삭제

let fruits = ["사과", "오렌지"];
console.log("1 => ", fruits);  // 1) pop 전
fruits.pop();
console.log("2 => ", fruits);  // 2) pop 후
// pop을 실행하면 배열에 있던 *마지막 요소*가 없어짐 ('오렌지'가 없어짐)

shift() 메소드
- 가장 첫 번째(0번째) 요소 삭제

let fruits = ["사과", "오렌지"];
console.log("1 => ", fruits);  // 1) shift 전
fruits.shift();
console.log("2 => ", fruits);  // 2) shift 후
// shift 실행하면 배열에 있던 *첫번째 요소*가 없어짐 ('사과'가 없어짐)

unshift() 메소드
- 가장 맨 앞에 요소 추가(0번쨰)
- 배열명.unshift("추가할 요소");

et fruits = ["사과", "오렌지"];
fruits.unshift("포도");
console.log(fruits);
// 포도가 *맨 앞*에 추가 됨

splice() 메소드
- 위치를 지정해서 요소를 넣음
- 배열명.splice(시작하는 위치에 대한 번호, 지우는 개수, "요소");

let fruits = ["사과", "오렌지"];
fruits.splice(1, 1, "포도"); // = 1번 요소(= 바나나)부터 1개 삭제하고 "포도"로 갈아끼워줘. (사과는 0번째, 오렌지는 1번쨰)
console.log(fruits);

slice() 메소드
- 배열명.slice(시작하는 위치에 대한 번호, 끝나는 위치에 대한 번호(포함x))

let fruits = ["사과", "바나나", "키위"];
let slicedFruits = fruits.slice(1, 2); // = 1번(두번째) 요소부터 2번(세번째) 요소까지 새로운 배열을 만들어서 반환해줘(end number의 요소는 포함x)
console.log(slicedFruits);
// *끝나는 위치에 대한 번호의 요소는 포함되지 않음!!!!

7. forEach, map, filter, find

forEach() 메소드
- 각각의 요소마다 작업을 하는 것
- forEach 함수 안에 function함수를 넣은 아래 예문을 살펴보자
- forEach는 별도로 이 함수에서 return하는 값은 없고 그냥 실행되게만 하는 함수
- 예문)

let numbers = [4, 1, 5, 4, 5];
numbers.forEach(function(item){  // 매개 변수 자리에 'function'이라는 함수가 들어가있음 => "콜백 함수" -> 4주차에 다시 다룸
    // item 자리에 numbers의 요소들이 한번씩 들어가면서 순회를 돌게 됨(for문이 돌아가는 것 처럼)
    console.log('item입니다 => ', item); 
    // **들여쓰기**, 'console.log()'가 forEach 안에 있음. 왜냐하면 (function의 함수값인 item을 출력해야 하기 때문!)
});
// 함수가 5번 실행됨 (요소 5개이기 때문)

map() 메소드
- map 함수 안에 function함수를 넣은 아래 예문을 살펴보자
- 반드시 return문을 가져야 함!!!
- return문을 꼭 가져야 하는 이유: map 함수가 기존의 있었던 배열을 가공해서 새로운 배열을 생산해내는 역할을 하기 때문
- 그래서 map 함수를 거치고 나면 반드시 새로운 배열이 튀어나옴 -> 새로운 변수 선언해주자(아래는 'newNumbers'가 새로운 변수)
- 예문)

let numbers = [4, 1, 5, 4, 5];
let newNumbers = numbers.map(function(item){  // 새로운 변수(newNumbers)를 선언해주면서 map 함수를 쓰는 것이 포인트
    return item * 2;
})

console.log(numbers);
console.log(newNumbers);

map 함수는 항상 원본 배열의 길이만큼 return 된다
forEach와 다르게 'console.log()'가 map 밖에 있음

filter() 메소드
- 조건이 들어감
- map 함수처럼 기존의 있었던 배열을 조건을 넣어 가공해서 새로운 배열을 생산해내기 때문에 return문이 같이 가야함
- return문 반환(=사용), 새로운 변수 선언 필요!!
- 예제1) 5인 것만 뽑기

let numbers = [4, 1, 5, 4, 5];
let filteredNumbers = numbers.filter(function(item){
    return item === 5 // = 5인 것만 뽑아내라
});

console.log(filteredNumbers);

// 예제 2) 3보다 큰 것만 뽑기
let numbers = [4, 1, 5, 4, 5];
let filteredNumbers = numbers.filter(function(item){
    return item > 3 // 3보다 큰 것만 뽑아내라
});

console.log(filteredNumbers);

find() 메소드
- return문 반환(=사용) 필요!

let numbers = [4, 1, 5, 4, 5];

let result = numbers.find(function(item){
    return item > 3;
});
console.log(result);
// 결과 값으로 4가 반환됨 (조건에 해당하는 값들 중 *첫번째 값만* 반환함)

forEach: return문 반환 불필요
map, filter, find: return문 반환 필요(+새로운 변수 필요)

8. for, while => ~하는 동안 반복한다.(반복문)

프로그래밍에서 핵심적인 역할을 함

8-1) for문

형식)

for (
초기값; 조건식; 증감식) {
};

예문)

for (let i = 0; i <10; i++) {
    console.log(i);
};

// 해석) i라는 변수는 0부터 시작할거야, i라는 변수가 10에 도달하기 전까지 계속할꺼야, i라는 변수는 한 사이클을 돌고 나면 1을 더할거야
// 해석) 초기값: i = 0 (i는 0부터 시작), 조건식: i < 10 (i가 10에 도달하기 전까지), 증감식: i++(i가 한 사이클을 돌면 +1)
// 즉 i가 10이 되면 끝나는 반복문

"FOR문 돌아가고 있음 => " 을 앞에 붙여서 출력하면

//
for (let i = 0; i <10; i++) {
    console.log("FOR문 돌아가고 있음 => ", + i);
};

배열과 for문은 짝꿍이다.

const arr = ["one", "two", "three", "four", "five"];
for (let i = 0; i < arr.length; i++) {
    console.log(i);
    console.log(arr[i]); // arr(array)에 있는 i 값도 접근해서 찍어줄꺼야
};

// 참고) arr[i]는 arr배열의 i번째 값 (**0번째 부터 시작)

예제) 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력하는 예시를 만들어 보세요.

for (let i = 0; i <= 10; i++ ) {
    if ( i % 2 === 0 ){
        console.log(i);  // console. log(i); 가 *if문 안*으로 들어와야함!! 그래야 if 조건이 적용된 i값을 받을 수 있음
    }
};

𝜗𝜚 어려웠던 내용

오늘은 배운 내용이 좀 많았다. 이해가 아예 안되는 부분은 없었지만 배운 것들을 잘 기억하려면 내용이 많기 때문에 필기해둔 것을 자주 보는게 좋을 것 같다.

𝜗𝜚 궁금한 내용과 부족한 내용

지금까지 배운 내용들이 깔끔하게 머리에 남는게 아니라 뒤섞이는 것 같다.
위에 쓴 것처럼 필기해둔 것을 자주 봐보자..

𝜗𝜚 느낀 점

무엇보다 더 익숙해지도록 필기를 자주 보는게 좋을 것 같다는 생각이 많이 든다. 화이팅ㅠ

Ig. https://www.instagram.com/sodol_dotcom/