본 캠프/JavaScript 문법 종합반

JavaScript 문법 종합반 1주차. (4)

Iruka913 2024. 10. 11. 22:43

웹사이트 구조 분석하기

오늘은 div 지옥에서 벗어나는 날이다. 오늘 부로 졸업이야~ 잘 가~~

 

시멘틱 태그? - 의미가 있는 태그 

 

header

main

footer

section

article

nav

aside

 

등등...

 

시멘틱 태그를 쓰는 이유는?

1. 가독성의 향상.

2. 접근성의 향상.

3. SEO 검색 엔진이 구조를 파악하기가 용이하다. 

 

이거를 보고...
이런 구조를 떠올려라?!

 

미디어 쿼리 - 반응형에 사용한다. 

 

Set!

 

// set
// 고유한 값을 저장하는 자료구조다.
// 값만 저장한다, 키를 저장하진 않는다.
// - 값이 중복되지 않는 유일한 요소들로만 구성된다.

// 값의 추가, 값의 삭제, 모든 값 제거, 존재 여부 확인.
// 똑같은 값을 추가하면 중복된 값으로 취급한다.

const mySet = new Set(); 생성하는 문법
mySet.add("value1"); // 밸류만 넣음.
mySet.add("value2"); // 밸류만 넣음.
mySet.add("value3"); // 밸류만 넣음.
mySet.add("value5"); // 밸류만 넣음.
mySet.add("value8"); // 밸류만 넣음. 삽입하는 문법

// 이터레이터. 반복했던 친구?

for(const value of mySet.values()) {
   
} for of로 돌릴 때 문법. 

 

 

과제! 

 

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.

 

풀이 과정 : 힌트를 참고했다. 

인덱스를 뽑아와서 각 배열에 있는 글자에 첫 글자에 추가해주고. 

그걸 sort로 정렬시킨 다음.

그 글자를 제거하는 방식을 사용하였다. 

function solution(strings, n) {
    var answer = [];
    let process = [];
    for (i = 0; i < strings.length; i++) {
        let str1 = strings[i].slice(n, n + 1);
        let new_array = str1.concat(strings[i]);
        process.push(new_array);
    }

    process.sort();
    for (i = 0; i < process.length; i++) {
        let str2 = process[i].slice(1, process[i].length);
        answer.push(str2)
    }
    return answer
}

 

배운 것 / 복습할 것

sort = 사전순으로 정렬해줌

slice 문자열에서도 사용 쌉가능. 

sort를 for문 안에서 계속 돌리면 오류남... 바깥으로 빼줘야함. 

 

 
 

데이터 타입 심화. 

데이터 타입에는 기본형과 참조형이 있다.

기본형 : number, string, Boolean null, undefined, Symbol 

참조형 : Array, function, date, RegExp, Map, WeakMap, Set, WeakSet

 

기본형과 참조형의 차이는 저장 방식과 불변성의 여부.

 

기본형과 참조형의 구분 기준.

기본형 : 값이 담긴 주소값을 바로 복제.

참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제

 

불변성의 여부

기본형 : 불변성을 띈다

참조형 : 불변성을 띄지 않는다

 

값을 바로 변수에 대입하지 않는 이유.

1. 자유로운 데이터의 변환을 위해.

2. 메모리의 효율적 관리를 위해

 

변수 vs 상수

1. 변수 - 변수 영역 메모리를 변경할 수 있음.

2. 상수 : 변수 영역의 메모리를 변경할 수 없음.

 

불변하다 vs 불변하지 않다.

1. 불변하다 : 데이터 영역 메모리를 변경할 수 없음

2. 불변하지 않다. : 데이터 영역 메모리를 변경할 수 없음. 

 

기본형 변수 복사의 결과는 다른값.

참조형 변수 복사의 결과는 같은 값. (원하지 않았던 결과...) 같은 주소를 참고하기 때문에. 

 

얕은 복사와 깊은 복사에 대해 배웠다.

객체를 복사할 때, 변수처럼 복사를 한 다음, 그 안의 내용을 수정하면 원본과 수정된 객체가 같은 판정이 되어버린다.

 

이를 위해서 얕은 복사를 해줄 필요가 있다. 

그런데 객체 안에 또 안에 객체가 있는 경우, 깊은 복사가 필요하다. 

 

호이스팅에 대해 배웠다. 

 

호이스팅 제1법칙. 변수는 선언 시에 전부 끌어올려진다. 

//action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이 이해한다)
//action point 2 : 결과 예상하기
//action point 3 : hoisting 적용해본 후 결과를 다시 예상해보기

function a (x) {
    console.log(x);
    var x;
    console.log(x);
    var x = 2;
    console.log(x);
}
a(1);

 

대충 이런 함수가 있다고 쳤을 때. 

 

코드를 실행하기 전에 변수 선언의 경우, 전부 위로 끌어올리기 때문에. 

콘솔값은 1, 1, 2가 뜬다. 

 

호이스팅 제2법칙. 함수는 선언되면 전체를 호이스팅한다. 

//action point 1 : 결과 값 예상해보기
//action point 2 : hoisting 적용해본 후 결과를 다시 예상해보기

function a () {
    console.log(b);
    var b = 'bbb';
    console.log(b);
    function b() { }
    console.log(b);
}
a();

 

a가 선언되었으므로 콘솔로그 b를 찍는다. 

근데 b값을 가져올 때, b함수가 존재하므로 이걸 맨 위로 끌어올려서

가장 처음의 콘솔 b에는 b함수가 찍힌다. 

그리고 차례로, bbb, bbb가 찍힌다. 

 

어렵다... 

 

예제 ) 객체 및 배열 메소드 응용

// 아래와 같은 결과가 출력되도록 함수를 완성해 보세요.
const db = [
    {
        id: 7,
        name: "Jay",
        age: 33,
        phone: "010-1212-5678",
        email: "qwe@gmail.com",
    },
    {
        id: 10,
        name: "James",
        age: 30,
        phone: "010-1234-5678",
        email: "abc@gmail.com",
    },
];

function handleEdit(id, editingObj) {
    let result = db.find(function (item) {
        return item.id === id;
    });
    return Object.assign(result, editingObj)
}

handleEdit(10, { name: "Paul", age: 35 });

console.log(db);
/*
출력 결과:
[
    {
        "id": 7,
        "name": "Jay",
        "age": 33,
        "phone": "010-1212-5678",
        "email": "qwe@gmail.com"
    },
    {
        "id": 10,
        "name": "Paul",
        "age": 35,
        "phone": "010-1234-5678",
        "email": "abc@gmail.com"
    }
]
*/

 

크게 어렵진 않았다. 

근데 아직, 메소드 활용이 미숙했다. 

    let result = db.find(function (item) {
        return item.id === id;
    });

 

무언가를 찾는 find에 대해 복습. 배열 - 객체에서도 유용하게 쓸 수 있다. 기억해두자. 

 

Object.assign(result, editingObj)

 

객체를 수정할 때 쓰는 메소드 새로운 값을 추가할 수도 있고, 키값이 같을 경우에는 덮어 씌우기가 가능하다. 

 

// 아래 결과와 같이 출력되도록 함수를 완성해 보세요.

function getEvenNumbers(arr) {
    let evenNum =[];
    for (i = 0; i < arr.length; i++) {
        if (arr[i] % 2 === 0) {
            evenNum.push(arr[i])
        }
    }
    return evenNum
}

const result = getEvenNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
console.log(result); // [2,4,6,8,10]

 

살짝 고생했다. 변수 호이스트를 배운 게 조금 도움이 되었을 지도... 

인덱스가 딱히 필요가 없으니까, for문을 더 간단하게 만들 수 있을 지도 모른다. 

// 아래 결과와 같이 출력되도록 함수를 완성해 보세요.

function getEvenNumbers(arr) {
    let evenNum =[];

    arr.forEach(element => {
        if (element % 2 ===0) {
            evenNum.push(element)
        }
    });
    return evenNum
}

const result = getEvenNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
console.log(result); // [2,4,6,8,10]

 

쨘! 더욱 간단해졌군! 

 

알고리즘 문제를 풀 때, 웬만하면 const로 선언하고 let은 바뀌는 변수에만 할당하자. 

변수 이름.. 신경 쓰자. 

간단한 if 문은 삼항 연산자로 만들어낼 수 있는 듯 하다! 

 

알고리즘 숙제 1. 

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let answer = 0;
function solution(numbers) {
    const newarray = array.filter(function (item) {
        return !numbers.includes(item);
    });
    newarray.forEach((element) => {
        answer += element
    });
    return answer
}

 

으으 includes에 대한 공부가 부족했다.

includes에 대한 공부가 더 필요할 듯 하다. 

알고리즘 숙제 2

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

function solution(phone_number) {
    let answer;
    const lastfour = phone_number.length - 4
    const nonlastfour = phone_number.slice(0, lastfour)
    const star = '*'.repeat(nonlastfour.length)
    answer = phone_number.replace(nonlastfour, star)
    return answer
}

 

이번에 새로 배운 repeat를 써봤다! 

문법을 익혀두도록 하자. 

 

알고리즘 숙제 3

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요

function solution(arr, divisor) {
    let answer = [];
    arr.forEach((element) => {
        if (element % divisor === 0) {
            answer.push(element);
        }
    });
    answer = answer.sort((a, b) => a - b);
    if (answer.length === 0) {
        answer.push(-1);
    }
    return answer;
}

 

마지막 -1을 반환하는 거에서 조금 헤맸는데, 힌트 도움을 받아 배열 안에 아무것도 없으면 -1을 push하도록 로직을 했더니 금방 풀렸다. 

 

알고리즘 숙제 4

최소 직사각형을 구하는 문제 ( 문제가 너무 길어...) 

function solution(sizes) {
    let answer = 0;
    let width_array;
    let height_array;
    sizes.forEach((e) => {
        e.sort((a, b) => a - b);
    });
    width_array = sizes.map(function (item) {
        return item[0];
    });
    height_array = sizes.map(function (item) {
        return item[1];
    });

    const width = Math.max(...width_array);
    const height = Math.max(...height_array);
    answer = width * height;
    return answer;
}

 

마지막에 현지님의 도움을 받아... Math.max를 전수받았다... 배열 안에서 최댓값을 구하는 메서드. 기억해두자.