자바스크립트에서 함수 표현식(Function Expression)의 개념을 제대로 이해하려면, 먼저 함수 선언(Function Declaration)과 함수 표현식의 차이점을 알아야 합니다.함수 선언(Function Declaration)자바스크립트에서는 function 키워드를 사용해 함수를 선언합니다. 함수를 정의할 때는 function 키워드 뒤에 고유한 함수 이름, 매개변수 목록(비어 있어도 됨), 그리고 중괄호로 감싼 실행문 블록을 작성합니다.다음은 예시입니다.function sayHello(name, age) {
Function() 생성자란?JavaScript의 Function() 생성자는 문자열 형태의 인자를 원하는 만큼 받을 수 있습니다. 이때 마지막 인자는 함수의 본문(body) 역할을 하며, 그 안에는 세미콜론(;)으로 구분된 여러 JavaScript 문장이 포함될 수 있습니다.예를 들어 두 개의 매개변수 x와 y를 받아 곱셈 결과를 반환하는 함수는 다음과 같이 정의할 수 있습니다.var func = new Function(x, y, return x*y;);앞부분의 문자열들은 각각 함수의 매개변수 이름이 되고, 마지막 문자열이 실제
자바스크립트에서 괄호 ()로 감싸진 함수를 즉시 실행 함수 표현식(Immediately Invoked Function Expression, IIFE) 또는 즉시 실행 함수(Self Executing Function)라고 부릅니다.함수를 괄호로 감싸는 목적은 네임스페이스를 형성하고 멤버 함수의 가시성(접근 범위)을 제어하기 위해서입니다. 코드 전체를 함수 스코프 내부로 감싸기 때문에 다른 라이브러리와의 이름 충돌 가능성을 크게 줄일 수 있습니다. 이러한 패턴을 바로 IIFE(Immediately Invoked Function Expr
JavaScript는 try...catch...finally 구문을 사용하여 예외(에러)를 처리합니다. 최신 버전의 JavaScript에는 강력한 예외 처리 기능이 추가되었으며, try...catch...finally 블록과 throw 연산자를 함께 사용해 다양한 오류 상황에 대응할 수 있습니다.프로그래머가 직접 생성한 예외나 런타임(runtime) 오류는 catch로 잡아낼 수 있지만, JavaScript 문법 오류(syntax error)는 예외 처리로 잡을 수 없다는 점을 기억하세요.기본 문법try...catch...final
JavaScript에서 RegExp(정규 표현식)를 사용해 문자열을 교체하려면 문자열 객체의 replace() 메서드를 활용하면 됩니다. 이 메서드는 첫 번째 인수로 찾고자 하는 패턴을, 두 번째 인수로 교체할 새 문자열을 받습니다.정규식 플래그 활용하기정규 표현식 패턴 뒤에 플래그를 추가하면 검색 조건을 세부적으로 제어할 수 있습니다. 예를 들어 /i 플래그를 붙이면 대소문자를 구분하지 않고 일치 여부를 검사하므로, 원본 문자열의 표기와 관계없이 안정적으로 매칭할 수 있습니다.예제아래 코드를 실행하면 JavaScript RegEx
return 문이란 무엇인가?자바스크립트에서 함수는 선택적으로 return 문을 가질 수 있습니다. 함수가 처리한 결과값을 외부로 반환하고 싶다면 return 문이 반드시 필요합니다. 이 문장은 항상 함수 본문의 마지막에 위치해야 하며, return 문이 실행되는 순간 함수는 즉시 종료되고 그 뒤에 작성된 코드는 더 이상 실행되지 않습니다.또한 return 문 뒤에 값을 지정하지 않으면 함수는 자동으로 undefined를 반환합니다. 이 점을 기억해 두면 디버깅 시 많은 도움이 됩니다.기본 예제아래 코드는 두 개의 문자열을 받아 하
화살표 함수(Arrow Function)는 이름 그대로 코드의 줄 수를 크게 줄여주는 기능입니다. 문법에서 => 기호가 굵은 화살표(fat arrow)처럼 보인다고 해서 팻 애로우 함수(Fat Arrow Function)라고도 불립니다. 또한 일반 함수를 작성할 때마다 function 키워드를 반복해서 써야 하는 번거로움을 없애주어 코드를 훨씬 간결하게 만들어 줍니다.화살표 함수의 기본 문법화살표 함수의 기본적인 문법은 다음과 같습니다.argument => expression매개변수가 두 개 이상일 경우에는 아래와 같이
ES6(ES2015)에서는 개발자의 작업을 한결 수월하게 만들어 주는 나머지 매개변수(Rest Parameter)가 도입되었습니다. 나머지 매개변수는 세 개의 점 ...으로 표시하며, 일반 매개변수 이름 앞에 위치합니다. 나머지 매개변수란? 함수를 호출할 때 전달되는 인자의 개수가 정해져 있지 않은 경우, 나머지 매개변수를 활용하면 여러 개의 인자를 하나의 배열로 묶어 손쉽게 처리할 수 있습니다. 기존의 arguments 객체 방식보다 직관적이고 가독성이 뛰어나 실무에서 널리 사용됩니다. 예제 코드 다음 코드 예제를 통해 나머지
JavaScript에서 배열의 특정 요소를 삭제하려면 indexOf() 메서드로 해당 요소의 인덱스(위치)를 먼저 찾은 뒤, splice() 메서드를 사용해 그 위치의 요소를 제거하는 방식이 가장 기본적입니다.1단계: indexOf()로 요소의 인덱스 찾기indexOf() 메서드는 배열에서 찾고자 하는 값이 처음 등장하는 인덱스를 반환합니다. 만약 해당 값이 배열에 존재하지 않으면 -1을 반환하므로, 삭제 전에 반드시 이 값을 확인해야 안전하게 처리할 수 있습니다.2단계: splice()로 요소 삭제하기splice(index, de
JavaScript에서 배열의 최소 요소와 최대 요소를 구하려면 Math.min()과 Math.max() 메서드를 사용하면 됩니다. 다만 이 메서드들은 개별 숫자 인수를 받기 때문에, 배열을 그대로 전달할 수 없습니다.apply()를 활용한 방법배열의 요소들을 인수로 전달하려면 Function.prototype.apply()를 활용하는 것이 가장 간단한 방법입니다. apply()는 두 번째 인수로 배열을 받아 해당 요소들을 개별 인수처럼 펼쳐서 전달해 주기 때문입니다.다음 예제 코드를 실행하여 배열에서 최댓값과 최솟값을 찾아보세요.
2차원 배열은 하나 이상의 차원을 가진 배열을 의미합니다. 예를 들어 첫 번째 요소는 myarray[0][0], 두 번째 요소는 myarray[0][1]과 같이 행과 열의 두 개의 인덱스를 사용하여 각 요소에 접근할 수 있습니다.JavaScript에서 2차원 배열을 만들려면 먼저 외부 배열을 생성한 뒤, 반복문을 통해 각 인덱스에 새로운 내부 배열을 할당하는 방식을 사용합니다. 아래 예제 코드를 실행하여 직접 확인해 보세요.예제 코드<html> <body> &n
JavaScript에서 배열에 포함된 중복 값을 찾거나 제거하고 싶다면, 객체(Object)를 활용하는 간단한 기법을 사용할 수 있습니다. 아래 예제 코드를 실행하면 배열에서 중복된 요소가 걸러진 결과를 확인할 수 있습니다.예제 코드<html> <body> <script> function removeDuplicate
JavaScript에서 배열에 담긴 여러 항목 중 특정 값을 가진 항목만 골라서 제거해야 하는 경우가 자주 있습니다. 이럴 때는 크게 두 단계로 처리하면 됩니다. 먼저 indexOf() 메서드로 제거하고 싶은 값의 인덱스(위치)를 찾은 뒤, splice() 메서드를 사용해 해당 위치의 요소를 삭제하는 것입니다.동작 원리indexOf(값) — 배열에서 해당 값이 처음 등장하는 인덱스를 반환합니다. 값이 존재하지 않으면 -1을 반환합니다.splice(index, 1) — 지정한 인덱스 위치부터 1개의 요소를 제거합니다. 이때 원본 배열
웹 개발을 하다 보면 방대한 코드 속에서 특정 JavaScript 함수가 어디에 정의되어 있는지 찾아야 할 때가 많습니다. 구글 크롬의 개발자 도구를 활용하면 몇 가지 간단한 단계만으로 함수 정의 위치를 빠르게 확인할 수 있습니다.1. 개발자 도구 열기먼저 구글 크롬 브라우저를 실행한 후 F12 키를 눌러 개발자 도구(Developer Tools)를 엽니다. 또는 페이지에서 마우스 오른쪽 버튼을 클릭한 뒤 검사(Inspect)를 선택해도 같은 결과를 얻을 수 있습니다.2. 전체 검색 기능 실행개발자 도구가 열리면 Ctrl + Shi
JavaScript에서 버튼을 클릭했을 때 특정 함수를 실행하려면 onclick 속성을 사용하면 됩니다. onclick은 HTML 요소에 직접 추가할 수 있는 이벤트 핸들러로, 사용자가 해당 요소를 클릭하는 순간 지정된 JavaScript 함수가 호출됩니다.기본 사용 예제아래 코드는 버튼을 클릭하면 sayHello() 함수가 호출되어 화면에 인사말을 출력하는 간단한 예제입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.<html> <head> &
자바스크립트 함수 호출의 기본 JavaScript는 개발자가 직접 자신만의 함수(function)를 작성할 수 있도록 지원합니다. 스크립트 내 어느 위치에서든 이미 정의해 둔 함수를 실행하려면, 해당 함수의 이름 뒤에 소괄호 ()를 붙여 작성하기만 하면 됩니다. 대표적인 함수 호출 방식 직접 호출: 스크립트 내에서 함수이름(); 형태로 작성하여 즉시 실행 이벤트 핸들러를 통한 호출: 버튼 클릭 등 특정 이벤트 발생 시 onclick 속성으로 함수 연결 addEventListener 활용: HTML과 JavaScript를 분리한
JavaScript의 기본 매개변수(Default Parameters)는 함수 호출 시 인자가 전달되지 않거나 undefined가 전달될 때, 형식 매개변수에 미리 정의된 기본값을 자동으로 할당하는 ES6(ES2015) 문법입니다. 이를 활용하면 별도의 조건문 없이도 함수 인자를 손쉽게 처리할 수 있어 코드가 더 간결하고 안전해집니다. 기본 매개변수의 동작 방식 기본 매개변수는 다음 두 가지 경우에만 적용됩니다. 함수 호출 시 해당 인자가 아예 전달되지 않은 경우 인자로 명시적으로 undefined가 전달된 경우 반면 null
JavaScript의 Function() 생성자는 임의 개수의 문자열 인수를 받을 수 있습니다. 이때 마지막 인수는 함수의 본문(body)이 되며, 세미콜론(;)으로 구분된 임의의 JavaScript 문장들을 포함할 수 있습니다. 그리고 앞에 오는 인수들은 새로 생성될 함수의 매개변수 이름으로 사용됩니다.기본 문법var func = new Function(매개변수1, 매개변수2, ..., 함수 본문);예제다음 코드를 실행하면 new Function 생성자로 만든 함수를 호출하는 과정을 직접 확인할 수 있습니다. 버튼을 클릭하면 두
자바스크립트 call() 메서드란 무엇인가?JavaScript의 call() 메서드는 함수를 호출할 때 첫 번째 인수로 전달한 객체를 해당 함수의 this 값으로 지정하는 기능을 합니다. 즉, 어떤 객체에 속하지 않은 함수라도 call()을 사용하면 원하는 객체의 컨텍스트에서 실행할 수 있습니다.이 메서드는 서로 다른 객체가 동일한 메서드를 공유하거나 재사용해야 할 때 특히 유용합니다. 상속 구조 없이도 한 객체의 기능을 다른 객체에 적용할 수 있기 때문입니다.call() 메서드의 기본 문법함수명.call(thisArg, arg1,
JavaScript의 apply() 메서드는 call() 메서드와 거의 동일하게 작동합니다. 두 메서드 모두 함수를 호출할 때 this 값을 지정할 수 있다는 점이 같습니다.가장 큰 차이점은 매개변수를 전달하는 방식입니다. call() 메서드는 인수를 하나씩 나열해서 전달하는 반면, apply() 메서드는 함수의 매개변수를 배열 형태로 전달받습니다.apply() 메서드 기본 문법func.apply(thisArg, [argsArray])thisArg: 함수 내부에서 this로 참조될 객체argsArray: 함수에 전달할 인수들을 담은