본문 바로가기
관리자

Programming-[Frontend]/Javascript

(33)
Javascript / Array / filter, map, reduce 배열의 구성, 접근, 추가/삭제/변경 등 기초에 관한 내용은 다음 글에서 익히자. '2.배열 - 1-2. 배열 및 반복문' 1. filter method filter method는 배열의 요소 중, 특정 조건을 만족하는 값들만을 걸러 새로운 배열로 반환해주는 method이다. 배열.filter(filtering함수) 1 2 3 4 5 6 function isOdd(value) { return value % 2 !== 0; } var filtered = [12, 5, 8, 130, 44].filter(isOdd); filtered // 결과 : [5] cs callback함수의 형태로 작성할 수도 있다. 1 2 3 4 5 6 7 let arr = [12, 5, 8, 130, 44]; let oddNum =..
Javascript / 기초 / 객체지향 (Object-oriented) 객체지향 프로그래밍의 기초는 다음 글을 통해 파악할 수 있다. - 객체지향 프로그래밍 이 글은 기초 파악 후 Javascript에서의 객체지향 프로그래밍 방법에 대해 알기 위한 내용이 담긴 글이다. 간단하게, 객체는 동일한 속성을 갖는 변수들을 정의하기 위해서 사용한다. 동일한 속성을 갖는 집합체를 Class라 하고, Class의 객체들을 인스턴스(Instance)라 한다. Class는 속성과 메소드를 사용한다. ex) Car 객체 : brand, speed라는 속성을 갖고, speedUp이라는 메소드를 가짐. 속성 : Car1 = 'H사, 100km/h', Car2 = 'T사, 50km/h' 메소드 : Car1.speedUp(10) : 110 km/h, Car2.speedUp(50) : 100 km/h..
Javascript / 기초 / Scope, 선언키워드(var, let, const) 1. Global/Local Scope Scope는 어떤 변수가 적용되는 범위를 나타낸다. Global scope, local scope로 구분된다. >> 안쪽 scope에서는 바깥 변수/함수에 접근 가능하지만, 바깥쪽 scope에서는 안쪽 변수/함수에 접근할 수 없다. 1 2 3 4 5 6 7 8 9 let wish = 'I want'; function foods(){ let food = 'cheese burger'; return wish + ' ' + food; } foods(); // 결과 : 'I want cheese burger' food; // 결과 : ReferenceError 2. Block, function scope 2-1. Block Scope block은 중괄호'{ }' 안의 영역을..
Javascript / Closure Function (Currying, Closure module pattern) 1. Closure 함수의 정의 함수 자체를 어떤 함수의 parameter로 받아오면, 받아온 함수 내에서 부모 함수에 대한 변수를 사용할 수 있는 것을 Closure라고 한다. 또는, 자식함수 자체를 Closure라고도 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 // Sourcecode function parentFn() { let parentVar = 'Burger'; console.log(parentVar); function childFn(){ let childVar = 'Chee..
JavaScript / Rest Parameter, Spread Operator Rest Parameter Rest Parameter는 함수를 선언할 때, 여러 개의 Parameter 중에 남은(rest) Parameter들은 '배열'의 형태로 지정하는 것을 말한다. parameter의 이름 앞에 '...' 을 써주면 된다. 1 2 3 4 5 6 7 8 9 10 11 function egg1(spam, ...rest){ return rest } egg1(1, 2, 3, 4, 5); // 결과 : [2, 3, 4, 5] function egg2(spam, mayo, joa, ...rest){ return rest } egg2(1, 2, 3, 4, 5); // 결과 : [4, 5] cs >> Rest Parameter는 함수 선언 시에, Parameter 목록의 맨 마지막에만 써야한다...
Javascript / 기초 / 알고리즘, Code 작성 팁 알고리즘 코딩 문제를 풀어나가는 방식의 핵심은 '문제를 분해하는 것'에 있다. 보통 어떤 자료구조에 새로운 요소를 추가하거나, 삭제, 변경, 접근 하는 등의 문제들이 복합화되어 있는데, 이를 적절히 분해하고 순서대로 작동되도록 해야한다. 이를 위해 필요한 논리를 '의사코드(pseudocode)로 적어보는 것'은 생각의 정리에 도움이 된다. 그 다음으로 필요한 것은 '알고 있는 개념으로 pseudocode를 실현할 수 있는지 구체화하는 것' 이다. -문제 분해, 의사코드 작성 예를 들어서, 어떤 문자열 에서 'a'라는 단어를 찾아서 'b'라고 전부 바꿔주고 싶다면, 1. 'a'라는 문자의 입력을 받아온다. 2. 'a'라는 문자가 문자열에 있는지 확인한다. 3. 'a'를 'b'로 바꾼다. 이다. -실현 가능..
Javascript / 기초 / 객체(Object) 객체(Object) 1. 객체가 필요한 이유 객체는 같은 카테고리의 정보를 여러 개 만들어 줘야할 때, 간결하고 명확하게 표현하기 위해 만든다. User에 대한 'name, email, address' 가 있고, User2에 대한 'name, email, address'가 있을 때, 각 값들을 지정하기 위해서는 변수를 총 6개 만들어 주거나, 배열을 2개 만들어서 각 요소들을 index화 해야하는 불편함이 있다. 그래서 객체를 생성해준다. ex) 변수 6개 : user1_name, user1_email, user1_address, user2_name, user2_email, user2_address 객체 2개: user1 = {name : 'steve', email: '...', address: '.....
Javascript / 기초 / 배열, 반복문 1. 반복문 1-1. for문 if문과 같은 형태로 사용하면 되는데, 대신 조건문에 차례대로 '초기화; 조건식; 증감문'을 작성해주어야 한다. >> 초기화, 조건식 다음에 ';(세미콜론)'을 써야함을 기억하자. ',(comma)'가 아님. for(초기화; 조건식; 증감문){ 조건식을 만족하기 전까지 반복적으로 실행하고 싶은 문구; } ex) let sum = 1; for(let n = 1; n 만약 초기화문에서 let을 안쓰면, 자동적으로 변수 n을 var n 으로 잡아준다. js에서는 let, var, const 등이 있는데, 지정하는 것에 따라 사용하는 범위가 달라진다. 추후에 자세히 배울 수 있다. >> 반복문에서 continue를 쓰면, 다음 if문을 무시하고 다음 증감문으로 넘어가라는 뜻이 되고..