본문 바로가기

JavaScript8

[TIL] 객체(Object)의 기초: 객체에 접근, 객체 추가, 삭제, in 연산자, for ... in 문, Object.keys, Object.entries 2021년 3월 9일 화요일 객체란 무엇인가? 객체는 키와 값의 쌍으로 이루어진 집합이다. 중괄호(curly bracket)으로 묶는다. let person = { name: 'James', //name은 key, 'James'는 value(값)이다. name: 'James'를 property라고 한다. age: 20 }; property는 객체의 상태를 나타내는 값이다. property의 구분은 쉼표(,)이다. key는 value에 접근할 수 있는 식별자 역할을 한다. 이미 존재하는 키를 중복 선언하면 나중에 선언한 property가 먼저 선언된 property를 덮어준다. let foo = { name: 'Steve', name: 'James' }; console.log(foo); // { name:.. 2021. 3. 9.
[TIL] 배열(Array) 메소드: length, push, pop, shift, unshift, Array.isArray, indexOf, includes, concat, join, slice javascript의 배열에 대해 정리해 보자 배열은 무엇인가? 한 마디로 순서가 있는 값이다. let arr = [ 1, 2, 3, 4, 5]; 대괄호(square bracket)를 이용해 element들을 그 안에 넣고, comma로 각 element를 구분한다. 배열에는 원본이 수정되는 메소드가 있고, 원본이 수정되지 않는 메소드가 있다. 기존의 배열을 수정하는 메소드: push, pop, shift, unshift 기존의 배열을 수정하지 않는(원본유지) 메소드: slice, split, join, concat 배열의 길이를 알기 위해서는 length를 사용하면 된다. let arr = [ 1, 2, 3, 4, 5]; arr.length; //5 push, pop, shift, unshift: pu.. 2021. 3. 9.
[TIL] 문자열(String) 메소드: length, indexOf, substring, slice, split, includes, toLowerCase(), toUpperCase(), 2021.3.3 str[index] : 한 글자씩 index의 글자를 가져온다. let str = 'hello world'; console.log(str[0]); //h console.log(str[1]); //e console.log(str[100]); //undefined concatenating strings: + 연산자를 통해 string 타입과 다른 타입을 +연산자를 통해 concat할 경우 string 타입으로 변환된다. let str1 = 'hello'; let str2 = 'world'; console.log(str1+str2); //helloworld console.log(1+'1'); // 11 console.log(str1+'3'); hello3 str.length: 문자열의 전체 길.. 2021. 3. 3.
[TIL]javascript 조건문, 비교연산자, 논리연산자 2021.3.3 조건문을 하기 전에 먼저 알아야 할 것이 있다. 바로 비교연산자, 논리연산자이다. 기본적인 조건문은 if(조건1) { //조건1이 참일 때 실행문 } else if(조건2) { //조건2가 참일 때 실행문 } else { //모두 아닌 경우 실행문 } 이때 if나 else if 안의 ( ) 안에 boolean타입을 판단하는 조건이 와야 한다. 예를 들면 num1 초과 = 이상 2021. 3. 3.
javascript 함수 작성일: 2021.3.2 함수는 기능을 묶는 단위이다. function add(x,y) { return x + y; } add(3,4); //7 함수를 선언할 때 키워드 function을 써준 후 함수명(add)을 쓴다. 다음에 ( ) 안에 매개변수(parameter)을 넣어준다. 매개변수가 없으면 안 써도 된다. 그다음에 { }로 실행문을 작성한다. 반환문 return: 함수는 키워드 return와 반환값으로 이루어진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있다. function multiply(x,y) { return x * y; } let result = multiply(2,5); //함수를 호출하면서 값을 result에 할당한다. 함수 호출은 표현식이다 console.log(resul.. 2021. 3. 2.
javascript 변수와 타입 작성일: 2021.3.2 1. 변수(variable) 하나의 값을 저장하기 위해 확보한 메모리 공간 또는 메모리 공간을 식별하기 위해 붙인 이름 다시 말해 값의 위치를 가리키는 이름, 상황에 따라 변할 수 있는 값이다. 변수의 선언(declaration): 키워드 let, const. var를 쓴 후 변수명을 적고 세미콜론을 붙인다. 변수의 할당(assignment): let num; //변수의 선언 num = 1; //변수의 할당, 변수 num에 1를 할당한다 let num = 2; //변수의 선언과 할당을 한번에 할 수 있다. 2. 타입(Type) 자바스크립트에는 7개의 데이터 타입을 제공한다. number: 숫자, 정수, 실수 구분없이 하나의 숫자 타입만 존재 string: 문자열, 작은따옴표(' .. 2021. 3. 2.
validation check(유효성 검사) 2 3. 이벤트 연결 전체적인 javascript 파일에 대한 flow를 생각해 보면 1) 엘리먼트 변수를 선언한다. 2) 이벤트 핸들러를 생성한다. id 체크 핸들러 함수 생성 password 체크 핸들러 함수 생성 password re 체크 핸들러 함수 생성 email 핸들러 함수 생성 회원가입 버튼 핸들러 함수를 생성 3) 유효성 검증 함수를 생성한다. 4) 시각적 피드백 함수를 생성한다. 5) 엘리먼트와 이벤트 핸들러를 연결한다. 이벤트 핸들러를 생각해 보자. 지금까지 많이 해보았던 것이 버튼을 클릭했을 때 이벤트가 발생하는 것이었다. 마우스의 이벤트는 다음과 같은 것이 있다. Click - 사용자가 마우스를 클릭했을 때 발생 DblClick - 사용자가 마우스를 더블 클릭했을 때 발생 MouseDo.. 2021. 2. 26.
filter, map을 이용한 코드를 reduce로 refactoring하기 다음과 같은 문제가 주어졌다고 생각해 보자. let arr = [1,2,3,4,5]; function filter() { const filterMapped = arr.filter(x => x % 2 !== 0).map(x => x*2); return filterMapped; } filter();// [2, 6, 10] filter함수는 filter와 map을 사용해서 주어진 arr에 홀수 중인 것에 2를 곱한 값을 리턴한다. 이것을 구현하기 전에 먼저 arrow function(화살표 함수)가 익숙하지 않아서 mdn 등 문서를 통해 화살표 함수의 기능을 익히는 시간을 가졌다. 화살표 함수는 익명 함수로 function 표현을 사용하지 않으니 구문이 짧아져 많이 편했다. 계속 화살표 함수를 사용해 봐야 겠.. 2021. 2. 22.

티스토리툴바