Javascript(174)
-
[Javascript] call, bind, apply
call 자바스크립트에서 함수는 선언한 후 일단 호출을 해야 실행된다. 함수를 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과 call 또는 apply를 통해 호출하는 방법이 있다. var example = function (a, b, c) { return a + b + c;};example(1, 2, 3);example.call(null, 1, 2, 3);example.apply(null, [1, 2, 3]); 위 예시를 보면 call()은 보통 함수와 똑같이 인자를 넣고, apply는 인자를 하나로 묶어 배열로 만들어 넣는 것을 알 수 있다. 그렇다면 여기서 call과 apply가 공통적으로 가진 첫 번째 인자 null의 역할은 뭘까? 바로 this를 대체하는 것이다.var obj = { str..
2025.05.26 -
[Javascript] 콜백 함수
콜백(Callback) 함수. 간단히 말하면 파라미터로 함수 객체를 전달해서 호출 함수 내에서 파라미터로 전달된 함수를 실행하는 것을 말한다.예를 들어 아래 코드와 같이 sayHello() 함수를 호출할때 파라미터와 문자열과 printing 함수 자체를 전달하는 것. 그리고 sayHello()가 실행되면 실행문 안에서 함수가 담긴 두 번째 파라미터 callback 을 괄호()를 붙여 호출한다.function sayHello(name, callback) { const words = '안녕하세요 저는 ' + name + '입니다.'; callback(words); // 파라미터의 함수(콜백 함수) 호출}sayHello("아오금", function printing(name) { console..
2025.05.23 -
[Javascript] 화살표 함수(arrow function)
자바스크립트에서 함수를 만들 때에는 function 키워드를 사용하여 정의할 수 있다. 예를 들어 두 수의 합을 구하는 함수는 다음과 같이 작성할 수 있다.function sum(a, b) { return a + b;} 그리고 ES6부터는 화살표 함수(arrow function)라는 새로운 문법으로 함수를 만들 수 있게 되었다. 화살표 함수는 => 기호를 사용하여 function 키워드를 생략할 수 있다. 따라서 위의 함수를 화살표 함수로 바꾸면 아래와 같이 구성할 수 있게 된다.let sum = (a, b) => { return a + b;}// 만약 함수가 단순한 return문만 있다면 한 줄로 더 심플하게 줄일 수 있다.const sum = (a, b) => a + b; 화살표 함수 문법 표..
2025.05.22 -
[Javascript] 함수의 기본 파라미터
이번 글에서는 함수의 기본 파라미터를 설정하는 방법에 대해 알아보려 한다.한 번 우리가 원의 넓이를 구하는 함수를 만들어 본다고 가정해 보자. function calculateCircleArea(r) { return Math.PI * r * r;}const area = calculateCircleArea(4);console.log(area); // 50.26548245743669 여기서 Math.PI는 원주율 파이(π)의 값을 가리킨다. 그런데 여기서 만약 우리가 이 함수에 r이라는 인자 값을 넘겨주지 않는다면 어떤 결과가 나타날까? function calculateCircleArea(r) { return Math.PI * r * r;}const area = calculateCircleArea();c..
2025.05.21 -
[Javascript] 함수 표현식 vs 함수 선언문
자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 여느 다른 언어들에서처럼 '어떠한 동작을 하는 구조' 정도로 취급하지 않는다는 얘기다. 스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. 사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작 같은 경우 등등. 함수는 프로그램을 구성하는 주요 구성 요소이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다. 함수 선언문(Function Declarations) 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다. 함수명이 정의되어 있고 별도의 할당 명령이 없는 것. 함수 선언식은 자바스크립트에서 가장 기본적인 함수 정의 방식으로 함수 이름을 명시적으로 제공해야 한다..
2025.05.20 -
[Javascript] ECMAScript 2015(ES6)+ (2)
구조분해할당(Destructuring) 자바스크립트 개발을 하다 보면 객체를 함수끼리 주고 받는 상황이 아주 많다. 그로 인해 전달 받은 객체의 프로퍼티를 변수로 선언하려면 각 프로퍼티를 별도의 변수로 할당하기 위해 각 프로퍼티마다 독립된 할당문을 작성해야 했다. 하지만 구조분해할당이라고 불리는 문법이 추가되어 변수 선언이 훨씬 더 편리해졌고 코드가 간결해졌다. 변수 선언 먼저 변수의 프로퍼티를 쉽게 선언하는 예제이다. 객체의 구조분해할당은 변수로 선언하고자 하는 객체의 프로퍼티명을 { } 안에 나열하면 각 프로퍼티의 이름으로 변수가 생성되고 프로퍼티의 값이 자동으로 할당된다. 배열의 구조분해할당 또한 비슷한데 [ ] 안에 나열하는 변수의 이름에 맞는 인덱스의 요소가 변수의 값으로 할당된다. ES5fu..
2025.05.20