자바스크립트 sort() 메소드 사용 방법 정리
·
개발/JavaScript
자바스크립트의 sort() 메소드는 특정 배열을 정렬하고, 정렬된 배열을 리턴합니다. 기본 정렬은 오름차순이며, 요소를 문자열로 전환한 다음 UTF-16 코드 단위 값을 따라 이를 비교합니다. 배열 정렬 먼저, 문자가 담겨 있는 배열을 정렬해보도록 하겠습니다. const fruits = ["pineapple", "cherry", "apple"]; fruits.sort(); console.log(fruits); // Array ["apple", "cherry", "pineapple"] 다음으로 숫자가 담겨 있는 배열을 정렬해 보도록 하겠습니다. const numbers = [1, 30, 4, 21, 10000]; numbers.sort(); console.log(numbers); // Array [1, 1..
자바스크립트 문자열로 함수를 실행하는 방법
·
개발/JavaScript
함수의 이름을 변수의 문자열로 저장하고, 이 문자열을 사용해 함수를 호출할 수 있습니다. 문자열로 과연, 함수를 어떻게 실행할 수 있을까요? 몇 가지 방법이 있습니다. 이 글은 How to execute a Javascript function when its name as a string 및 How to execute a JavaScript function when I have its name as a string의 예시 및 답변을 인용 및 정리한 글입니다. eval() eval을 사용하는 방법으로 간단하지만, 정말로 꼭 사용해야 하는 경우가 아니라면 사용하지 않는 것이 좋습니다. function fnLogin(userName, password) { console.log("User: " + userNam..
자바스크립트 메모이제이션 설명
·
개발/JavaScript
메모이제이션이란? 메모이제이션은 함수의 호출 결과를 캐싱하여, 동일한 아규먼트로 함수가 재호출될 때 저장해두었던 값을 리턴하는 방식입니다. 이는 자바스크립트 뿐만이 아닌, 여러 프로그램 언어에서도 흔하게 사용됩니다. 메모이제이션은 특별히 재귀 함수에서 유용하게 사용될 수 있습니다. function factorial(num) { if(num === 1) { return 1; } return num * factorial(num - 1); } factorial(3) factorial(3)을 통해 factorial(3), factorial(2), factorial(1)이 실행됩니다. 메모이제이션을 활용하면, 다음 번에 factorial(3) 실행 시 재귀 함수를 반복하지 않아도 됩니다. 또한 factorial(..
자바스크립트 arguments를 사용한 가변 인자 함수 활용
·
개발/JavaScript
자바스크립트의 aruments는 유사 배열 객체를 생성하는 내부 함수입니다. 이는 함수 호출 시, 함수에 선언된 매개 변수보다 더 많은 인자를 전달하는 경우 등에 활용할 수 있습니다. 유사 배열(Array-like)이란 arguments가 길이 속성과 프로퍼티를 갖고 있지만, 배열에서 사용할 수 있는 내장 메소드인 forEach(), map() 등을 사용할 수 없는 객체를 의미합니다. 먼저, arguments의 작동 방식을 이해해 보도록하겠습니다. 아래의 경우처럼, 각 함수에 할당한 인자가 arugments에 유사 배열 형태로 할당됩니다. function func1(a, b, c) { console.log(arguments[0]); // 1 console.log(arguments[1]); // 2 con..
자바스크립트 클로저 설명, 예시, 활용
·
개발/JavaScript
자바스크립트의 모든 함수는 함수가 선언된 당시의 주변 환경을 기억합니다. 여기서 주변 환경이란 함수가 정의된 상위 스코프, 즉 실행 컨텍스트를 의미합니다. 이는 함수를 호출하는 위치가 아닌, 선언된 위치에 따라 결정되며, 따라서 함수는 언제나 상위 스코프의 식별자를 참조하고, 이에 할당된 값을 변경할 수 있습니다. 클로저란? 클로저는 함수와 해당 함수가 참조하고 있는 주변 환경(렉시컬 환경)과의 조합이다. 다른 말로 하자면, 클로저 기능은 내부 함수에서 외부 함수 스코프에 접근할 수 있게 하는 것이다. 자바스크립트에서 클로저는 함수가 생성될 때마다, 함수가 생성되는 시점에 생성된다. A closure is the combination of a function bundled together (enclose..
자바스크립트 엄격 모드 "use strict" 차이점 설명
·
개발/JavaScript
'use strict';는 자바스크립트에서 코드를 엄격 모드(strict mode)로 실행하는 것입니다. 'use strict';를 사용하면 선언하지 않은 변수를 사용할 수 없으며, 변수 및 함수를 삭제할 수 없는 등 자바스크립트 엔진에 보다 엄격한 기준이 적용됩니다. 선언하지 않은 변수는 사용할 수 없는 것이 원칙입니다. 그러나 다음 예시에서 보듯 x는 var, let, const 의 키워드를 통해 선언되지 않았기 때문에 에러가 발생할 것 같지만, 실제로는 자바스크립트 엔진이 전역 객체에 프로퍼티를 생성하여 5가 출력됩니다. function foo() { x = 5; } foo(); console.log(x); // 5 이처럼 자바스크립트 엔진은 변수가 키워드를 통해 생성되지 않은 경우, 암묵적 전역(..
자바스크립트 타이머 setTimeout / setInterval 설명
·
개발/JavaScript
자바스크립트에서 함수를 호출하면 함수가 바로 실행됩니다. 그러나 setTimeout과 setInterval을 사용해 함수 실행을 조정할 수 있습니다. 자바스크립트 엔진은 싱글 스레드로, 타이머 함수는 비동기 처리 방식으로 작동합니다. setTimeout setTimeout은 특정 시간이 지난 뒤 함수를 호출합니다. 첫 번째 인자에 실행할 함수를, 두 번째 인자에 지연 시간, 이후 순서의 인자에는 필요한 인자를 전달할 수 있습니다. setTimeout(() => console.log('Hello!'), 1000); setTimeout(date => console.log(`Today: ${date}`), 1000, '2020-11-07'); setInterval setInterval은 특정 간격으로 함수를 ..
자바스크립트 프로토타입이란?
·
개발/JavaScript
프로토타입이란? 프로토타입(prototype)은 프로토타입 객체의 줄임말로 자바스크립트에서 상속을 구현하는 방식입니다. 모든 객체에는 하나의 프로토타입이 존재하며, 이는 모두 생성자 함수와 연결되어 있습니다. 프로토타입을 통해 자식 객체는 부모 객체의 프로퍼티를 자유롭게 사용할 수 있습니다. function Person (name) { this.name = name; } Person.prototype.age = 31; const person = new Person("Hwi"); console.log(person.age); // 31 프로토타입 체인 자바스크립트는 객체의 프로퍼티에 접근했으나 해당 프로퍼티가 존재하지 않는다면, 해당 객체의 부모 역할을 하는 프로토타입의 프로퍼티를 탐색합니다. 이러한 계층 ..