본문 바로가기

자바스크립트 중급 강의12

setTimeout / setInterval - 자바스크립트 중급 강좌 #12 자바스크립트 중급 강좌 #12 setTimeout / setInterval setTimeout : 일정 시간이 지난 후 함수를 실행 - 첫번째 매개변수로 함수를 받는다. (함수는 왼쪽 예시처럼 선언된 함수를 전달해줄 수도 있고, 직접 그 안에서 코드를 작성해줘도 된다) - 두번째 매개변수로는 시간을 받는다. - setTimeout(fn, 3000); 3초 뒤에 첫번째 인자로 들어온 함수가 실행된다는 의미이다. setTimeout 콜백 함수에 인자 전달 - setTimeout의 첫번째 인자로 들어온 함수에 인자가 필요하다면 세번째 인자에 적어줌으로써 전달해줄 수 있다. - setTimeout(showName, 3000, 'Mike'); 3초 뒤에 showName 함수를 실행하는데, 이때 showName 함.. 2021. 12. 1.
클로저(Closure) 5분만에 이해하기 - 자바스크립트 중급 강좌 #11 자바스크립트 중급 강좌 #11 클로저(Closure) 5분만에 이해하기 어휘적 환경 (Lexical Environment) Lexical 환경 (내부 - 전역) - 현재 코드는 이제 막 시작하여 노란줄 위치에서 실행되고 있다고 가정하자. - 스크립트 내에서 선언된 변수들은 lexical 환경으로 올라간다. 이때, let으로 선언한 one 이라는 변수는 호이스팅된다. 단, 현재 위치에서는 초기화가 되어있지 않아서 사용할 수 없을 뿐이다. 반면, 함수 선언은 변수와 달리 바로 초기화 되기 때문에 현재 위치에서도 사용이 가능하다. (변수로 선언된 함수 표현식은 이렇게 사용할 수 없다) - 현재 위치에서는 변수는 선언되었지만 할당은 되어있지 않기 때문에 one은 초기값 undefined를 갖는다. 값이 unde.. 2021. 11. 2.
나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) - 자바스크립트 중급 강좌 #10 자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) 인수 전달 - 자바스크립트에서 함수의 인수는 갯수 제한이 없다. - name 하나만 인수로 받는 함수 showName 을 만들었다고 했을 때, Mike 하나만 인수로 전달하는 것이 아니라, Mike 와 Tom 두 개를 같이 인수로 전달해도 오류는 나지 않는다. 이 경우 Mike만 콘솔에 찍히게 된다. 인수로 아무것도 전달하지 않아도 오류는 나지 않는다. 단, undefined 가 찍힌다. - 이러한 특징을 갖는 '함수의 인수'에 접근하는 방법은 2가지가 있다. 첫째, arguments 를 이용하는 방법 둘째, 나머지 매개 변수를 이용하는 방법 arguments - arguments를 통해 .. 2021. 11. 1.
구조 분해 할당 (Destructuring assignment) - 자바스크립트 중급 강좌 #9 자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment) Destructuring assignment : 구조 분해 할당 구문 - 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 - split을 이용해서 문자열을 배열로 나눠주고, 각 요소를 user 1,2,3에 넣어줄 수도 있다. 배열 구조 분해 - 기본값 - 값이 할당되지 않은 c는 undefined이다. - 기본값을 설정해준 경우, 값이 undefined 이면 그 기본값을 사용하게 된다. - 그래서, a와 b는 배열에서 얻은 값 각각 1, 2이고, c는 undefined이기 때문에 기본값 5가 된다. 배열 구조 분해 : 일부 반환값 무시 - user1 이라는 변수로 첫번째.. 2021. 10. 31.
배열 메소드2 (sort, reduce) - 자바스크립트 중급 강좌 #8 자바스크립트 중급 강좌 #8 - 배열 메소드2 (sort, reduce) arr.sort() : 배열 재정렬 - 배열을 재정렬해준다. - 배열 자체가 변경되니 주의해야 한다. - sort() 는 함수를 인수로 받기 때문에 다양한 작업이 가능하다. - 순서대로 정렬해준다. - 위 예시에서는 정렬이 제대로 이루어지지 않았다. 13, 27, 5, 8 을 숫자가 아닌 문자로 정렬했기 때문이다. - 제대로 정렬하기 위해, 값을 비교해줄 수 있는 함수를 인수로 전달해주었다. - sort의 인수로 사용된 함수를 먼저 살펴보자. arr 를 돌면서 두 수 (a, b)를 비교해준다. a - b 가 양수이면 a 가 더 큰 값이므로 순서는 바뀐다. a - b 가 음수이면 b 가 더 큰 값이므로 순서는 바뀌지 않는다. 이런 식.. 2021. 10. 30.
배열 메소드1(Array methods) - 자바스크립트 중급 강좌 #7 자바스크립트 중급 강좌 #7 - 배열 메소드1(Array methods) arr.aplice arr.splice(n, m) : 특정 요소 지움 - arr.splice(1,2) : 인덱스 1부터 시작해서 2개를 지우라는 의미이다. 인덱스 1과 2에 위치한 2와 3이 지워져서 배열은 [1,4,5] 만 남게 된다. arr.splice(n, m, x) : 특정 요소 지우고 추가 - arr.splice(1, 3, 100, 200) : 인덱스 1부터 3개를 지우고 그 자리에 100과 200을 추가한다는 의미이다. 2,3,4 를 지운 뒤 arr 은 [1, 100, 200, 5] 가 된다. - arr.splice(1, 0, "대한민국", "소방관") : 인덱스 1부터 0개를 지우고 "대한민국"과 "소방관"을 추가하라는.. 2021. 10. 27.

티스토리툴바