프론트 엔드/javascript

[JavaScript]고차함수(array.filter, array.map, array.reduce)사용법

1. 고차 함수 ❓고차 함수란? 함수를 인자로 받거나 함수를 반환하는 함수이다 ❓__고차 함수 사용 이유? 함수를 리턴하는 콜백 함수를 사용하여 기존에 if나 else문을 사용해서 적었던 코드의 양을 줄여 생산성을 극대화시킬 수 있다. 고차 함수는 '불변성'을 지향하는 함수 이기 때문에 변수를 이용하면서 값이 바뀌며 부득이하게 생기는 오류를 최소화할 수 있다. 그리고 무엇보다 이름부터 고차원 적인 함수라는 의미니까 간단하지만 여러 가지 생각을 꼬아서 한데 집약시킨 고차원적인 코드이다라고 생각하면 될듯합니다. 이름은 좀 어렵지만 막상 사용법은 함수에 대한 기초지식만 있다면 간단하답니다.😎 고차 함수 종류 2. array.filter 활용 📌filter( ) 함수 사용법 주어진 배열의 값들을 오른 차순으로 ..

[JavaScript]javascript중간 정리(koans)

객체 선언 const obj = { x: 1 }; delete obj.x; //const로 선언된 객체의 경우 속성을 삭제 할수 잇다 obj.occupation = 'SW Engineer'; //const로 선언된 객체의 경우 속성을 추가 할수 잇다 ※const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때 문에 보다 안전하다 함수 호이 스팅 호이 스팅 이란 변수의 선언과 초기화를 분리한 후 선언만 코드의 최상단으로 올리는 것 (함수가 어디서 호출되더라도 출력은 같다) function catName(name) {//함수보다 하단에 함수를 호출한 경우 console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); /* 결과: "제 고양이의 이름은 호랑..

[JavaScript]클로저

1. 클로저 함수란? 함수를 리턴하는 함수이다. 클로저는 어떤 함수 내부에 선언된 함수가 외부 함수가 종료된 이후에도 계속 유지되는 현상으로 예시를 한번 보자 const outer = () => { const outerVariable = 'outer!'; // 1. outer 함수 안에 지역변수 outerVariable 선언 const inner = () => { console.log(outerVariable); // 2. 바깥의 outerVariable을 참조해 console.log 출력 }; return inner; // 3. 바깥의 outerVariable을 참조해 console.log를 출력하는 함수를 반환 }; const fano = outer(); // 4. outer함수 호출 -> 변수 fa..

[JavaScript]html에서 JavaScript를 실행하기

연결하는 방법에는 총 3가지 방법이 있다 inline자바스크립트를 이용하는 방법 내부 자바스크립트를 이용하는 방법 외부 자바스크립트를 이용하는 방법 __inline 방식 inline에 js 코드 넣기 inline에 script 연결하기 /*hw라는 변수를 통해서 hw라는 id를 가진 요소에 element객체를 반환한다*/ __html 내부에서 사용하기 /*출력 welcome JavaScript Hello JavaScript! */ 이는 브라우저가 코드를 해석하는 과정에서 = or ! = 인터넷 블로그 들을 돌아보면 똑같은 예시 인대 type이 추가된 예시와 추가되지 않은 예시가 나뉘는 걸 본 적이 있을 것이다 일단 type = "text/javacript"의 의미는 옛날에..

[JavaScript]스코프

스코프의 개념 총에 스코프와 같은 말로 '범위'라는 뜻을 가지고 있습니다. JavaScript에서는 '변수에 접근할 수 있는 범위'라고 쓰입니다. 스코프의 종류 전역 스코프 블록{} 바깥이나 함수 바깥에 선언된 변수입니다. 전역 코스프에 변수를 선언하면 어떤 위치의 코드에서든 사용할 수 있음 var fruit = 'apple'; // 전역스코프 (전역변수) function isGlobal() { return `${fruit} 입니다.`; } console.log(isGlobal()); // apple 입니다. 지역 스코프 블록 스코프 if 나 for문의 내부에 선언된 변수 {}로 블록이 생성될 때마다 새로운 스코프가 생성. let과 const 키워드의 등장으로 블록 스코프를 형성하는 경우가 많아짐 블록 ..

[JavaScript] 원시 자료형과 참조 자료형

원시 자료형과 참조 자료형에 대해 알아보자 원시 자료형 하나의 변수에 하나의 데이터만을 담을 수 있는 자료형이다. 객체가 아니면서 metnod를 가지지 않은 원시 타입 데이터이다. 예시 let string_type = 'string' let number_type = 12345 let bigint_type = 9007199254740991n let boolean_type = true let undefined_type = undefined let symbol = Symbol('foo'); 참조 자료형 원시 자료형을 제외한 모든 것들은 참조 자료형이다. 변수에다 주소를 저장하고 값을 불러올 경우 주소를 참조해서 가져온다. (heap) 힙이라고 불리는 데이터를 저장하는 공간이 따로 있다. 크기가 고정되어 있지 ..

[JavaScript]객체

자바스크립트에서 객체란 함수와 데이터 값을 집합시켜 놓은 것이다. 데이터가 적은 프로그래밍에서는 절차 지향 언어로 많이 사용하지만 처리해야 하는 데이터가 많고 복잡한 프로그램에서는 객체지향 언어로 프로그래밍하는 것이 훨씬 더 간편하다. 쉽게 말해서 흙을 쌓아서 성을 만드는 방식은 절차 지향 방식이고 레고 같은 블록을 이용해서 블록을 쌓아서 성을 만드는 방식이 객체 지향 방식이라고 이해하면 좋을듯하다. (여기서 사용되는 레고 같은 블록을 객채라 생각하면 좋을듯하다) 객체를 사용하는 문법은 아래와 같다. 이름과 값은 ':'으로 분리되며 member.1 Name의 값으로 member1 Value 값이 들어간다. 1 Name과 1 Value 2 Name과 2 Value 한 쌍의 이름과 값은 ', '로 구분한다...

[JavaScript]for문

아래 구구단의 2단을 출력 한 함수이다. console.log('2 * 1 = '+ 2*1)//출력 2 * 1 = 2 console.log('2 * 2 = '+ 2*2)//출력 2 * 2 = 4 console.log('2 * 3 = '+ 2*3)//출력 2 * 3 = 6 console.log('2 * 4 = '+ 2*4)//출력 2 * 4 = 8 console.log('2 * 5 = '+ 2*5)//출력 2 * 5 = 10 console.log('2 * 6 = '+ 2*6)//출력 2 * 6 = 12 console.log('2 * 7 = '+ 2*7)//출력 2 * 7 = 14 console.log('2 * 8 = '+ 2*8)//출력 2 * 8 = 16 console.log('2 * 9 = '+ 2*9..