전체 글(278)
-
[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..
09:00:07 -
[Javascript] 함수 표현식 vs 함수 선언문
자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 여느 다른 언어들에서처럼 '어떠한 동작을 하는 구조' 정도로 취급하지 않는다는 얘기다. 스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. 사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작 같은 경우 등등. 함수는 프로그램을 구성하는 주요 구성 요소이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다. 함수 선언문(Function Declarations) 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다. 함수명이 정의되어 있고 별도의 할당 명령이 없는 것. 함수 선언식은 자바스크립트에서 가장 기본적인 함수 정의 방식으로 함수 이름을 명시적으로 제공해야 한다..
2025.05.20 -
[Javascript] ECMAScript 2015(ES6)+ (2)
구조분해할당(Destructuring) 자바스크립트 개발을 하다 보면 객체를 함수끼리 주고 받는 상황이 아주 많다. 그로 인해 전달 받은 객체의 프로퍼티를 변수로 선언하려면 각 프로퍼티를 별도의 변수로 할당하기 위해 각 프로퍼티마다 독립된 할당문을 작성해야 했다. 하지만 구조분해할당이라고 불리는 문법이 추가되어 변수 선언이 훨씬 더 편리해졌고 코드가 간결해졌다. 변수 선언 먼저 변수의 프로퍼티를 쉽게 선언하는 예제이다. 객체의 구조분해할당은 변수로 선언하고자 하는 객체의 프로퍼티명을 { } 안에 나열하면 각 프로퍼티의 이름으로 변수가 생성되고 프로퍼티의 값이 자동으로 할당된다. 배열의 구조분해할당 또한 비슷한데 [ ] 안에 나열하는 변수의 이름에 맞는 인덱스의 요소가 변수의 값으로 할당된다. ES5fu..
2025.05.20 -
[Javascript] ECMAScript 2015(ES6)+ (1)
ECMAScript(ES6나 ES2015의 ES는 ECMAScript의 줄임말)는 Ecma 인터내셔널에서 정의한 ECMA-262 기술 규격에 정의된 표준 스크립트 프로그래밍 언어다. ECMAScript는 1997년 1판 배포 이후로 매년 2, 3판이 배포되었고 그 뒤 10년 뒤에 5판(ECMAScript 5. 이하 ES5), 다시 6년 뒤인 2015년에 6판(ECMA2015)이 배포되었다(4판은 버려짐). 6판의 정식 명칭은 ECMAScript 6이 아닌 ECMAScript 2015(이하 ES6)이다. 이전에는 배포 주기가 길었지만 빠르게 변화하는 개발 환경을 반영하여 숫자 대신 연도를 붙여 배포되는 추세이다. ES6에서는 ES5 이하 명서에서 문제가 되었던 부분들이 해결되었고, 기존 코드를 더 간결하게..
2025.05.19 -
[Javascript] && 연산자로 조건문 단축시키기
&& 연산자의 조건문 표현자바스크립트의 AND 연산자(&&)는 양쪽 피연산자가 모두 true일 때 true를 반환하고 그렇지 않을 때에는 false를 반환한다. 이러한 특성을 이용하여 자바스크립트의 if문을 한 줄로 단축시킬 수 있다.if (num !== 0) { console.log('num is not zero');}num !== 0 && console.log('num is not zero'); // if를 없애고 && 연산자로 한 줄로 단축num === 0 || console.log('num is not zero'); // || OR 연산자로도 가능하다. 이 때는 첫 번째 식이 false일 때만 다음 식이 실행됨&& 연산자와 소괄호 표현그런데 console.log()와 같은 함수 호출이 아닌 연산..
2025.05.16 -
[Javascript] Scope
이번에는 자바스크립트의 Scope에 대해 알아보려 한다. Scope는 변수 또는 함수를 선언할 때 해당 변수/함수의 유효 범위를 의미한다. Scope에는 총 3가지 종류가 있다. 1. Global (전역) Scope: 코드의 모든 범위에서 사용 가능.2. Function(함수) Scope: 함수 안에서만 사용 가능.3. Block(블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용 가능. 이제 한 번 아래의 예시를 통해 Scope를 이해해 보자.const value = 'hello!';function myFunction() { console.log('this is myFunction. value: ', value); // 1. hello!}function otherFunc..
2025.05.15