본문 바로가기

JavaScript

 (39)
JavaScript - 모듈화 소스코드가 길어질 경우, 하나의 파일로 관리하는 것이 아니라 여러개의 파일로 분리해서 관리하는 것이 좋다. 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정을 '모듈화'라고 하고, 각각의 파일을 '모듈'이라고 한다. 모듈화를 하면 코드를 효율적으로 관리할 수 있고, 다른 프로그램에서 재사용할 수 있다는 장점이 있다. ES5이전까진 모듈화를 할 수 있는 기능이 없었다. 모듈파일의 조건 모듈파일이 가지는 독립적인 스코프 = 모듈스코프. 모듈에서 사용하는 변수나 함수는 해당 모듈에서만 사용할 수 있어야한다는 것이다. 무슨 뜻이냐면, 한 html파일에서 2개의 자바스크립트 파일을 가져오고있다고 하자. index.html에서 print.js와 draw.js 둘을 불러오고 있다. 그럼 print.js..
JavaScript - 배열 함수 및 유용한 내부 기능 foreach const animals = [‘dog’, ‘cat’, ‘rabbit’, ‘duck’]; animals.forEach((animal, i, arr) => { console.log(`${i}번에 ${animal}이 있다.`); console.log(arr); // [‘dog’, ‘cat’, ‘rabbit’, ‘duck’] }); 첫 번째 파라미터는 배열의 요소. 두번째 파라미터는 요소의 인덱스. 세번째 파라미터는 반복중인 배열 자체가 전달된다. map const animalsLevel = animals.map((animal, i) => `레벨${i}-${animal}`); foreach와 map의 차이점 foreach는리턴값이 없기때문에 변수에 담으면 항상 undefined이다. 단순한 반복..
JavaScript - 에러와 에러객체 자바스크립트는 프로그램 실행중 에러가 발생하면 프로그램을 중단하고, 에러객체를 콘솔에 찍어준다. 에러객체는 name, message 프로퍼티가 있다. 아래는 가장 흔하게 볼 수 있는 에러이다. referenceError typeError syntaxError 이 중 syntaxError는 아예 프로그램을 시작하기 전부터 에러라고 알려준다. 의도적으로 에러객체 만들어서 에러내기 1. 에러 객체 생성 const error = new TypeError(‘타입에러가 발생했다.’); console.log(error.name); console.log(error.message); 2. 에러 발생 throw error; 에러핸들링 try catch문 try{ // 코드 } catch(error){ // 에러가 발생했을..
JavaScript - 구조분해 배열을 활용한 구조분해 const rank = [‘dog’, ‘cat’, ‘bird’, ‘mouse’]; // 배열의 값을 변수에 담기 const beef = rank[0]; const salmon = rank[1]; const corn = rank[2]; const salad = rank[3]; // 구조분해 문법으로 담기 const [beef, salmon, corn, salad] = rank; console.log(beef); // dog console.log(salmon); // cat rank를 분해해서 왼쪽 배열의 값으로 집어넣은 것이다. 구조분해시, 우측값이 없거나 우측값이 배열이 아니면 에러가 발생한다. 배열의 길이가 긴 경우 const rank = [‘dog’, ‘cat’, ‘bird’,..
JavaScript - 객체의 프로퍼티 객체의 프로퍼티 모던하게 작성하기 const name = ‘콩이’; const birth = 2015; const type = ‘cat’; const kong = { name, birth, type, } 위와같이, 변수명과 프로퍼티네임이 같으면 하나만 작성해도 된다. 변수 뿐아니라, 함수도 아래와같이 한 줄만 써도 된다. function sleepOnDesk() { return `${name}(가) 책상에서 자고있다.`; } const kong = { name, birth, type, sleepOnDesk, } 위의 sleepOnDesk함수를 객체 내부에서 직접 작성할때에는 아래과 같이 작성할 수 있다. const kong = { name, birth, type, sleepOnDesk() { return..
JavaScript - Spread ES2015에서 등장한 문법이다. 배열에서 유용하게 활용할 수 있다. 스프레드 구문 시 주의해야할 점은, 배열에 요소가 1개인 경우 에러가 발생한다는 점이다. spread 기능은 다음과 같다. 1. 배열 풀기 '펼치다'라는 의미처럼 여러개의 값을 하나로 묶은 배열을 스프레드를 사용해서 다시 풀어놓을 수 있다. const numbers = [1, 2, 3]; console.log(…numbers); // 1 2 3 (배열이 아님) 마치 console.log(1, 2, 3); 한 것처럼 출력된다. 2. 깊은 복사 const firstAnimals = ['dog', 'cat']; const secondAnimals = […firstAnimals]; secondAnimals.push(‘rabbit’); cons..
JavaScript - 문장과 표현식 statements와 expressions 우리가 작성하는 모든 자바스크립트 코드는 문장과 표현식으로 구성되어있다. 문장 문장은 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 이다. let x; // 문장 1 x = 3; //문장 2 if( x === 3) { console.log('x는 3이다.'); }else{ console.log('x는 3이 아니다.'); } // 문장 3 표현식 결과적으로 하나의 값이 되는 모든 코드를 가리킨다. 5 // 표현식 1 'abcd' // 표현식 2 5 + 5 // 표현식 3 'a' + 'b' + 'c' + 'd' // 표현식 4 true && null // 표현식 5 const numbers = [1, 2, 3]; // 표현식이면서 문장 numbers[3]; /..
JavaScript - 함수 다루기 함수 만드는 방법 1. 함수 선언 function 함수이름(파라미터){ 동작; return 리턴값; } 2. 함수 선언을 변수에 할당(함수 표현식) const printA = function () { console.log(‘A’); } printA(); 2번과 같이 함수를 변수에 담음으로 값처럼 표현하는 것을 함수표현식(Function Expression)이라고 부른다. 함수표현식은 함수를 값처럼 표현한 모든것을 일컫는데, 예를들면 아래와같이 addEventListener를 할 때에 두번째 파라미터 함수를 주는 경우도 함수를 값처럼 표현한 것이므로 함수표현식이다. document.querySelector('#btn').addEventListener('click', function() { console.l..

티스토리툴바