Programing (8) 썸네일형 리스트형 [JavaScript] 함수 기본 매개변수 (Default Parameters) 사용법 기본 매개변수(Default Parameters)란? 함수에 전달된 매개변수의 값이 undefined이거나 전달된 값이 없을 때, 초기화 설정된 값을 말한다. 사용법 파라미터 뒤에 = 를 붙이고, 그 뒤에 기본으로 설정할 값을 입력하면 된다. function name(param = defaultValue){ ... } 아래 사용 예시를 살펴보자. function sum(a, b) { return a + b; } console.log(sum(1, 2)); // 3 console.log(sum(1)); // NaN 일반적으로 함수 호출 시 정해진 매개변수의 갯수만큼 인자로 넘겨주어야 한다. 위 코드를 보면 sum 이라는 함수의 매개변수는 a와 b 두개이며, sum 호출 시 1개의 인자만 넘겨주면 NaN이 반.. [JavaScript] 전개 연산자(Spread Operator) 사용법 전개 연산자(Spread Operator)란? 전개 구문(Spread Syntax)은 ECMAScript6(2015)에서 새로 추가된 문법으로 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다. 이때 전개 연산자(...)를 활용한다. 사용법 문법 자체는 정말 간단하다. 배열이나 객체 앞에 점 세 개(...)를 붙여주면 된다. 아래 사용 예시를 살펴보자. 사용예시 : 배열 const arr = [1, 2, 3]; console.log(arr); // [ 1, 2, 3 ] console.log(...arr); // 1 2 3 실행결과 [ 1, 2, 3 ] 1 2 3 실행결과를 살펴보면 첫번째 줄은 배열 자체 그대로 출력이 되지만, 전개 연산자를 사용한 두번째 줄은 배열 안의 요소들이 펼쳐져서 출력된 걸.. [JavaScript] 데이터 타입 확인 - typeof 연산자 사용법 typeof 연산자란? typeof는 변수의 데이터 타입을 반환하는 연산자이다. 문법 typeof operand typeof(operand) typeof 연산자는 데이터 타입을 확인해야 하는 피연산자 앞에 위치한다. 물론 괄호도 사용 가능하지만, 불필요한 괄호를 넣은 사용방법이니 추천하지는 않는다. 반환되는 값은 다음과 같다. undefined : 변수가 정의되지 않거나 값이 할당되지 않은 경우 number : 숫자인 경우 string : 문자열인 경우 boolean : true or false인 경우 object : 함수, 배열 등 객체인 경우, null 인 경우 function : 함수인 경우 symbol : 심볼인 경우 이를 표로 정리하면 다음과 같다. 표현식 반환값 typeof undefined .. [JavaScript] 템플릿 리터럴(Template Literals)이란? 템플릿 리터럴(Template Literals) ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱 문자(`)를 사용한다. 템플릿 리터럴의 기능 1. Expression interpolation (표현식 삽입법 ) 백틱 사이에 ${ } 를 이용하여 변수나 연산 등을 삽입할 수 있게 되었다. 아래 예시를 보자. 기존 ES6 이전에는 따옴표(',")와 + 연산자를 이용하여 작성하였고, 변수 사이 + 를 넣어주는 불편한 방식이었다. const num1 = 1; const num2 = 2; const msg = num1.. [JavaScript] var 를 사용하지 않는 이유 var var는 ES6 등장 이전에 변수를 선언할 때 사용되던 키워드다. 하지만 ES6 등장 이후 let과 const를 사용하고, var는 큰 단점이 있어 현재 잘 사용하지 않는다. 그래서 오래된 소스들을 보면 대부분 var로 선언되어 있는 모습을 볼 수 있다.... 그럼 어떤 단점이 있는지 알아볼까? 먼저 아래 코드를 보면 변수 num 이 중복으로 선언되어 있다. 그러나 이를 오류로 판단하지 않고 정상 동작한다. var num = 123; var num = 456; console.log(num); 실행결과 : 456 만약 소스코드가 길어지고 큰 프로젝트를 진행하게 될 경우, 해당 문제로 인한 오류를 찾기가 매우 힘들어진다. 그런데, 왜 이런 현상이 나타날까? 그 이유는 바로 Hoisting(호이스팅) .. 코딩 네이밍 규칙 : 4가지 표기법 소개 개발 과정에서 리소스나 클래스, 오브젝트의 이름 또는 변수 등 이름 명명 규칙 4가지가 있다. 1. 카멜 케이스 표기법 (camelCase) 첫 글자는 소문자로 표기. 그 이후 연결되는 단어들의 첫 자는 대문자로 표기. ex) camelCase, userInfo, nameColor 2. 케밥 케이스 표기법 (kebab-case) 모든 문자는 소문자로 표기. 단어들 사이는 하이픈(-)으로 연결. ex) kebab-case, user-info, name-color 3. 스네이크 케이스 표기법 (snake_case) 모든 문자는 소문자로 표기. 단어들 사이는 언더바(_)로 연결 ex) kebab_case, user_info, name_color 4. 파스칼 케이스 표기법 (PascalCase) 모든 문자의 첫.. 크로스 브라우징 유용한 사이트 : Can I Use 사용법 크로스 브라우징이란? 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다. 따라서 웹사이트 제작시 사용하는 소스가 웹브라우저에서 지원되는지 확인할 필요가 있다.예를 들어 css 의 grid 기능을 사용하려고 하는데 지원되는 브라우저를 확인하고 싶다면 https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 위 사이트를 들어가서 상단 이 부분의 밑줄 안에 css grid 를 입력하면 된다. 입력하게 되면 아래에 결과가 나오게 되는데 각 브라우저 버전별로 호환 가능한지 표시된다. 녹색 적용이 되는 것을 의미 빨간색 적용이 되지 않는 것을 의미 갈색 불안정하다는 의.. HTML 페이지 많이 쓰이는 태그 순위 HTML에는 수많은 태그가 있다. 100개가 넘는 태그가 존재하는데 이 많은 태그를 모두 외우는 건 힘들다. 따라서, 자주 사용하는 태그들을 외우면 도움이 많이 된다. 아래는 HTML 페이지에서 사용되는 태그의 빈도수를 순위로 매겨 나열한 그림이다. 기본적으로 사용되는 html, head, body 는 나란히 1,2,3위를 차지하고 있는 모습을 볼 수 있다. 아래 그림을 보고 해당 태그에 대해 검색해서 찾아보고 공부해서 외워두면 HTML 페이지를 개발하는데 있어서 많은 도움이 될 것으로 생각된다. 이전 1 다음
