[WIL] 23.04.03. - 23.04.06.

이번주에 배운 내용

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) // 김말순

 

단축속성명

객체의key와value값이같다면, 생략가능.

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 관련 작성 글

https://youngsimi.tistory.com/33 

[JS] 선언의 범위 (scope)

https://youngsimi.tistory.com/34 

[JS] 객체 생성

https://youngsimi.tistory.com/35 

[JS] 객체 속성 접근 방식

https://youngsimi.tistory.com/36 

[JS] 객체 메소드, 객체 비교, 객체 병합

 

다음주에 배울 내용

• 알고리즘 주차 돌입 알고리즘 문제 마라톤
• 자바스크립트 다양한 메서드 활용 및 체득할것
• 기술면접 스터디 시작
• 드림코딩 제발 시작하자 포트폴리오 웹사이트 만들면서 css 복습