멋쟁이 사자처럼_1201

수업

📖 ...

변수

---

날짜

2021년 12월 1일 수요일 기준

let d = new Date();

d
-> Wed Dec 01 2021 10:34:59 GMT+0900 (한국 표준시)

d.getMonth()
-> 11
//월은 0부터 시작


d.getDate()
-> 1
//일은 1부터 시작


d.getDay()
-> 3
//일요일부터 0


d.getHours()
-> 10

d.getMinutes()
-> 34

//실시간 아니고 new Date()했을 때에 시간.

d.getFullYear()
-> 2021

getYear() method대신 이거 사용!
getYear()를 사용하면 원래 년도만 반환한다고 한다. 예를 들어 1999년이면 99만 반환!
근데 이게 2000년이 넘어오면서 앞에 100이 붙어버리는 현상이 있어서 새로만든 메서드가 getFullYear이다.

getFullYear - Mozilla 참고링크:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear

array

배열을 만드는 여러가지 방법

let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일2 = new Array(5);
let 과일3 = new Array('사과', '수박', '복숭아', '딸기', '바나나');

과일[0] = '한라봉'
-> '한라봉'

과일
-> (5) ['한라봉', '수박', '복숭아', '딸기', '바나나']

배열은 이렇게↑ 바꿀 수 있지만,

let text = 'abcde'

text[0]
-> 'a'

text[0] = 'z'
-> 'z'

text
-> 'abcde'

문자는 이렇게↑ 호출해서 바꿀 수 없다.

과일[0][0] = 'ㅋㅋ'
-> 'ㅋㅋ'

과일[0][0]
-> '한'

이렇게도↑ 안된다!

다차원 배열

1반의 평균을 구할 때.

let 전교점수 = [

// 1반
[[10, 20, 30, 40, {name:'leehojun', age:10}],
[20, 30, 40, 50, 60]],
// 2반
[[10, 20, 30, 40, 50],
[20, 30, 40, 50, 60]],

];


let result = 0;
let 더해진수 = 0;

for (let r = 0; r < 전교점수[0].length;r++){
	for (let i = 0; i < 전교점수[0][r].length; i++){
		result += 전교점수[0][r][i];
		더해진수++;
	}
}

result/더해진수

shift

제일 앞에 삭제

unshift

제일 앞에 추가

splice

splice(2,3) 두번째부터 세개 가져오겠다.

얘는 과일을 건드린다.

slice

과일
-> (6) ['사과', '수박', '복숭아', '딸기', '바나나', '한라봉']

과일.slice(2,5)
-> (3) ['복숭아', '딸기', '바나나']

과일
-> (6) ['사과', '수박', '복숭아', '딸기', '바나나', '한라봉']

과일이 변하지는 않는다!

concat

let 과일 = ['복숭아', '딸기', '바나나'];
let 제주과일 = ['귤', '한라봉', '천혜향'];


제주과일.concat(과일)
-> (6) ['귤', '한라봉', '천혜향', '복숭아', '딸기', '바나나']

과일.concat(제주과일);
-> (6) ['복숭아', '딸기', '바나나', '귤', '한라봉', '천혜향']

제주과일
-> (3) ['귤', '한라봉', '천혜향']

과일
-> (3) ['복숭아', '딸기', '바나나']

sort

let data = [10, 20, 30, 11, 22, 25, 111, 8];

data.sort()
-> (8) [10, 11, 111, 20, 22, 25, 30, 8]

data
-> (8) [10, 11, 111, 20, 22, 25, 30, 8]

사전식 정렬..(골치아프다.)

array.sort((a,b) =>a-b); 오름차순
array.sort((a,b => b-a); 내림차순

sort - mozilla 참고링크:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

reverse

역순

1. sort는 사전식 정렬이다.
2. reverse는 역 정렬이 아니라 역순이다.

sort(정렬하고) + reverse (정렬한 걸 거꾸로) => 역정렬
reverse => 역순 (그냥 거꾸로..)

object

key: value

let person = {
name: '이호준',
age: 10,
height : 30,
weight : 40,
이력 : {'첫번째직장' : '하나', '두번째직장' : '둘'},
10 : 100
}


person.name
-> '이호준'

person['name']
-> '이호준'


person.'name'
-> 에러

person[name]
-> undefined


person.이력.첫번째직장
-> '하나'

person['이력'].첫번째직장
-> '하나'

person.10
-> 에러

person[10]
-> 100

person['10']
-> 100

entries

Object.keys(person)
-> (6) ['10', 'name', 'age', 'height', 'weight', '이력']

키만 뽑아낸다.

Object.values(person)
-> (6) [100, '이호준', 10, 30, 40, {…}]

밸류만 뽑아낸다.

둘다 뽑아야 할 때 entries를 쓴다.

let data = Object.entries(person)

data[0]
-> (2) ['10', 100]

data[1]
-> (2) ['name', '이호준']

data[2]
-> (2) ['age', 10]

data[3]
-> (2) ['height', 30]

entries는 반복문할 때 좋다.↓

for (let i of Object.entries(person)) {
console.log(i[0], i[1]);
}

혹은

for (let i of data) {
console.log(i[0], i[1]);
}

이렇게 하면 밑에 내용이 출력된다.

-> 10 100
-> name 이호준
-> age 10
-> height 30
-> weight 40

function

---

사용하는 이유

1. 재사용성

2. 아키텍쳐 파악

3. 유지보수

   ... 그 외에도 많다.

기본형식

function 함수하나(){
let x = 10;
console.log('함수하나 호출')
}

함수하나()
-> 함수하나 호출

함수스코프(function scope)

함수 안에서 선언된 변수는 함수밖으로 나오지 않는다.

• 밖에서 선언된 변수

let k = 10;

function viewk(){
	console.log(k);
}

function changek(){
	k += 10;
	console.log(k)
}

viewk()
changek()
viewk()

-> 10 20 20

블록스코프(block scope)

if (true) {
let y = 10;
}

console.log(y)

이러면 안나온다.

let yy = 100
if (true) {
	let yy = 10;
	console.log(yy);
}

console.log(yy);
-> 10 100

const도 마찬가지다.

if (true) {
	var yyy = 10;
	console.log(yyy);
}

console.log(yyy);
->10 10

scope
스코프(scope) : 변수에 접근할 수 있는 범위. (전역 스코프와 지역 스코프)
전역 스코프: 중괄호 {}의 밖, 전역 스코프에서 선언된 것들을 전역 변수라고 한다.
지역 스코프: 중괄호 {}의 안, 지역 스코프에서 선언된 것들을 지역 변수라고 한다.
블록 스코프 : 블록 {}이 생성될 때마다 새로운 스코프가 형성되는 것을 의미한다.
함수 스코프 : 함수 내부에서 선언한 변수는 지역 변수, 함수 외부에서 선언한 변수는 모두 전역 변수로 취급한다.

파라미터와 아규먼트

function add(a, b) {
return a + b;
}

add(10,20)

여기에서,
파라미터 : a, b
아규먼트 : 10, 20

파라미터 선언 아규먼트 실행

function add(a = 100, b = 200) {
return a + b;
}

add(undefined, 300)
-> 400

이러면 a는 유지되고 b자리에 300이 들어간다.

return

return은 함수를 종료함과 동시에 뱉어주는 것. 종료할 때 쓴다.

function add(a = 100, b = 200) {
return a + b;
console.log('jojo')
}

add()
-> 300

이렇게 되면 jojo가 안나온다. 그래서 종료하고 싶을 때는 리턴 이후로 아무것도 안 쓴다.

함수가 변수에 할당되는 것은 가능하다.

함수선언문

함수 선언문과 함수 표현식의 차이는 호이스팅 차이

1. 함수 선언식
   function 함수이름() {} -> 요렇게 선언해서 사용

2. 함수 표현식
   const 변수 = function () {} -> 요렇게 변수에 함수를 할당하여 사용

둘다 비슷비슷해보이지만 조금은 다르다. - 호이스팅
호이스팅에 대한 자세한 내용은 다음 시간에 다룰 예정

🎈 함수 선언문은 함수 호이스팅이 발생한다. 런타임 이전에 함수 객체가 생성이 되므로 함수를 일단 호출하고, 함수를 정의하는 것이 가능하다.

🎈 함수 표현식은 변수 호이스팅이 발생하며, undefined로 초기화된다. 그러므로 함수 선언문으로 선언한 함수는 함수를 정의한 후에 호출이 가능하다.

호이스팅 - mozilla 참고링크:
https://developer.mozilla.org/ko/docs/Glossary/Hoisting

콜백함수

콜백함수란 이름 그대로 '나중에 호출되는 함수'이다.
'호출방식'에 따른 구분이다.

화살표함수

let add30 = (a, b) => a + b;

add30(100, 100)
-> 200

생각

어제 나름 혼자 연습문제 2번까지 풀었다고 뿌듯해하면서 자신감 뿜뿜했는데, 오늘은 다시 자신감 하락이다.😂
매일매일 자신감 상승과 하락이 반복한다. 그래도 매일 하락이 아닌게 어디냐며 위로한다..! 자바스크립트에 치여서 헤롱헤롱하고 있으면 선생님이 너무 막막하면 복습하지 않고 내일 수업을 들어도 된다고 다독여주는게 너무 안심이 된다. 물론 그렇다고 아예 손을 놓고 놀 수는 없지만. 이번에 빌려온 자바스크립트 책이라도 읽으면서 다시 정리를 해봐야겠다.

느낀점

잘한점

• 자바스크립트 100제 스터디를 시작했다. 문제 자체가 그렇게 어렵지 않고, 그날 수업 때 나간 내용으로도 풀 수 있어서 가벼운 복습으로도 좋은 것 같다. 꾸준히 해서 이번달에 100제 끝내는게 목표!

고칠점

• 3시반쯤되면 집중력이 현저하게 떨어진다. 그러면 수업도 중간에 놓칠뻔하고, 이해도 더 잘 안 된다. 당이 떨어지는 것 같기도 하다. 근처에 당충전할 간식을 두고, 집중안되면, 열심히 따라치거나 직접 소리내서 말해보면서 따라갈 수 있도록 해야겠다.

계획

• 자바스크립트 스터디 밀리지 말고 참가하기, 그날 푼 문제에 대해 정리해서 기록하기
• 자바스크립트 어렵다고 절대 포기하지 말기, 어려우면 선생님께 도움 청하기!