본문 바로가기

🌌 | WEB DEV115

JS_기술 (2)_ IIFE(즉시 실행 함수 표현) JS에서 사용하는 IIFE에 대해서 알아보자. 오늘날에는 잘 사용하지 않지만 과거에 사용했던 코드를 분석하기 위해서 알아보자! 1. IIFE란? 즉시 실행 함수 표현(Immediately Invoked Function Expression, IIFE)은 정의되자마자 즉시 실행되는 함수를 말한다. 구조 (function() { ... }) (); Self-Executing Anonymous Function 으로 불리는 디자인 패턴이라고 한다. 여기에서는 두 개의 괄호에 주목을 해야한다. 먼저, 익명함수를 둘러싼 괄호이다. 이를 통해서 전역 Scope의 불필요한 변수들에 의한 오염 방지와 IIFE 내부 안으로 다른 변수들이 접근하는 것을 방지할 수 있다. 그 다음으로는 후미에 위치하는 즉시 실행 함수를 생성하.. 2023. 3. 16.

JS_기본 문법 (22)_ 매개변수 (기본값, arguments, 나머지 변수, 이상적인 함수?) JS 다루는 함수의 매개변수에 대해서 살펴보자. 1. 함수의 매개변수 개수보다 많이 값을 전달한 경우 예시 1) 두 개의 인자를 받는 함수이다. function sum(a, b){ return a + b; } console.log( sum(1, 2), sum(1, 2, 3), sum(1, 2, 3, 4) ); >>> 3 3 3 위의 결과처럼 JS에서는 다른 언어와 다르게 함수 정의 시 설정한 매개변수의 개수보다 많이 값을 전달하는 경우 순서대로 값을 받은 후 나머지는 무시하며 오류를 일으키지 않고 값을 반환한다. 2. 기본값 기본값(default parameter)은 매개변수에 값이 들어오지 않아도 기본적으로 값을 설정해주는 것이다. function sum(a = 0, b = 0){ return a + .. 2023. 3. 12.

JS_기술 (1)_ 커링(currying) JS에 존재하는 커링에 대해서 알아보자. 1. 커링이란? 커링은 함수와 함께 사용하는 고급기술로, JS 뿐 아니라 다른 언어에서도 사용할 수 있는 기술이다. 필요한 인자보다 적은 수의 인자를 받으면, 나머지 인자를 인자로 받는 다른 함수를 반환한다. 즉, 한 함수를 실행하기 위해 필요한 인자가 아직 덜 준비 되었을 경우 현재 존재하는 인자를 저장하기 위해서 커링으로 작성할 수 있다. 예시 1) 아래는 일반적으로 함수를 작성한 경우이다. function mulTwoTerm (a, b, c, d) { return (a + b) * (c + d); } const mulTwoTerm2 = (a, b, c, d) => (a + b) * (c + d); console.log( mulTwoTerm(1, 2, 3, 4.. 2023. 3. 11.

JS_기본 문법 (21)_ 일급 객체 JS의 일급 객체에 대해서 알아보자! 일급 객체 (First Class Object) 함수를 변수나 상수의 값처럼 다룰 수 있는 언어에 존재하는 개념이다. JS의 함수도 이에 속한다. (JS의 함수는 객체의 한 종류이다.) 특징 1. 상수/변수에 할당될 수 있다. 2. 다른 함수의 인자로 전달될 수 있다. 3. 다른 함수의 결과값으로서 반환될 수 있다. 1. 할당 변수/상수에 함수명을 식별자로 넣어서 할당시킨다. 이때 주의할 점은 괄호를 붙이지 않는 것이다. (괄호를 붙이면 함수 실행 후 반환 결과를 할당하는 것) 예시 1) function isOdd (num) { console.log( (num % 2 ? '홀' : '짝') + '수' ); return num % 2 ? true : false; }; .. 2023. 3. 11.

JS_기본 문법 (20)_ for 루프+ 2022.02.11 - [🌌 | WEB DEV/Vanilla JS] - JS_기본문법 (4)_반복문 반복문 중 for 문에 대해서 조금 더 알아보자 구조 for ([initialization]; [condition]; [final-expression]){ ... } 괄호 안 3개의 식 initialization 식 또는 변수를 선언한다. 주로 카운터에 사용할 변수를 초기화한다. (상수 선언 시 증감 불가) condition 매 반복 마다 평가할 조건을 세운다. 평가 결과가 참일 경우 수행문을 실행한다. 거짓일 경우 for문을 탈출한다. 만약 비어있는 경우 항상 참이다. final-expression 매 반복의 끝에 수행되는 식이다. 주로 카운터 변수의 증감에 사용된다. (condition 이전에 실행) .. 2023. 3. 8.

JS_기본 문법 (19)_ case문, 객체 활용 변형 case문 JS에서 활용하는 case문에 대해서 알아보자 1. case문 특정 값에 대한 여러 옵션이 존재할 때 주로 사용한다. const option = 1; switch (option) { case 1: console.log('1번'); break; case 2: console.log('2번'); break; case 3: console.log('3번'); break; default: console.log('무효'); } >>> 1번 switch ~ case 문을 이용한 예시는 위와 같다. break 주의할 점은 break 이다. break를 사용하지 않는다면 해당 case의 다음 case까지 연속적으로 수행이 된다. 따라서 설계의도대로 수행되도록 하기 위해서 이를 사용하면 된다. defalut defalut는.. 2023. 3. 7.

JS_기본 문법 (18)_ 제어문과 좋은 코드? JS에서 제공하는 if/else문을 이용하면 원하는 조건에 맞추어 연산을 처리할 수 있다. const x = 4; if (x % 2) { console.log('홀수'); } else { console.log('짝수'); } >>> 짝수 위의 예시는 아주 단순한 홀짝 판별 코드인데 이것보다 더 복잡한 조건을 적용한다면 당연히도 코드가 복잡해진다. 그에 따라 가독성이 낮은 코드가 작성될 수 있다. 예시) 홀수, 짝수, 4의 배수를 구분하는 코드 1) if/else문의 중첩을 활용할 경우 const x = 6; if (x % 4) { if (x % 2) { console.log('홀수'); } else { console.log('짝수'); } } else { console.log('4의 배수'); } >>>.. 2023. 3. 4.

JS_기본 문법 (17)_스코프 JS에서의 스코프에 대해서 알아보자! 1. 블록문 (Block) 블록문은 0개 이상의 statement(구문)을 묶은 것을 이야기하고, 한 쌍의 중괄호(brackets)로 감싸져있다. { ... } 일반적으로 제어문, 함수 등에 사용이 되고 블록문은 새로운 스코프를 생성한다 1) 스코프 (Scope) 스코프란 변수나 상수, 식별자들이 유효하게 사용될 수 있는 범위를 말한다. 즉, 블록문을 생성할 경우 새로운 범위를 생성하게 되는 것이다. 특징 1_ 블록 안에 선언된 변수와 상수를 그 밖에서 사용 불가 { let x = 1; console.log(x); } console.log(x); >>> 1 >>> Uncaught ReferenceError: x is not defined 위의 예시처럼 블록 안에 선언.. 2023. 3. 3.

JS_기본 문법 (16)_원시타입과 참조타입 JS에는 원시타입과 참조타입이 존재한다. 그 둘을 값의 복사의 측면에서 비교하며 알아보자! 1) 원시타입 원시타입은 값에 의한 복사가 이루어진다.(Copy by value) let n1 = 1; let s1 = 'A'; //n1, s1 복사 let n2 = n1; let s2 = s1; //새로운 값 할당 n2 = 2; s2 = 'B'; console.log(n1, s1); console.log(n2, s2); >>> 1 'A' >>> 2 'B' 위의 결과처럼 값 자체를 복사하는 것이므로 복사를 한 이후, 무슨 짓을 하든 서로에게 영향을 주지 않는다. 2) 참조타입 참조타입은 '주소값'이 복사가 된다. (Copy by reference) const ob1 = { num : 1, str : 'A' }; /.. 2023. 3. 1.

이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음

티스토리툴바