코딩앙마 [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 클로저(Closure) 스크립트 내에서 선언한 변수들이 Lexical 환경에 올라가게 된다. let으로 선언한 변수는 hoisting이 된다. 초기화가 되지 않았기 때문에 사용은 불가능하다. 함수 선언문은 변수와 달리 바로 초기화가 되기 때문에 위치에 상관없이 사용이 가능하다. 하지만 변수에 할당한 함수 선언문은 다음과 같이 사용이 불가능하다. 마지막 라인으로 가면서 함수가 실행되고 새로운 Lexical 환경이 생... JavaScript코딩앙마JavaScript [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - setTimeout, setInterval 앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다. 이번 포스팅에서는 setTimeout과 setInterval에 대해서 알아보도록 하자. 위의 코드는 3초 후에 실행이 되는 코드이다. setTimeout은 2개의 매개변수를 받는다. (일정 시간이... JavaScript코딩앙마JavaScript [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - call, apply, bind call 메서드는 모든 함수에서 사용할 수 있으며 this를 특정값으로 지정할 수 있다. call 메서드에 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것 처럼 사용할 수 있다. 함수가 매개변수를 받는 형태라면 call 메서드에 this로 사용할 객체와 이 후 사용할 매개변수의 값을 넣어준다. apply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다... 코딩앙마JavaScriptJavaScript Jest | 비동기 코드 테스트 제대로 테스트 되지 않음. ◽ [통과]하는 코드 3초 후에 이름을 알려주는 함수 작성 (fn.js) 사용하는 코드 작성 (fn.test.js) 테스트 npm test ◽ [실패]하는 코드 테스트 하니, 바로 통과 실패하는 코드로 수정 (fn.test.js) 테스트(npm test) 후, 결과 확인 ◽ 제대로 되지 않는 이유 fn.test.js 모두 제대로 테스트 됨. ◽ [실패]하는 코드 콜... jestFront-end Test코딩앙마Front-end Test [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 변수(var, let, const) 앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다. var는 한번 선언된 변수를 다시 선언할 수 있다. 하지만 let은 한번 선언된 변수를 다시 선언할 수 없다. var는 선언하기 전에 사용할 수 있다. 이유는 위의 코드는 다음과 같이 작동하기 때... JavaScript코딩앙마JavaScript 7.논리 연산자(AND, OR, NOT) 여러개 중 하나라도 true면 true 즉, 모든값이 false 일때만 false를 반환한다. 모든 값이 true면 true 즉, 하나라도 false면 false를 반환한다. false면 true 를 반환한다. 뒤에 아무리 길게 작성하여도 남자라는 정보가 true이므로 뒤의 설명을 읽어보지도 않고 참으로 간주한다! 마찬가지로 뒤에 아무리 길게 작성하여도 한국인 이라는 정보에서 이는 거짓이므로... JavaScriptTIL코딩앙마JavaScript JavaScript | 배열 메소드 1, 2 (Array methods) 예제 코드 특정 요소(n부터 m개) 지우고 추가(x) 예시 코드 m → 0 예시 코드 삭제된 요소 반환 예시 코드 n ~ (m-1)까지 반환 끝까지 반환 arr.slice() ⇒ 배열 복사 예시 코드 합쳐서 새 배열 반환 예시 코드 → 함수로 받음 1번째 → 해당 요소 2번째 → 인덱스 3번째 → 배열 예시 코드 배열에서 지정된 요소 → 1 번째 인덱스 반환 없으면 → -1 반환 인수가 2개... JavaScript메소드코딩앙마frontend배열배열 메소드arrayarray methodsJavaScript [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 배열 Method 1 앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다. 이번 포스팅에서는 여러가지 유용한 배열 메소드에 대해서 알아보도록 하겠다. 기존에 익히 알고 있던 메소드는 생략하도록 하겠다. push(): 뒤에 삽입 pop(): 뒤에 삭제 unshift(): ... 코딩앙마JavaScriptJavaScript [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 배열 Method 2 앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다. 이번 포스팅에서도 마찬가지로 나머지 배열 Method에 대해서 살펴보도록 하자. 이 Method는 배열을 재정렬할 때 사용하는 메소드이다. 하지만 배열 자체가 변경이 되기 때문에 주의해야 한다. ... 코딩앙마JavaScriptJavaScript 6.비교 연산자, 조건문(if,else) 우리는 비교 연산자를 수학시간에 다룬 경험이 있다. 자바스크립트에서도 이와 다르지 않게 비교 연산자를 사용할 수 있다! 자바스크립트에서도 이러한 비교연산자를 물어볼 수 있다! == 같다 할 때 왜 =를 두개 쓰고 != 같지않다(다르다) 할 때 왜 !를 쓸까? 변수를 배웠을때 =을 한개쓰면 값을 할당하는 것을 의미한다. a == 3(a는 3이다) 같은지 알고싶을 때 이렇게 비교연산자를 사용하면... TILJavaScript코딩앙마JavaScript 4.형변환 형변환이란 문자를 숫자형으로 숫자를 문자형으로 boolean을 문자형으로 바꾸는 등 그런데 만약 자료형이 다르면 의도치 않은 동작이 발생할 수 있다. 이러한 것을 막기 위해 형변환이 필요하다! 각 점수는 배웠던 prompt를 통해 입력받을 수 있다! 그랬더니 올바른 값이 나왔음을 확인할 수 있다. 그래서 숫자 90이 아닌 문자 90이었던 것이다. 즉 "90"과 "80"을 prompt로 입력받... TILJavaScript코딩앙마JavaScript 3.대화상자(alert,prompt,confirm) 오늘은 대화상자의 역할을 하는 alert, prompt, confirm에 대해 알아보도록 하자. alert 입력 받음 확인 받음 alert는 함수가 실행되면 메세지창을 띄우고 사용자가 확인버튼을 누르기 전까지는 계속 떠있게 된다! ex) 1.비밀번호가 틀렸습니다. prompt: 사용자에게 어떤 값을 입력받을 때 사용한다. prompt를 이용하여 이렇게 입력받을 수 있는 박스를 띄웠다. 주석 ... JavaScript코딩앙마TILJavaScript JavaScript | 클로저 (Closure) 스크립트 내에서 선언한 변수들이 어휘적 환경 (Lexical Environment) 에 올라감 초기화 x → 사용 불가 바로 초기화 → 사용 가능 (함수 표현식은 이렇게 못함) → 초기값 undefined를 가짐 → 사용 가능 순간, 새로운 어휘적 환경 (Lexical Environment) 생성 함수가 호출되는 동안, 2개의 Lexical 환경 을 가짐. 내부 Lexical 환경 (함수에서... closureJavaScript클로저코딩앙마JavaScript
[JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 클로저(Closure) 스크립트 내에서 선언한 변수들이 Lexical 환경에 올라가게 된다. let으로 선언한 변수는 hoisting이 된다. 초기화가 되지 않았기 때문에 사용은 불가능하다. 함수 선언문은 변수와 달리 바로 초기화가 되기 때문에 위치에 상관없이 사용이 가능하다. 하지만 변수에 할당한 함수 선언문은 다음과 같이 사용이 불가능하다. 마지막 라인으로 가면서 함수가 실행되고 새로운 Lexical 환경이 생... JavaScript코딩앙마JavaScript [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - setTimeout, setInterval 앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다. 이번 포스팅에서는 setTimeout과 setInterval에 대해서 알아보도록 하자. 위의 코드는 3초 후에 실행이 되는 코드이다. setTimeout은 2개의 매개변수를 받는다. (일정 시간이... JavaScript코딩앙마JavaScript [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - call, apply, bind call 메서드는 모든 함수에서 사용할 수 있으며 this를 특정값으로 지정할 수 있다. call 메서드에 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것 처럼 사용할 수 있다. 함수가 매개변수를 받는 형태라면 call 메서드에 this로 사용할 객체와 이 후 사용할 매개변수의 값을 넣어준다. apply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다... 코딩앙마JavaScriptJavaScript Jest | 비동기 코드 테스트 제대로 테스트 되지 않음. ◽ [통과]하는 코드 3초 후에 이름을 알려주는 함수 작성 (fn.js) 사용하는 코드 작성 (fn.test.js) 테스트 npm test ◽ [실패]하는 코드 테스트 하니, 바로 통과 실패하는 코드로 수정 (fn.test.js) 테스트(npm test) 후, 결과 확인 ◽ 제대로 되지 않는 이유 fn.test.js 모두 제대로 테스트 됨. ◽ [실패]하는 코드 콜... jestFront-end Test코딩앙마Front-end Test [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 변수(var, let, const) 앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다. var는 한번 선언된 변수를 다시 선언할 수 있다. 하지만 let은 한번 선언된 변수를 다시 선언할 수 없다. var는 선언하기 전에 사용할 수 있다. 이유는 위의 코드는 다음과 같이 작동하기 때... JavaScript코딩앙마JavaScript 7.논리 연산자(AND, OR, NOT) 여러개 중 하나라도 true면 true 즉, 모든값이 false 일때만 false를 반환한다. 모든 값이 true면 true 즉, 하나라도 false면 false를 반환한다. false면 true 를 반환한다. 뒤에 아무리 길게 작성하여도 남자라는 정보가 true이므로 뒤의 설명을 읽어보지도 않고 참으로 간주한다! 마찬가지로 뒤에 아무리 길게 작성하여도 한국인 이라는 정보에서 이는 거짓이므로... JavaScriptTIL코딩앙마JavaScript JavaScript | 배열 메소드 1, 2 (Array methods) 예제 코드 특정 요소(n부터 m개) 지우고 추가(x) 예시 코드 m → 0 예시 코드 삭제된 요소 반환 예시 코드 n ~ (m-1)까지 반환 끝까지 반환 arr.slice() ⇒ 배열 복사 예시 코드 합쳐서 새 배열 반환 예시 코드 → 함수로 받음 1번째 → 해당 요소 2번째 → 인덱스 3번째 → 배열 예시 코드 배열에서 지정된 요소 → 1 번째 인덱스 반환 없으면 → -1 반환 인수가 2개... JavaScript메소드코딩앙마frontend배열배열 메소드arrayarray methodsJavaScript [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 배열 Method 1 앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다. 이번 포스팅에서는 여러가지 유용한 배열 메소드에 대해서 알아보도록 하겠다. 기존에 익히 알고 있던 메소드는 생략하도록 하겠다. push(): 뒤에 삽입 pop(): 뒤에 삭제 unshift(): ... 코딩앙마JavaScriptJavaScript [JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 배열 Method 2 앱런칭 프로젝트와 앞으로 공부할 TypeScript, Nest.js를 위해서 JavaScript 문법에서 헷갈리는 부분이 몇군데 있어서 유튜브 코딩앙마님의 강의를 통해서 한번 정리를 해보려고 한다. 이번 포스팅에서도 마찬가지로 나머지 배열 Method에 대해서 살펴보도록 하자. 이 Method는 배열을 재정렬할 때 사용하는 메소드이다. 하지만 배열 자체가 변경이 되기 때문에 주의해야 한다. ... 코딩앙마JavaScriptJavaScript 6.비교 연산자, 조건문(if,else) 우리는 비교 연산자를 수학시간에 다룬 경험이 있다. 자바스크립트에서도 이와 다르지 않게 비교 연산자를 사용할 수 있다! 자바스크립트에서도 이러한 비교연산자를 물어볼 수 있다! == 같다 할 때 왜 =를 두개 쓰고 != 같지않다(다르다) 할 때 왜 !를 쓸까? 변수를 배웠을때 =을 한개쓰면 값을 할당하는 것을 의미한다. a == 3(a는 3이다) 같은지 알고싶을 때 이렇게 비교연산자를 사용하면... TILJavaScript코딩앙마JavaScript 4.형변환 형변환이란 문자를 숫자형으로 숫자를 문자형으로 boolean을 문자형으로 바꾸는 등 그런데 만약 자료형이 다르면 의도치 않은 동작이 발생할 수 있다. 이러한 것을 막기 위해 형변환이 필요하다! 각 점수는 배웠던 prompt를 통해 입력받을 수 있다! 그랬더니 올바른 값이 나왔음을 확인할 수 있다. 그래서 숫자 90이 아닌 문자 90이었던 것이다. 즉 "90"과 "80"을 prompt로 입력받... TILJavaScript코딩앙마JavaScript 3.대화상자(alert,prompt,confirm) 오늘은 대화상자의 역할을 하는 alert, prompt, confirm에 대해 알아보도록 하자. alert 입력 받음 확인 받음 alert는 함수가 실행되면 메세지창을 띄우고 사용자가 확인버튼을 누르기 전까지는 계속 떠있게 된다! ex) 1.비밀번호가 틀렸습니다. prompt: 사용자에게 어떤 값을 입력받을 때 사용한다. prompt를 이용하여 이렇게 입력받을 수 있는 박스를 띄웠다. 주석 ... JavaScript코딩앙마TILJavaScript JavaScript | 클로저 (Closure) 스크립트 내에서 선언한 변수들이 어휘적 환경 (Lexical Environment) 에 올라감 초기화 x → 사용 불가 바로 초기화 → 사용 가능 (함수 표현식은 이렇게 못함) → 초기값 undefined를 가짐 → 사용 가능 순간, 새로운 어휘적 환경 (Lexical Environment) 생성 함수가 호출되는 동안, 2개의 Lexical 환경 을 가짐. 내부 Lexical 환경 (함수에서... closureJavaScript클로저코딩앙마JavaScript