본문 바로가기

JavaScript

 (83)
[JavaScript] 모듈 모듈 자바스크립트 파일 하나로, 복잡하고 많은 양의 코드를 기능에 따라 나누면 1. 코드를 효율적으로 관리 2. 비슷한 기능이 필요한 경우 다른 프로그램에서 재 사용할수 있음. 모듈 스코프 모듈이 되는 파일은 이 파일만의 독립적인 스코프를 가져야 한다. HTML 파일에서 자바스크립트 파일을 불러올 때, 모듈 스코프를 갖게 하려면 script 태그의 type 속성을 module 값으로 지정해야함. 모듈 문법 모듈 문법은 기본적으로 import, export 로 나뉜다. export : 모듈 스코프를 가진 파일에서 외부로 변수, 함수를 내보낼 때 import : 모듈 파일에서 내보낸 변수나 함수를 import 로 가져옴 export // printer.js export const title = 'Codei..
[JavaScript] Map, Set Map Map 은 이름이 있는 데이터를 저장한다는 점에서 객체와 비슷하다. key - value pair. 그러나 할당연산자를 통해 값을 추가하고, 점 표기법이나 대괄호 표기법으로 접근하는 객체와 달리 Map 은 메소드를 통해 값을 추가하거나 접근할 수 있다. new 키워드를 통해 Map을 만들 수 있으며 아래와 같은 메소드로 Map 안의 여러 값을 다룰 수 있음. method 기능 map.set(key, value) key를 이용해 value를 추가하는 메소드. map.get(key) key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환. map.has(key) key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드. map.delete(key) ke..
[JavaScript] 배열 메소드 reduce reduce 메소드 누산한 값을 계산해주는 메소드, 0 : 초기값 // reduce const numbers = [1, 2, 3, 4]; const sumAll = numbers.reduce((acc, el, i) => { console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다.`) console.log('acc', acc); console.log('el', el); console.log('-----------'); return acc + el; }, 0); console.log('sumAll', sumAll);
[JavaScript] 배열 메소드 some과 every some 메소드 조건을 만족하는 요소가 1개 이상 있는지 판별, true or false every 메소드 모든 요소가 조건을 만족하는지 판별, true or false //some 과 every const numbers = [1, 3, 5, 7, 9]; //some: 조건을 만족하는 요소가 1개 이상 있는지 const someReturn = numbers.some((v) => v > 5); //every: 모든 요소가 조건을 만족하는지 const everyReturn = numbers.every((v) => v > 5); console.log(someReturn) // true console.log(everyReturn) // false 빈배열의 경우에 some 은 false, every는 true 를..
[JavaScript] 배열 메소드 filter와 find filter 메소드 콜백함수가 리턴하는 조건식이 true 인 요소만 찾아서 배열로 리턴. const devices = [ { name: 'iPad', brand: 'Apple'}, { name: 'iPhone', brand: 'Apple'}, { name: 'GalaxyWatch', brand: 'Samsung'}, { name: 'Gram', brand: 'LG'}, { name: 'MacBookAir', brand: 'Apple'}, ]; const apples = devices.filter(v => v.brand == "Apple" ) // 배열의 요소 중 brand 값이 'Apple' console.log(apples); 이처럼 Apple 값을 가진 요소만 배열의 형태로 출력된다. 항상 리턴값이 ..
[JavaScript] finally 문 try catch 문은 다음과 같이 finally 라는 블록을 하나 더 가질 수 있다. try { // 실행할 코드 } catch (err) { // 에러가 발상했을 때 실행할 코드 } finally { // 항상 실행할 코드 } try 문에서 에러가 발생하지 않으면 try 문의 코드가 모두 실행된 다음에, try 문에서 에러가 발생한다면 catch 문의 코드가 모두 실행된 다음 실행할 코드를 finally 문에 작성하면 된다. 다시말해 try 문에서 어떤 코드를 실행할 때 에러 여부와 상관 없이 항상 실행할 코드를 작성하는 것. finally 문에서 에러 처리는 다음과 같다. try { try { // 실행할 코드 } catch (err) { // 에러가 발상했을 때 실행할 코드 } finally { ..
[JavaScript] try catch 활용하기 다음과 같은 코드를 실행시키면, function printMembers(members) { for(const member of members) { console.log(member); } } const teamA = ['짱구','훈이','유리']; printMembers(teamA); const random = { name: '철수' }; // for of 문에 객체를 사용할 수 없으므로 여기서 에러 발생 printMembers(random); const teamB = ['맹구', '짱아']; printMembers(teamB); for of 문에 객체를 할당할 수 없으므로 에러가 발생한다. 프로그램이 그대로 멈춰, 뒤에 있던 배열인 맹구, 짱아는 출력되지 않는다. 그러나 try catch 문으로 코드를..
[JavaScript] try catch 문 다음의 코드를 보면, const 키워드로 선언한 변수에 새로운 값인 '이훈이' 를 재할당 하려고 했기 때문에 에러가 발생한다. // try catch 문 console.log('에러 전'); const name = '신짱구'; console.log(name); name = '이훈이'; const language = 'JavaScript'; console.log(language); console.log('에러 후'); 이 에러 때문에 language 변수와 에러 후 문자열은 출력되지 않음. 이때, try catch 문을 활용하면 된다. [try catch] try { //코드 } catch (error) { //에러가 발생했을 때 동작할 코드 } try 블록에서는 동작시킬 코드를 작성하고, try 블록 안..

티스토리툴바