자바스크립트

Super - 부모 클래스 - super 키워드는 constructor 안에서랑 함수에서만 사용할 수 있다. class Person { name; year; constructor(name, year) { this.name = name; this.year = year; } sayHello() { return `Hello I'm ${this.name}`; } } class Singer extends Person { sing() { return `노래합니다.`; } constructor(name, year, part) { // 부모 클래스 // Person() 이거랑 똑같음 super(name, year); this.part = part; } sayHello() { // undefined입니다. rap 파트입..

내배캠 사전교육이 끝나갈 무렵 팀 소개 페이지 프로젝트가 발제되었다. 팀원들이랑 사전교육 내내 열심히 했었어서 걱정이 없었고, 결과적으로는 하려고 했던 모든 계획을 다 이루어 냈다! 소중했던 첫 프로젝트 간단하게 기록하기 ㅎㅎ 1. 소개 내일배움캠프 사전교육 1조 팀 소개 페이지 제작 프로젝트입니다. https://eunji624.github.io/1suk2jo/ 팀명 🍔먹고하조 팀장 유은지 팀원 김영우 정기욱 최수영 2. 사용 기술, 라이브러리 - HTML, CSS - Javascript - Jquery - Bootstrap 3. 페이지 소개 1) 메인페이지 - 상단 Navbar: 로고 및 카테고리 별로 페이지 이동 - 메인 페이지 section: 간단한 인사와 소개, 목표 기재 - 하단 footer:..

본격적인 node.js 주차가 시작됐다. 자바스크립트 꽤 익숙해진 줄 알았는데 아직 써보지 못했던 구조 분해 할당이 헷갈려 기록해봐야겠다. 🧨 구조 분해 할당 - 배열이나 객체의 속성을 해체하여 그 안의 값을 개별 변수로 담을 수 있게 하는 표현식 - 구조화된 배열과 같은 이터러블 또는 객체를 구조파괴(destructuring) 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. - 배열의 각 요소를 배열로부터 추출, 1개 이상의 변수에 할당한다.(배열의 길이에 맞춰서 변수 할당 하지 않아도 OK) - 배열 구조 분해 할당의 대상(할당문의 우변)은 이터러블이어야 한다. 🙋‍♀️ 이터러블? Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토 타입 체인 통해 상속 받은..

메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 1. this? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable) - this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. - 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. - 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리키는데 , 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 ..

🔍 문제 - 문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return ⌨️ 입출력 예시 🙋‍♀️ 내가 푼 방식 - 대소문자 변환하면 떠올랐던건 toUpperCase, toLowerCase였다. - 각각의 요소들을 돌면서 각 요소의 문자가 UpperCase가 된 상태와 동일하다면 LowerCase 해주어 소문자로 바꿔주었고 - LowerCase가 된 상태와 동일하다면 UpperCase 해주었다. - 각각 해준 값들을 빈 배열값에 넣어두었고, join 메소드를 통해 문자열로 추출하며 반환하였다. - 다른사람의 풀이를 봐야할것같당.. 메소드가 많아 훨씬 간결하게 하지 않았을까 생각이 든다. function solution(my_string) { var ..

🔍 문제 - 문자열 my_string이 매개변수로 주어지고, my_string에서 중복된 문자를 제거한 후 하나의 문자만 남긴 문자열을 return ⌨️ 입출력 예시 🙋‍♀️ 내가 푼 방식 - 드디어 모던자바스크립트 Deep dive 책에서 봤던 Set을 사용해보았다!! - my_string 값을 배열로 받아 각 요소의 중복을 제거 해준 후 - join('') 메소드로 배열의 모든 요소를 연결해 하나의 문자열로 만들어주어 반환한다. function solution(my_string) { var answer = new Set([...my_string]); let answer_arr = [...answer].join(""); return answer_arr; } 참고자료: 프로그래머스 코딩테스트 https:..

🔍 문제 - 문자열 my_string이 매개변수로 주어질 때, my_string 안에 있는 숫자만 골라 오름차순 정렬한 리스트를 return하기 ⌨️ 입출력 예시 🙋‍♀️ 내가 푼 방식 - 숫자만 출력은 어떻게 할지 검색해보다가 만난 정규식 - 숫자만 추출해주는 정규식으로 정리후 str 변수에 넣어줬다. function solution(my_string) { var answer = []; let regex = /[^0-9]/g; let str = my_string.replace(regex, ""); console.log(str);// 12392 return answer; } solution("hi12392"); - 입출력 예시에서는 배열 값이기 때문에 .split() 메소드로 배열 안에 넣어준 다음 .s..

🔮 Symbol - 자바스크립트의 ES6에서 도입된 7번째 데이터 타입 - 변경 불가능한 원시값, 다른 값과 중복되지 않는 유일무이한 값 ✨ 생성 -> Symbol 함수 - 심벌값은 Symbol 함수를 호출하여 생성해야 한다. - 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없고, 다른 값과 절대 중복되지 않는다. const firstSymbol = Symbol(); console.log(typeof firstSymbol);// symbol - 생성자 함수로 객체를 생성하는 것처럼 보이지만, 생성자 함수들과 달리 new 연산자와 함께 호출하지 않는다. new 연산자로 생성된 것들을 호출하면 객체(인스턴스)가 생성되지만, 심벌 값은 변경 불가능한 원시값이다. - 심벌 함수에는 선택적으로 문자열을 인수..

자료형에는 8가지 자료형이 있는데 그 중 7개는 원시형이다. 원시형은 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있기 때문에 '원시형'이라 부른다. 그러나 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 📍객체형 - 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다. - {...} 중괄호를 사용해 만들고, 중괄호 안에는 'key-value' 형태인 프로퍼티를 여러 개 넣을 수 있다. - 중괄호를 이용해 객체를 선언하는 것을 객체 리터럴이라고 부르며 객체 선언 시 주로 이 방법을 사용한다. - key -> 문자형만 허용 / value -> 모든 자료형 허용 - 프로퍼티 키는 프로퍼티의 이름 또는 식별자라고도 한다. 📍 리터럴과 프로퍼티 // 'user' 라는 객체 리터..

✨ 배열 - 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조 let arr = ['apple', 'banana', 'orange']; - 배열 요소에는 0부터 시작하는 숫자가 매겨져 있다.(인덱스) let arr = ['apple', 'banana', 'orange']; // 배열의 첫번째 요소의 인덱스는 무조건 0부터 console.log(arr[0]);// apple console.log(arr[1]);// banana console.log(arr[2]);// orange - 새로운 요소를 배열에 추가하는 것도 가능하다. let arr = ['apple', 'banana', 'orange']; arr[3] = 'lemon'; console.log(arr);// (4) ['apple', 'banana',..