정골라코딩

Rest Operator 란? Rest Operator(나머지 매개변수)는 함수의 나머지 인자를 가리키며 여러 개의 매개변수를 하나의 배열로 묶어서 전달받을 수 있습니다. 문제 설명) 나머지 매개변수 사용하기 mul() 함수의 인자 내에 rest operator를 이용해 모든 매개 변수의 곱을 구하는 함수를 작성하세요. 상단에 작성된 sumArray 함수의 구조를 참고하세요. 함수의 마지막 매개변수 앞에 “…”를 붙이면 모든 후속 매개변수를 배열에 담아 저장합니다. 이 때 마지막 매개변수만 나머지 매개변수로 설정할 수 있습니다. mul(2, 5, 6) 은 60을 반환하고 mul(2, 4, 6, 8)은 384를 반환합니다. 나머지 매개변수를 일반 매개변수와 함께 사용하기 나머지 매개변수를 이용해 multi..

문제 설명) 1. map 함수를 구현하세요. map 함수는 배열의 각 원소를 변환한 새로운 배열을 반환합니다. func - (현재 아이템) => 변환된 아이템 형식입니다. ex) item => item * 2 함수는 배열의 모든 원소에 *2를 적용합니다. array의 내장 map 함수를 쓰지 않고, for문을 이용해 구현해보세요. 2. filter 함수를 구현하세요. filter 함수는 배열의 각 원소 중 조건에 해당하는 원소만 들어있는 새로운 배열을 반환합니다. func - (현재 아이템) => 조건(true or false) 형식입니다. ex) item => item > 5 함수는 5보다 큰 값들만을 반환합니다. array의 내장 filter 함수를 쓰지 않고 구현해보세요. 3. reduce 함수를 ..

this란? this의 값은 함수를 호출한 방법과 환경에 따라 동적으로 세팅됩니다. 아래 예제에 this에 할당된 변수가 무엇을 의미하는지 살펴봅시다. var num = 0; function add() { this.num = 1; num++; console.log(num); // 2 console.log(window.num); // 2 console.log(num === window.num); // true } add(); 함수 선언문 안에서 this는 global 객체를 의미합니다. 함수 선언식이 내부 함수에서 선언될 경우 global이나 window 처럼 전역객체에 binding이 됩니다. 이러한 이벤트 binding 은 이 순서로 이루어집니다. 이벤트를 받아 줄 요소를 선택합니다. 선택한 요소에 어..

자바스크립트에서 자주 사용되는 배열 메서드에 대해서 알아봅니다. Array.prototype.forEach() forEach 메서드는 배열의 원소를 하나씩 순회하면서 callback 함수를 수행합니다. return 값은 없으므로 undefined를 출력합니다. forEach 함수의 매개변수에는 콜백함수가 들어오고, 콜백 함수의 매개변수에는 value와 index를 받습니다. 즉, 다음 예시에서는 배열 [1,2,3,4,5]에서 각 원소 하나씩은 순회하면서 value와 index를 받습니다. const result = [1, 2, 3, 4, 5].forEach((value, index) => { console.log("index:", index, "value:", value); }); /* 출력 index:..

클로저를 사용하는 이유는 상태를 안전하게 은닉하고 보존시키기 위함입니다. 그리고 이를 수정하는 방법은 특정 함수한테만 그 권한을 줍니다. 즉, 다수의 개발자와 함께 일을 할 때 실수를 방지하고 더 탄탄한 코드를 만들기위한 코드 패턴입니다. 따라서 다음과 같이 클로저를 만들어 사용합니다. function createCard() { let title= ""; let content= ""; function changeTitle(text) { title= text } function changeContent(text) { content= text } function print() { console.log("TITLE -", title); console.log("CONTENT -", content); } retu..

함수에서 사용되는 This 기본적으로 전역 컨텍스트에서 this는 window를 가리킵니다. 따라서 전역 렉시컬 환경에 있는 name도 접근할 수 있습니다. const name = "elice"; console.log(this); //window {...} 일반 함수 호출에서도 this는 window를 가리킵니다. 따라서 myFunc 함수 내부에 있는 name에 접근 할 수 없습니다. function myFunc() { const name = "elice"; console.log(this); } myFunc(); // 일반 함수 호출시 window {...} 생성자 함수 호출 생성자 함수 내부의 this는 new 키워드를 통해 앞으로 만들어질 인스턴스 객체를 가리킵니다. 생성자 함수는 함수 이름으로 된 ..

실행 컨텍스트 1) 전역에 존재하는 코드 : 전역에 존재하는 코드는 함수나 클래스 내부의 코드를 무시하고 컨텍스트를 가집니다. 2) 함수에 존재하는 코드: 함수에 존재하는 코드는 함수 내부에서만 컨텍스트를 가집니다. 그리고 호출되는 순서에 따라 스택에 쌓이고, 나중에 쌓여진 함수부터 실행됩니다. 렉시컬 환경 어려운 말처럼 보이지만, 렉시컬 환경은 식별자와 식별자에 연결된 값을 저장하는 자료구조 입니다. 다음 예시를 살펴봅시다. const myName = "Elice"; function Coder() { const title = "Coder Land"; return title; } 전역으로 생성되는 렉시컬 환경에서는 myName, Coder 이렇게 2개의 식별자와 식별자에 연결된 값이 저장됩니다. myNa..

문제 설명) 기존 자바스크립트 문법은 클래스 표현식이 없었지만 ES6는 클래스를 정의하여 사용할 수 있습니다. class 키워드로 클래스를 정의할 수 있습니다. 클래스 내에 생성자(constructor())도 항상 포함되어 있어야 합니다. 클래스에 대한 자세한 내용은 링크에서 확인해보세요! class ClassName { constructor() { ... } } 아래는 자동차의 이름과 연도에 대한 정보를 담는 클래스입니다. class Car { constructor(name, year) { this.name = name; this.year = year; } } 클래스 객체 생성은 아래처럼 할 수 있습니다. let myCar1 = new Car("Ford", 2014); l et myCar2 = new ..

문제 설명) 덧셈 함수라고 많은 분들이 알고 계시는 reduce()는, 사실 매우 강력한 함수입니다. reduce()는 배열의 각 요소에 대해 주어진 함수를 실행한 후, 하나의 결과값을 반환합니다. 앞에서 학습한 map이 배열의 각 요소를 변형한다면, reduce는 배열 자체를 변형합니다. 예를 들어, 배열에 들어있는 숫자를 더하거나 평균을 구하는 것은 배열을 값 하나로 줄이는 동작입니다. 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초기값); 위 문법에서 이전 값이 아니라 누적 값이라는 점을 유의해주셔야 합니다. 더보기 (참고) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objec..

문제 설명) map() 함수는 각 배열 요소를 정의된 함수를 통해 변환한 결괏값들로 새 배열을 반환합니다. 쉽게 말해 배열을 가공하여 새 배열을 만드는 함수입니다. 예를 들어 아래와 같이 딕셔너리 배열이 주어졌습니다. 딕셔너리 요소인 firstname과 lastname을 합한 전체 이름을 출력하려고 합니다. var persons = [ {firstname : "Malcom", lastname: "Reynolds"}, {firstname : "Kaylee", lastname: "Frye"}, {firstname : "Jayne", lastname: "Cobb"} ]; 먼저 getFullName() 함수에 대해 살펴봅시다. 해당 함수는 item의 firstname과 lastname을 더해서 반환하고 있습니다..