천천히 느리게 천천히 느리게

1. 비동기 방식 ◎ 비동기 방식이란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말한다. 기다리는 과정에서 다른 함수를 호출할 수 있다. ※ 동기적 방식 : 작업이 끝날 때까지 다른 작업을 할 수 없다. 동기적과 비동기적 방식을 밑의 그림처럼 표현할 수 있다. 동기적은 1번이 끝날 때까지 2번을 시작하지 못한다. 1번이 끝나야 비로소 2번이 실행되고, 2번이 끝나야 3번을 시작할 수 있다. 하지만 비동기는 1번이 끝나기 전에 2번의 코드를 실행할 수 있고, 2번이 끝나기 전에 3번을 시작할 수 있다. setTimeout() 함수가 대표적인 비동기 함수이다. setTimeout()은 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행하는 것..

1. Arrow function이란 ◎ 화살표 함수(Arrow functioin)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있는 ES6문법 중 하나이다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 2. 문법 ◎ 이름이 없는 함수의 기본적인 문법을 봐보자. ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았다. 그리고 =>(arrow)가 추가되었다. // ES5 function(){} // ES6 () => {} ◎ 이름이 있는 함수를 만들 때는 다음과 같다. // ES5 function getName() {} // ES6 const getName = () => {} 호출할 때는 둘 다 같다. getName(); ◎ 화살..

1. 함수 ◎ 함수는 특정 코드를 하나의 명령으로 실행 하 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같은 코드를 작성한다. 위의 작업을 함수로 만들어 보자. 함수를 만들 때는 function 키워들 사용하며, 함수에서 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 부른다. 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정할 수 있다. 2. 문법 ◎ 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 한번 함수를 정의하는 문법을 봐보자. function 함수이름() { 실실행할 코드 작성 return; } function 키워드로 시작한다. 함수 이름을 지어준다. 함수를 알리는 ( )를 열고 닫는다. 함수의 시작..

1. Javascript의 객체 ◎ 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해 준다. 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다. 2. 선언방식 ◎ 객체를 선언할 때에는 { } 문자 안에 원하는 값들을 넣어주면 됩니다. const 객체이름 = { property이름1(key) : property값(value), property이름2(key) : property값(value) }; 객체는 { } (중괄호)로 감싸져 있다. 키 : 원하는 값 형태로 key 이름은 중복될 수 없다. key와 value값 사이에 :으로 구분한다. key를 추가할 때는 , 를 붙여준다. key 값에는 어느 type이나 가능하다.(string, number..

1. scope 란 ◎ javascirpt에서 scope란, 변수가 어디까지 쓰일 수 있는지의 범위를 의미합니다. 변수를 선언하여도 ***is not defined라는 에러 메시지를 보는 것도 scope와 관련된다. 어떤 변수는 여기저기 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있습니다. 이런 개념이 scope이다. 2. Block Scope(블록 스코프) ◎ scope의 개념을 알기 전에 알아야 할 개념은 block입니다. block이란 중괄호({ })로 감싸진 것을 의미합니다. 코드를 보면서 block scope가 어떤 의미인지 알아보자. function의 내부는 하나의 block이다. for문도 하나의 block이다. if문의 {}도 하나의 block이다. 블록 내부에서 변수가 ..

1. 문제 addFirstAndLast 함수 안에 작성해주세요. addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다. addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요. 문제를 보고 금방 할 수 있을 거 같았다. 첫 번째 요소는 어떤 배열이든 array[0]이고, 마지막 값은 array[마지막 인덱스] 이기 때문이다. 처음 작성한 코드를 살펴보자. 코드를 살펴보면 이와 같다. 숫자로 이루어진 배열을 array 변수에 담는다. addFirstAndLast 함수를 호출하는데 인자로 array를 전달한다. addFirstAndLast 함수에 매개변수를 myArray로..

1. 객체 생성자 ◎ 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값이나 함수들을 구현할 수 있게 해 준다. 다음 코드를 확인해보자. 위의 코드 결과는 다음과 같다. ※ 객체 생성자를 사용할 때 주의사항! 객체 생성자를 사용할 때는 함수의 이름을 대문자로 시작한다. 새로운 객체를 만들 때는 new 키워드를 앞에 사용해야 한다. 위의 코드를 살펴보면 dog가 가지고 있는 say 함수와 cat이 가지고 있는 수행하는 코드가 똑같음에도 객체가 생성될 때마다 함수도 새로 만들어져서 this.say로 설정이 되고 있다. 이처럼 같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용할 수 있는데 이게 바로 프로토타입이다. 2. 프로토타입 ◎ ES6 이전까지는 자바스크립트에 클..

◎ Javascript에서 배열을 쉽게 다룰 수 있는 내장 함수들이 존재한다. 종류가 많아서 외우지는 못해서 이해하고 사용하면 좋을 거 같다. 1. forEach 배열 안에 원소들을 가지고 작업을 일괄적으로 하고 싶을 때 사용하는 내장 함수 배열의 요소를 반복한다. 각 요소에 대해 콜백을 실행한다. 값을 반환하지 않는다. 2. map 배열이 있을 때, 배열 안에 원소를 변환할 때 사용하는 내장 함수. 3. indexOf 배열에서 원하는 항목이 몇 번째 원소인지 확인하는 내장 함수. ※ Javascript 배열의 인덱스는 0부터 시작한다. 4. findIndex 문자열이나 boolean 인지 확인할 수 있다. 객체 또는 조건으로 찾는 데 사용한다. 파라미터는 함수 특정 조건을 확인해서 일치한다면 일치하는 ..