[패스트캠퍼스 수강후기] 프론트엔드 강의 53회차 미션

오늘은 40강에서 반복문과 함수강의 2개까지 들었다

일정이 있어서 오늘은 일찍 열두시넘기자 마자 듣는다ㅠㅠ

 

반복문 literation statements

//반복문이 없다면

console.log('안녕하세요');

console.log('안녕하세요');

console.log('안녕하세요');

console.log('안녕하세요');

console.log('안녕하세요');

 

//for문을 사용한다면, (보통 유한한 횟수만큼 반복해야 할 때)

for (let i = 0; i < 5, i++) {

console.log('안녕하세요');

}

 

for(초기화, 반복조건, 반복이 된 후 실행되는 코드) {

 반복이 되는 코드 블럭

}

for(a; b; c) {

 d

 }

 e

a > d > c > b > d > c > b > e

 

//초기화하면서 선언된 변수를 중괄호 안 반복 블럭에서 사용할 수 있음

for (let i = 0; i < 5, i++) {

console.log('안녕하세요', i);

}

 

for (let i = 0; j = 5; i < 5, i++) {

console.log('안녕하세요', i, j);

}

 

for (let i = 0; j = 2; i < 5, i++, j=j*j) {

console.log('안녕하세요', i, j);

}

 

 

//반복문을 즉시 종료하고 싶을 떄는 반복되는 블럭안에서 break;실행

for (let i = 0; i < 5, i++) {

  console.log(i);

  if (i > 2) {

    break;

 }

console.log('안녕하세요', i);

}

 

//반복되는 블럭 안에서 continue; 를 만나면 거기서 해당블럭은 종료

같은 다음 반복이 있으면, 다음 반복으로 넘어감

for (let i = 0; i < 5, i++) {

 console.log(i);

  if (i < 2) {

    continue;

 }

console.log('안녕하세요', i);

}

 

(결과)

안녕하세요 0

안녕하세요 1

안녕하세요 2

안녕하세요 3

안녕하세요 4

안녕하세요 0 5

안녕하세요 1 5

안녕하세요 2 5

안녕하세요 3 5

안녕하세요 4 5

안녕하세요 0 2

안녕하세요 1 4

안녕하세요 2 16

안녕하세요 3 256

안녕하세요 4 65536

0

안녕하세요 0

1

안녕하세요 1

2

안녕하세요 2

3

0

1

2

안녕하세요 2

3

안녕하세요 3

4

안녕하세요 4

for(; ; ){

 d

}

 

//for무한루프

for(;;) {

 console.log('안녕하세요');

 if (Math.random() * 100>90) {

   break;

 }

}

(결과)

끝없는 안녕하세요...

 

while(조건) {

 조건이 거짓이 될 때까지 반복실행

}

 

//while무한루프

while(true) {

 console.log('안녕하세요');

 if (Math.random() * 100>90) {

   break;

 }

}

 

do {

 조건이 거짓이 될 때까지 반복실행

} while(조건);

 

//do while반복문

do {

 console.log('안녕하세요');

} while (Math.random() * 100<=90);

//for of (iterable)

for(const i of [1, 2, 3]) {

 console.log(i);

}

 

//for in (모든 프로퍼티)

object.prototype.test = function() {};

 

for (const i in { a: 1, b:2, c:3}) {

 console.log(i)

}

(결과)

1

2

3

a

b

c

test

 

함수 function

function hello() {}함수를 만들 때 사용하는 키워드

 

//function

//이름이 hello1인 함수를 선언

function hello1 () {

 console.log('hello1');

}

console.log(hello1, type of hello1);

(결과)

[function: hello1] ]' function'

 

//함수의 매개변수, 함수를 호출할 때 값을 지정

function hello2(name) {

  console.log('hello2', name);

}

 

//함수의 리턴, 함수를 실행하면 얻어지는 값

function hello3() {

  return 'hello3 ${name}';

}

 

console.log(hello3('mark'));

(결과)

hello3 mark

 

const hello = function () {}

함수를 만들 때 사용하는 키워드

 

//function

//이름이 hello1인 함수를 선언

const hello1 = function() {

 console.log('hello1');

}

console.log(hello1, type of hello1);

(결과)

[function: hello1] ]' function'

 

//함수의 매개변수, 함수를 호출할 때 값을 지정

const hello2 = function (name) {

  console.log('hello2', name);

}

 

//함수의 리턴, 함수를 실행하면 얻어지는 값

const hello3 = function(name) {

  return 'hello3 ${name}';

}

 

console.log(hello3('mark'));

(결과)

hello3 mark

 

 

선언적 function과 익명함수를 만들어 변수에 할당

차이점

 

function hello1 () {

 console.log('hello1');

}

 

hello1();

(결과) hello 1

 

hello1();

 

function hello1 () {

 console.log('hello1');

}

(결과) hello 1

 

hello1();

hello2();

 

function hello1 () {

 console.log('hello1');

}

 

var hello2 = function () {

 console.log('hello2');

};

(결과)hello2 is not function

 

console.log('hello2');

 

hello1();

hello2();

 

function hello1 () {

 console.log('hello1');

}

 

var hello2 = function () {

 console.log('hello2');

};

(결과)undefined

=

var hello2;  //호이스팅

console.log('hello2');

 

hello1();

hello2();

 

function hello1 () {

 console.log('hello1');

}

 

hello2 = function () {

 console.log('hello2');

};

 

var hello2;

console.log('hello2');

 

hello1();

//hello2();

hello3();

function hello1 () {

 console.log('hello1');

}

 

hello2 = function () {

 console.log('hello2');

};

 

const hello3 = function() {

 console.log('hello3');

}

(결과) hello3은 not defined = 언디파인도 아님

 

 

const hello = new function(); 생성자 함수로 함수를 만드는 방법

//new Function (/* 인자1, 인자2... 함수의 바디*/);

const sum new Function ('a', 'b', 'c', 'return a+b+c');

console.log(sum(1,2,3)); 

(결과)6

console.log(sum(1,2,3)); 

const sum new Function ('a', 'b', 'c', 'return a+b+c');

console.log(sum(1,2,3)); 

(결과) sum is not defined

 

function과 new function 차이점

{

const a = 1;

 

const test = new function('return a');

 

console.log(test());

}

(결과) a is not defined / global.a =0;을 앞에 추가하면 정상실행

 

global.a =0;

 

{

const a = 1;

const test = new function('return a');

console.log(test());

}

{

const a = 2;

const test = function() {

 return a;

};

console.log(test());

}

(결과) 0 2

 

 

() => {} arrow function (es6)

//arrow함수를 만들어 이름이 hello1인 변수에 할당

const hello1 = () => {

 console.log('hello1');

}

 

//함수의 매개변수, 함수를 호출할 때 값을 지정

//매개변수가 하나일 때 괄호 생략가능

const hello2 = name => {

 console.log('hello2', name);

}

const hello3 = (name, age) => {

 console.log('hello3', name, age);

};

 

//함수의 리턴, 함수를 실행하면 얻어지는 값

const hello4 = name => {

  return 'hello4 ${name}';

}

 

const hello5 = name => 'hello5 ${name}';

 

 

 

 

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스