TIL 20230609

Event

~13:00 JS 팀과제 제출 
~18:00 JS 객관식 문제 풀어보기 
19:00 ~ ERD, API특강
20:20 ~ JS 특강 

생활 계획표

 

AM 6:00 체조, 아침식사, 산책, 샤워, 설거지, 세탁

AM 8:00 입실, TIL 리뷰, 노드 시간표 및 오늘 목표 체크

AM 8:30 공부 시작

PM 1:00 ~ 2:00 점심 식사

PM 6:00 ~ 7:00 저녁식사

PM 7:00 TIL, WIL 제출

PM 9:00 퇴실 (카톡 확인)

PM 11:00 취침

오늘 목표

TIL 작성

TIL 리뷰

자바스크립트 1주차, 2주차 강의노트

프로그래머스 1문제 이상 풀고 인증

주의! 팀 프로젝트는 끝났으니 더 이상 커밋하지 말 것

오늘 한 것

TIL 작성

TIL 리뷰

자바스크립트 1주차, 2주차 강의 노트

프로그래머스 1문제 이상 풀기

중복된 숫자 개수 https://verdantjuly.tistory.com/167
짝수 홀수 개수 https://verdantjuly.tistory.com/169
문자 반복 출력하기 https://verdantjuly.tistory.com/170
특정 문자 제거하기 https://verdantjuly.tistory.com/171
특수문자 출력하기 https://verdantjuly.tistory.com/172
진료 순서 정하기 https://verdantjuly.tistory.com/173
덧셈 식 출력하기 https://verdantjuly.tistory.com/174
최댓값 구하기 (1) https://verdantjuly.tistory.com/175

점의 위치 구하기 https://verdantjuly.tistory.com/176

 

0. 문자열[인덱스]

let num = '012'
let arr = [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']]
console.log(arr[num[0]])

1. prev next

알게된 것

sort 에서 매개변수를 a,b로 하는 것 보다는 명확히 해 주는 게 좋다.

 

2. sort 에서의 return -1  return 0 return 1

알게된 것

perv, next를 비교할 때 

return > 0 : [next, prev]

return < 0 : [prev, next]

return = 0 : 원래 순서 유지

    movies.sort(function (prev, next) {
        if (next.love === prev.love) {
        // title은 오름차순 정렬
            if (prev.title < next.title) {
                return -1;
            } else if (prev.title > next.title) {
                return 1;
            } else {
                return 0;
            }
        } else {
        // love는 내림차순 정렬
            return next.love - prev.love;
        }
    })

참고자료 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 

 

3. 댓글 최신순으로 댓글창에 붙이기

문제 

appendChild를 이용할 경우 순서대로 댓글이 붙는다.

시도

다른 방법이 있을 것 같아 인터넷에 찾아봤다.

해결

insertBefore(붙일 것, 붙이는 기준)를 사용한다.

이때 부모의 firstChild를 가져와서 거기에 이어서 계속 붙일 수 있다.

let theFirstChild = commentList.firstChild;
commentList.insertBefore(commentElement, theFirstChild);

알게 된 점

insertBefore(붙일 것, 붙이는 기준)

이때 부모의 firstChild를 가져와서 거기에 이어서 계속 붙일 수 있다.

 

4. 연산자

!==

불일치 연산자는 자료형까지 비교

 

< <= > >=

숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

 

5. 삼항연산자 

조건식 ? true일 때의 값 : false일 때의 값

 

6. typeof null

typeof null의 경우 "object"를 반환하는 버그가 있습니다.

 

7. switch 문

let name = "영희";
switch (name) {
    case "다영":
        console.log("이름이 다영입니다.")
        break;
    case "철수":
        console.log("이름이 철수입니다.")
        break;
    case "영희":
        console.log("이름이 영희입니다.")
        break;
    default:
        console.log("해당하는 이름이 없습니다.");
        break;
}

switch문은 변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택하여 해당하는 코드를 실행합니다.

default는 모든 경우에 맞지 않는 경우에 실행되는 코드를 작성합니다.

 

8. 단축 평가

or 연산자(|| 연산자)는 앞에 있는 값이 falsy 하면 뒤에 값을 출력합니다. 

let x;
let y = x || 10;

console.log(y);

 

9. 스코프

함수 안에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.

if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있습니다.

 

10. for...in문

let person = { name: "John", age: 30, gender: "male" };

for (let key in person) {
  console.log(key + ": " + person[key]);
}

for...in문은 객체의 프로퍼티를 순서대로 접근할 수 있습니다.

 

11. while 문

while문은 조건식이 참인 경우에만 코드를 반복해서 실행합니다.

12. do...while문

do...while문을 사용하여 0부터 9까지의 숫자를 출력합니다. do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정합니다.

 

13. continue문

건너 뛰고 다음 반복을 실행한다.

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

14. 객체 = Object

1) 생성자 함수를 통한 객체 생성

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

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

2) 객체 속성에 접근

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

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

3) Object.keys() 를 이용해 key 값을 전부 가져온다.

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

let keys = Object.keys(person);

console.log(keys);   // ["name", "age", "gender"]

4) Object.values() 를 통해 value 값을 전부 가져온다.

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

let values = Object.values(person);

console.log(values);   // ["홍길동", 30, "남자"]

5) Object.entries() 를 이용하여 key:value를 2차원 배열로 반환한다.

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

let entries = Object.entries(person);

console.log(entries);

6) Object.assign() 을 이용하여 새로운 객체 newPerson을 만든다.

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

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }

7) JSON.stringify() 객체를 문자열로 변환

- 객체를 문자열로 변환하여 비교

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

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

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

8) 객체 병합

전개 연산자 (스프레드 문법) ...

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

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

15. 일급 객체로서의 함수

- 변수를 함수에 할당

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

- 함수를 인자로 다른 함수에 전달 (콜백함수: 어떠한 함수의 매개변수로 쓰이는 함수)

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

 

- 함수를 반환

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

 

- 객체의 프로퍼티로 함수를 할당

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

- 배열의 요소로 함수를 할당

const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

16. Map

• new Map() – 맵을 만듭니다.
• map.set(key, value) – key를 이용해 value를 저장합니다.
• map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
• map.delete(key) – key에 해당하는 값을 삭제합니다.
• map.clear() – 맵 안의 모든 요소를 제거합니다.
• map.size – 요소의 개수를 반환합니다.

- for of 반복문

컬렉션 객체가 [Symbol.iterator] (반복자) 속성을 가지고 있어야만 합니다

iterator : 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조

var iterable = [10, 20, 30];

for (var valueof iterable) {
  console.log(value);// 10, 20, 30
}

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

17. Set

Set은 고유한 값을 저장하는 자료 구조입니다.

Set은 값만 저장하며, 키를 저장하지 않습니다.

Set은 값이 중복되지 않는 유일한 요소로만 구성됩니다.

Set을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

 

• 값 생성 const mySet = new Set()
• 값 추가 mySet.add('value1');
• 값 검색 mySet.has('value1') // true 또는 false 출력
• 값을 반복  for (const value of mySet.values()) { console.log(value); }
• 값 삭제  set.delete(2)
• 모든 값 제거 set.clear()
• Set 크기 mySet.size

---

정리 

sort 에서 매개변수를 a,b로 하는 것 보다는  perv next 로 명확히 해 주는 게 좋다.

 

perv, next를 비교할 때

return > 0 : [next, prev]

return < 0 : [prev, next]

return = 0 : 원래 순서 유지

 

insertBefore(붙일 것, 붙이는 기준)

이때 부모의 firstChild를 가져와서 거기에 이어서 계속 붙일 수 있다.

 

 

소감

다른 사람의 프로젝트를 보고 많이 배우게 되는 것 같다. 혼자 하면 우물안의 개구리가 된다.

지금까지 너무 나태하게 살았다... 웹종반 배울 때 마음으로 돌아가자.