2023. 4. 7. 20:37ㆍ개발일기
이번주에 배운 내용
JavaScript
자바스크립트 기본 문법
자바스크립트 문법 강의를 들었다. 기본 문법은 어느정도 숙지하고 있었지만 전체적으로 강의를 들으면서 놓치고 있던 부분들을 정리할 수 있는 시간이 되었다.
자바스크립트 함수 선언
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function
함수 선언의 방식은 Function 생성자를 통한 생성과 함수표현식(function expression)을 통한 선언을 나뉜다. 동일한 기능을 하는 함수를 선언함으로서 두 선언 방식의 문법적 차이를 알아보았다.
// Function 생성자
function addByFunction(x, y) {
return x + y;
}
// function expression
let addByExpression = function(x, y) {
return x + y;
}
addByFunction(x, y)와 addByExpression(x,y)는 동일한 기능을 하는 함수를 각각 다른 방식으로 선언한 것이다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
화살표 함수를 통해 함수를 선언하는 방식도 한번 더 복습하였다. 화살표 함수는 ES6에서 추가된 문법으로 간략하게 생략 가능한 부분이 많기 때문에 한번더 정리를 하는 시간을 가지면서 손에 익히는 것이 중요할 것 같다.
// 화살표 함수
let addByArrow1 = (x, y) => {
return x + y;
}
// 함수 내부 로직이 한줄로 끝날 경우 다음과 같이 표현 가능하다.
let addByArrow2 = (x, y) => x + y;
// 매개변수가 하나일 때는 다음과 같이 표현이 가능하다.
let multiByArrow = x => x * x;
화살표 함수를 통한 함수 표현은 this 바인딩 부분 등에 있어서 전통적 함수 선언방식과 차이가 있기 때문에 모든 부분에서 동일하다고 할 수 없으므로 잘 사용해야겠다고 생각했다.
자바스크립트 표준 내장 객체
자바스크립트 표준 내장 객체인 Object와 Array에 대해 간략하게 살펴보았다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
Object vs Array
- Object key와 value를 가진다. 순서가 없다.
- Array 순서를 가진다.
Object 생성
// Object 생성
let person = { name: "김말자", age: 39, gender: "여자" };
// 생성자 함수를 통한 Object 생성
function PersonMaker(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
let person1 = new Person("김요롱", 30, "남자");
let person2 = new Person("박순희", 25, "여자");
Object 정적메서드
Object에서 사용하는 메서드에 대해서도 전체적으로 학습했다.
강의와 교재에서 다루고 있는 모든 메서드를 기억 할 순 없지만 자주 사용하지 않았어서 손에 익지 않았던 메서드들에 대해 정리해보았다.
// Object.entries() 메소드
// Object book의 key와 value들을 2차원 배열로 반환한다.
let book = {
title: "멋진신세계", writer: "올더스 헉슬리"
};
let bookEntries = Object.entries(book);
console.log("Object >> ",book)
console.log(".entries >> ",bookEntries);
/** 출력
* Object >> { title: '멋진신세계', writer: '올더스 헉슬리' }
* .entries >> [ [ 'title', '멋진신세계' ], [ 'writer', '올더스 헉슬리' ] ]
*/
// Object.assign() 메소드
// 기존 객체를 복사하여 새로운 객체 생성, 이때 특정 값의 변경도 가능하다.
let novel = { title: "1984", writer: "올더스 헉슬리"};
let copyNovel = Object.assign(novel);
let correctNovel = Object.assign({}, novel, { writer: "조지 오웰" });
console.log(copyNovel)
console.log(correctNovel);
/** 출력
* { title: '1984', writer: '올더스 헉슬리' }
* { title: '1984', writer: '조지 오웰' }
*/
Object 비교
Object 는 내부의 key와 value가 같더라도 동일하게 비교할 수 없다. 자바스크립트 내부 메모리의 주소가 동일하지 않기 때문.
따라서 string으로 변경하거나 JSON 내장객체의 stringify메서드를 통해 문자열로 변경한 다음 비교가 가능하다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON
let book1 = { title: "우리가 빛의 속도로 갈 수 있다면", writer: "김초엽"};
let book2 = { title: "우리가 빛의 속도로 갈 수 있다면", writer: "김초엽"};
console.log(book1 === book2); // false
console.log(JSON.stringify(book1) === JSON.stringify(book2)); // true
Object 병합
객체 타입을 풀어서 다시 합치는 것도 가능하다. ES6에서 추가된 개행문법을 사용했다. ( ... )
let bookInfo = { title: "멋진신세계", genre : "디스토피아, SF" };
let writer = { writer: "올더스 헉슬리" };
let mergedBook = {...bookInfo, ...writer};
console.log(mergedBook);
// { title: "멋진신세계", genre : "디스토피아, SF", writer: "올더스 헉슬리"}
Array 생성
내용
Array 정적 메서드
내용
섬 메서드
내용
필터 메서드
내용
ES6 문법
자바스크립트는 1995년에 Brendan Eich에 의해 발명되었으며 1997년에 ECMA 표준화 된다.
ECMAScript는 자바스크립트의 공식 이름이다.
...
ES5, ES6은 각 자바스크립트 버전을 뜻한다.
https://www.w3schools.com/js/js_versions.asp
ES6 에서 는 다양한 기능이 추가 되었는데 추가된 기능과 문법에 대해 전체적으로 정리하는 시간을 가졌다.
let, const
기존에 변수 선언을 위해 존재하던 var 를 대체해서 나온 선언 키워드
- var: 재할당 가능, 재선언 가능, 호이스팅.
- let: 재할당 가능, 재선언 불가능.
- const: 재할당 불가능, 재선언은 불가능, 초기값 필수.
화살표함수(ArrowFunction)
'function' 이나 'return' 키워드없이 함수를 선언할 수 있다.
※ this : function 은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.
삼항연산자(ternaryoperator)
condition?expr1:expr2
구조분해할당(Destructuring)
배열[] 이나객체{} 의속성을분해해서그값을변수에담을수있다.
// 구조분해 할당
// 배열
let [val1, val2] = [1, "new"];
console.log(val1); // 1
console.log(val2); // "new"
let candys = ["알사탕", "호울스", "마산땅콩카라멜"];
let [c1,c2,c3] = candys;
console.log(c1,c2,c3) // 알사탕 호울스 마산땅콩카라멜
let [c1,c2,c3,c4 = "눈깔사탕"] = candys
console.log(c4) // 눈깔사탕
// 객체
let user = {name: "김말순", age: 30};
let {name, age} = user;
console.log(name) // 김말순
단축속성명
const name = "김호동"
const usersAge = "30"
const user1 = {
name : name,
age: usersAge
}
const user2 = {
name,
age: usersAge
}
전개구문(Spread)
배열이나객체를전개한다.
// 배열
let arr = [1,2,3];
let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]
// 객체
let user = {name: "주랭구", age: 30};
let user2 = {...user}
user2.name = "쿠쿠비"
console.log(user.name) // 주랭구
console.log(user2.name) // 쿠쿠비
// 문자열을 배열에 담을 때도 활용
let str = "test"
let strArr = [...str]
console.log(strArr) // [t,e,s,t]
나머지매개변수(restparameter)
처음부터정한매개변수가아니라도나머지값도추가로넘겨줄수있다.
function func (a, b, ...args) {
console.log("a:", a)
console.log("b:", b)
console.log("나머지:", ...args)
}
func(1, 2, 3)
/** 출력
* a: 1
* b: 2
* 나머지 : 3
*/
func(1, 2, 3, 4, 5, 6, 7)
/** 출력
* a: 1
* b: 2
* 나머지 : 3 4 5 6 7
*/
템플릿리터럴
'백틱!'
자료구조 (맵, 셋)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set
Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조.
Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행할 수 있습니다. Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행할 수 있습니다.
일급객체로서의 함수
https://developer.mozilla.org/ko/docs/Glossary/First-class_Function
First-Class Object
함수도 다른 객체처럼 생성자를 통해 선언하거나, 변수에 할당하거나, 다른 함수의 매개변수로 전달하거나(콜백함수) 함수의 결과로 다른 함수를 제공하거나, 객체나 배열의 속성으로 함수를 할당할 수 있다.
이처럼 함수를 유연하게 사용가능한 것은 일급 객체이기 때문이다.
자바스크립트를 보다 자바스크립트처럼 사용하기 위해 함수를 보다 유연하게 사용하는 방법을 좀더 손에 익혀야겠다.
실행컨텍스트
https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/
페어프로그래밍 - 야구게임 만들기
알고리즘 스터디 시작
느낀점
- 자바스크립트 문법을 좀더 자바스크립트 답게 활용하기 위해 노력할 필요가 있다.
- 알고리즘 페어에서 사람들이 직접 배운 방식으로 활용하는 것을 보고 감동 받음.
- 성능을 조금이라도 높이기 위해 고민하는 점 등을 보고 감동받음
이번 주 Weekly I Learned 관련 작성 글
다음주에 배울 내용
- 알고리즘 주차 돌입 알고리즘 문제 마라톤
- 자바스크립트 다양한 메서드 활용 및 체득할것
- 기술면접 스터디 시작
- 드림코딩 제발 시작하자 포트폴리오 웹사이트 만들면서 css 복습
'개발일기' 카테고리의 다른 글
[TIL] 23.04.11. (0) | 2023.04.11 |
---|---|
[TIL] 23.04.10. (0) | 2023.04.11 |
[TIL] 23.04.08. (0) | 2023.04.08 |
[TIL] 23.04.07. (0) | 2023.04.07 |
항해 99 1주차 토이프로젝트 주간 회고 (0) | 2023.04.05 |