언어/자바스크립트 21

JavaScript Call by value Call by reference

JavaScript Call by value Call by refrence Call by value와 Call by refrence는 각각 값 전달, 참조 전달 로 불리며, 변수, 객체 등이 함수에 인자(Argument)로 들어가 매개 변수(Parameter)를 어떤 식으로 전달 할지 결정하는 방식이다. Parameter와 Argument Parameter (매개 변수) 함수 선언부에 정의되고, 호출 시 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수 매개 변수의 전달 방식으로 Call by value, Call by Reference가 있다. Argument (인수) 함수 호출부에 정의되고, 호출 시 함수로 값을 전달해 주는 변수 Call by value (값 전달, 값에 의한 호출) A..

JavaScript substr substring slice

JavaScript substr substring slice 문자열 관련 알고리즘 문제를 풀다 무지성으로 사용 한 메서드를 기록으로 남긴다. substr sbustr(시작, 길이) 또는 substr(시작) 시작부터 길이만큼 문자열을 자르며 길이를 생략하면 시작부터 끝까지 자른다. let str = "Absolute"; let res = str.substr(3, 2); console.log(res); // ol let str = "typeGuard"; let res = str.substr(4); console.log(res); // Guard substring substring(시작, 종료) 또는 substring(시작) 시작에서 종료까지 문자열을 자른다. 여기서 종료 위치는 -1이다. let str = ..

JavaScript Destructuring 구조 분해 할당

JavaScript Destructuring 구조 분해 할당 객체/배열을 분해하여 변수로 사용할 수 있게 해준다. 분해(Destructuring)는 파괴(Destructive)를 의미하지 않는다. 객체나 배열을 복사 후 변수로 분해 해준다는 의미다. 객체 구조 분해 - 중괄호 안 상수로 사용할 이름은 임의로 작성한다. 배열 구조 분해 - 대괄호 안 상수로 사용할 이름은 임의로 작성한다. - 콤마로 일부 반환값을 무시할 수 있다.

JavaScript ES Modules(ESM ES6)

JavaScript ES Modules 모듈이란 여러 기능(함수/변수 등)이 모여있는 하나의 파일이다. 모듈화를 통해 유지 보수와 재사용성을 높일 수 있다. ES 모듈은 기본적으로 strict 모드가 적용되며 번들링 시 파일 용량이 커지지 않는다. CJS(CommonJS) 모듈은 직접 strict 모드를 걸어주어야 하고 번들링 시 파일이 커지는 단점이 있다. 번들링 자바스크립트를 공부하다 보면서 번들링이라는 단어를 자주 접하게 되었다. 번들이란 단어의 의미는 묶음이다. 번들링의 프로그래밍적 해석은 각 모듈들의 의존성 관계를 파악해 그룹화 시키는 작업이다. 모듈과 스크립트 구분 - import / export가 있으면 모듈 없으면 스크립트 // 스크립트 // 모듈 exprt "" import "" from..

JavaScript concat

JavaScript concat 인자로 주어진 배열이나 값을 기존 배열과 합쳐 새 배열 return 기존 배열 변경하지 않음(얕은 복사) - concat() const array = ["로니콜먼", "브렌치워렌", "리치피아나", "숀클로리다"] const copyArray = array.concat(array); console.log(copyArray); // ['로니콜먼', '브렌치워렌', '리치피아나', '숀클로리다'] - 12가지 색 랜덤 셔플 const array = ["red", "orange", "yellow", "green", "pink", "black"]; const copyArray = array.concat(array); let shuffle = []; for (let i = 0; c..

JavaScript splice slice

JavaScript splice slice splice 기존 배열 요소를 교체 삭제 추가하여 배열 변경 - splice() - 인덱스 0에 요소 0을 추가 const array = [1, 2, 3, 4, 5]; array.splice(0, 0, 0); console.log(array); // [0, 1, 2, 3, 4, 5] - 인덱스 0부터 요소 1개 삭제 const array = ["이재명", "윤석열", "심상정", "안철수"]; array.splice(0, 1); console.log(array); slice 다른 배열 얕은 복사 원본 배열은 수정되지 않음 - slice() - 인덱스 0부터 5까지 복사(end는 미포함 4까지) const array = ["red", "orange", "yello..

JavaScript 삼항 조건 연산자

JavaScript 삼항 조건 연산자 조건이 true/false에 따라 다르게 실행 - 조건문 ? 실행문(true) : 실행문(false) - 삼항연산자 - O/X를 번갈아 가며 콘솔 출력 let turn = "O"; setInterval(() => { console.log(turn); turn = turn === "O" ? "X" : "O"; }, 1000); - if문 if (turn === "O") { turn = "X"; } else if (turn === "X") { turn = "O"; } - 삼항연산자 - 20이상이면 성인 const age = 19; let result; (age >= 20) ? result = "성인" : result = "미성년자"; console.log(result);..

JavaScript map

JavaScript map 배열 메서드로 모든 요소들의 지정 함수 실행 후 새로운 배열 return - 매개변수는 element와 index - forEach와 같은 반복문이지만 return 값이 있다는 점에서 차이가 있음 - map() - 각 요소 * 10 const array = [1, 2, 3, 4, 5]; const res = array.map((e, i) => e * 10); console.log(res); // [ 10, 20, 30, 40, 50 ] - 각 요소의 서울시 문자열 추가 const array = ["강동구", "강서구", "강남구", "강북구"]; const res = array.map((e, i ) => `서울시 ${e}`); console.log(res); // [ '서울시 ..