본문 바로가기

Frontend Dev

(147)
디폴트 매개변수와 나머지 매개변수 (with arguments 객체) 디폴트 매개변수(default parameter)와 나머지 매개변수(rest parameter)는 ECMAScript 6부터 추가되었다. 이전 버전의 자바스크립트에서는 함수에서 매개변수의 개수를 동적으로 처리하기 위해 arguments 객체를 사용해야 했지만, ECMAScript 6부터는 나머지 매개변수를 사용해 인수를 배열 형태로 전달하는 것을 권장한다. 👾 디폴트 매개변수(default parameter) 디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우에 사용하게 될 기본값이다. 자바스크립트에서 함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined 이 된다. 매개변수에 값을 전달하지 않아도 그 값이 undefined 가 되지 않게 하려면 함수를 선언할 때 ..
함수의 매개변수(parameter)와 인수(argument 전달인자) 👾 매개변수(parameter) 함수의 매개변수란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수로 전달된 매개변수는 해당 함수의 지역변수가 된다. 💬 자바스크립트에서 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않는다. 함수를 호출할 때도 인수로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다. 함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않고, 전달되지 않은 나머지 매개변수에 자동으로 undefined 값을 설정한다. function greeting(name) { console.log("hello, " + name); } greeting("Anna"); // hello, Anna 👩🏻‍💻 example fun..
Section1 Unit11 솔로 프로젝트 전, Git으로 협업하기 Section1 Unit11 솔로 프로젝트 전, Git으로 협업하기 📌 Chapter1. Git으로 협업하기 Git workflow • 로컬(Local) Git 리포지토리(Repository): 내 컴퓨터의 저장소 # git repository를 추가 git init # Untracked files를 Staging area로 추가 git add # staging area의 파일 확인 git status # staging area의 파일은 commit 가능 git commit • 원격(Remote) Git 리포지토리(Repository): 원격 온라인 서버 상의 저장소 # 로컬 리포지토리에 원격 리포지토리 주소를 등록 git remote add # 로컬 리포지토리에 기록한 내역을 원격 리포지토리로 이동 g..
Section1 Unit10 JS/브라우저 DOM - 유효성 검사 Section1 Unit10 [JS/브라우저] DOM - 유효성 검사 ⭐️ 과제. 유효성 검사 회원가입 Form을 만들어보며, 특정 조건에 맞는 값을 입력하도록 구현하는 연습을 했다. See the Pen 회원가입 Form (유효성검사) by sowon (@hello_FAY) on CodePen. Bare Minimum 요구사항을 완료 후 다른 기능도 추가해서 넣어보았다. ✔️ 아이디와 패스워드 뿐만 아니라 전화번호, 이메일 영역도 추가하여 구현 ✔️ addEventListener 사용 (학습자료에는 onkeyup을 사용) ✔️ 하단의 Message는 html이 아닌 js의 textContent로 내용 출력 ✔️ 회원가입 버튼 disabled 조작 ✔️ 약간의 html, css 수정 🌙 오늘의 회고 오늘..
Section1 Unit10 JS/브라우저 DOM Section1 Unit10 [JS/브라우저] DOM 📌 Chapter1. DOM 기초 • DOM(Documnet Object Model)은 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JavaScript를 사용해 DOM으로 HTML을 조작할 수 있다. • 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있다. console.log(document.body); console.dir(document.body); → DOM 구조를 조회할 때는 DOM을 객체의 모습으로 출력하는 console.dir가 유용하다. • Tree 구조의 DOM 📌 Chapter2. DOM 다루기 CRUD(C..
자바스크립트의 자료형 - 원시 타입(primitive type)과 객체 타입(object type)의 특징 👾 원시 타입(primitive type) 변수에 할당시 메모리 공간에 값 자체가 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다. (pass-by-value) → 원본을 변경해도 복사본에 영향을 미치지 않는다. 원시 값은 Immutable value(변경 불가능한 값). 즉, 한 번 생성된 원시 자료형은 읽기 전용(read only) 값이다. → 변수에 다른 값을 재할당시 새로운 원시값이 생성되며, 변수가 다른 메모리 공간을 참조한다. 그리고 기존에 사용하지 않는 값은 자동으로 메모리에서 삭제된다. (JavaScript의 가비지 콜렉터(garbage collector) 작동) 👾 객체 타입(object/reference type) 변수에 할당시 저장 공간을 참조..
자바스크립트의 자료형 (data type) 👾 타입(data type, 자료형) 이란? C나 Java와 같은 언어는 정적 타입(static type) 언어로 변수 선언 시 변수에 저장할 값의 종류를 사전에 타입 지정(Type annotation)하여야 한다. 반면 자바스크립트는 변수의 타입 지정 없이 값이 할당되는 과정에서 자동으로 타입이 결정되는 ‘동적 타입(dynamic type)’ 언어이다. 변수 선언시 메모리에 값을 저장하기 위해서는 먼저 메모리 공간을 확보해야 할 메모리의 크기(byte)를 알아야한다. 이는 값의 종류에 따라 확보해야 할 메모리의 크기가 다르기 때문이다. 이때 값의 종류, 즉 데이터의 종류를 데이터 타입(data type)이라 한다. → 기본 타입은 크게 원시 타입과 객체 타임으로 구분할 수 있다. → 각 타입은 고유한 ..
자바스크립트 ES6 화살표 함수 기본 화살표 함수란 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법으로, 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다. // 화살표 함수 let func = (arg1, arg2, ...argN) => expression // 함수 표현식 let func = function(arg1, arg2, ...argN) { return expression; } → 인자(arg1 ...argN)를 받는 함수 func가 만들어지고, 함수 func는 화살표(⇒) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다. 👾 화살표 함수로 함수를 정의할 때 생략할 수 있는 규칙 1. 매개변수가 한 개일 때, 소괄호()를 생략할 수 있다. // 매개변수가 한 개일 때, 소괄호를 생략할..

반응형