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