멋사 프론트엔드 스쿨 1기 - 22일차

서지영·2021년 11월 30일

멋사 프론트엔드스쿨 1기

목록 보기

26/64

오늘은 반복문에 대해서 배웠는데.. 역시나 어려웠다.
구구단이 나오는 반복문 정답을 알려주셨는데도 이해가 안 돼서, 멘붕 그 자체였고 멘토님께 SOS를 쳤다. 다행인지 호준강사님께서 강의 진도 빼는 것을 잠깐 멈추고 하나씩 천천히 대입하면서 설명을 해주셨고, 많은 분들의 도움으로 이해를 할 수 있었다.

솔직히 강의를 듣다보면 나만 이해 못하나? 라는 생각이 들어서 질문 하기가 꺼려졌는데 질문을 하고 알고 넘어가는 것이 좋다고 말씀해주셔서 조금 용기가 생겼다. (감동 받아서 눈물 날뻔..ㅜㅜ 사실 눈물 맺혔음..ㅋㅋㅋㅋㅋ)

그리고, 나와 같은 개발 초보를 위해 배웠던 내용을 같이 개념 정리하는 시간을 수업시간에 가졌는데 정말 도움이 되었다. 그리고 어제 딥다이브 공부를 하면서 정리했던 내용과 겹치는 부분도 있어서 조금 더 이해가 잘 되었다.

기초적인 부분이지만 그동안 베이스로 깔고 수업이 진행되었던 부분을 정리하면서 알려주셨고, 마지막 한시간 정도 스스로 공부한 내용을 첨부하여 마크다운으로 정리해보는 시간을 가졌는데 도움이 많이 되었다고 생각한다.

앞으로 이런 시간이 자주 있었으면 좋겠다. 그동안은 진도 따라가기 바빠서 이해가 되지 않아도 다음 것을 배우고 있는 듯한 느낌이었다..

여튼, 오늘 마크다운으로 정리한 내용은 아래와 같다.

변수(타입, typeof로 확인 가능)

Array(배열)
- 형태 : ['하나', '둘', '셋'], [100, 200, 300],
- 호출 : 변수명, 변수명[0], 변수명[0][0] (변수명[index])
String(문자열)
- 형태 : 'abcde', "abcde", abcde
- 호출 : 변수명, 변수명0
Number(숫자)
- 형태 : 10, 10.123
- 호출 : 변수명
Boolean(논리값)
- 형태 : true, false
- 호출 : 변수명

Object(객체)

형태 :

{
    "지역이름": "전국",
    "확진자수": 24889,
    "격리해제수": 23030,
    "사망자수": 438,
    "십만명당발생율": 48.0
}

호출 : 변수명, 변수명.지역이름, 변수명['지역이름'] (변수명.key, 변수명[key])

undefine : undefind
null : object
NaN : number

산술연산

+
-
/
*
**
%

논리연산

!
&&
||

비교연산

==
!=
>
>=
>
<=
<
===
!==

조건문

if
else if
else
switch

반복문

for
for in
for of
while
do while
forEach
break
continue

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

//예제
let a = [10, 20, 30, 40];
for (let i of a) {
    console.log(i);
}

//예제
let a = [10, 20, 30, 40];
for (let i in a) {
    console.log(i);
}

//예제
let x = 0;
while (x < 10) {
    console.log(x);
    x++;
}

//예제
let x = 0;
do {
    console.log(x);
    x++;
} while (x < 10)

//예제
let a = [10, 20, 30, 40];
a.forEach(e => console.log(e**2));

//예제
for (let i = 0; i < 10; i++) {
    if (i == 5) {
        break;
    }
}

//예제
for (let i = 0; i < 10; i++) {
    if (i == 5) break;
    console.log(i);
}

//예제
for (let i = 0; i < 10; i++) {
    if (i == 5) break;
    console.log(i);
}

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

함수

함수
- 여기서 x, y를 보통 한국에서는 인자
- 전달인자(아규먼트, argument) : 3, 5
- 매개변수(파라미터, parameter) : x, y
```
function add(x, y){
    return x + y;
}

add(3, 5)
```

콜백함수

function add(x, y) {
    return x + y;
}

function mul(x, y) {
    return x * y;
}

function cal(a, b){
    return a(10, 10) + b(10, 10);
}

cal(add, mul);

화살표함수

function add(x, y) {
    return x + y
}

let addArrow = (x, y) => x + y;

기명 함수

// 기명 함수
let aa = function sum(x, y) {
    return x + y
}

// 익명 함수인것 같지만 바뀜
let bb = function(x, y) {
    return x + y
}
// ES5에서는 빈 문자열이었는데 ES6에서 name 값을 가지는 것으로 바뀌었습니다.
let cc = (x, y) => x + y;

익명 함수

console.dir(function (x, y) {return x + y;})

선언

let x : 변수로 사용하세요.
var x : 전역에서 사용할 변수값 (실무에서 되도록 사용 X)
const x : 변하지 않는 상수값

전개표현식 사용

전개구문 사용 예제

function add(...x){
    return x;
}

add(1, 2, 3, 4, 5)

// 모던자바스크립트 예제(https://ko.javascript.info/rest-parameters-spread)
let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
Math.max(1, ...arr1, 2, ...arr2, 25); // 25

// 모던자바스크립트 예제(https://ko.javascript.info/rest-parameters-spread)
let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

블록스코프

아래 예제에서hojun이 not defined 되었다고 나옵니다.
참고 블로그 : https://velog.io/@fromzoo/%ED%95%A8%EC%88%98%EC%8A%A4%EC%BD%94%ED%94%84-vs-%EB%B8%94%EB%A1%9D%EC%8A%A4%EC%BD%94%ED%94%84
```
if (true){
    let hojun = 100;
}

console.log(hojun);
```

정규표현식

특정 패턴을 찾아낼 때 사용
연습사이트 : https://regexr.com/5nvc2

리터럴

리터럴은 코드에 보여지는 타입의 표현을 의미
예를 들어 원래 배열을 생성하려면
new Array(4,5,6); 이렇게 해야하지만 [4,5,6] 이렇게 만들수도 있는데요. 이렇게 배열을 의미하는 코드( [4,5,6] )를 배열의 리터럴 표현이라고 합니다.
마찬가지로 new Object() 의 리터럴 표현이 {}, new Number(5) 의 리터럴 표현이 5, new String("hello") 의 리터럴 표현이 "hello" 입니다.

사용자와 상호작용

prompt('hello')
comfirm('hello')
alert('hello')

★ 긍정의 한줄

말만 하고 행동하지 않는 사람은 잡초로 가득 찬 정원과 같다. - 하우얼 -

서지영

코딩코딩

이전 포스트

멋사 프론트엔드 스쿨 1기 - 21일차

다음 포스트

멋사 프론트엔드 스쿨 1기 - 22일차