처음으로 Weekly 미션 코드를 셀프 코드 리뷰 해보았다. 추가할 사항이 있긴 하지만, 코드 리뷰를 해보니 코드 작성 시에는 몰랐던 실수를 알 수 있었고, 궁금한 부분을 정확히 질문할 수 있었다. 앞으로도 꾸준히 해보자.오늘의 나는 무엇을 잘했을까?
오늘의 나는 무엇을 배웠을까?
1. 함수 표현식으로 선언하고 호출
const printHi = function () {
console.log('Hi');
}
printHi(); // Hi
2. 객체의 메소드로 사용
const obj = {
printHi: function(name) {
console.log(`Hi ${name}`);
}
};
obj.printHi('MK'); // Hi MK
3. 배열에 함수를 담아 호출도 가능
const arry = [
function(name) {
console.log(`Hi ${name}`);
},
];
arry[0]('MK') // Hi MK
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click me</button>
<script>
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('button clicked!');
});
</script>
</body>
</html>
function sayHi(name) { // name이 매개변수
console.log(`Hi ${name}`); // 이와 같이 함수 내부에 임의의 데이터를 전달
}
undefined
=
) 로 기본값을 전달해 줄 수 있음undefined
를 전달하면 기본값 사용 가능function func(x, y = x + 3) {...}
sayHi('MK'); // MK가 인자
length
프로퍼티, 인덱싱, for...of
문 사용 가능...
을 붙여 정의한 매개변수function foo(...rest) {
console.log(Array.isArray(rest)); //true
console.log(rest); // [1, 3, 5, 7]
}
foo(1, 3, 5, 7);
먼저 선언된 매개변수에 할당된 인자를 제외한 나머지 인자들이 모두 배열에 담겨 할당
따라서 나머지 매개변수는 반드시 마지막 매개변수
함수 객체의 length
프로퍼티에 영향을 주지 않음 (counting 되지 않음)
function
키워드 대신 =>
사용하여 함수를 선언
익명 함수로만 사용
1. 매개변수 지정
() => {...} // 매개변수가 없는 경우
x => {...} // 매개변수가 한개일 경우 소괄호 생략 가능
(x, y) => {...} // 매개변수가 두개 이상아면 소괄호 생략 불가
2. 함수 몸체 지정
x => { return x + x }
x => x + x // 위와 동일, 함수 몸체가 한 줄이라면 중괄호 생략 가능, 암묵적으로 반환
() => ({ name: 'MK'}) // 객체 반환 시 소괄호 사용
() => {
const x = 10;
return x + x;
} // 함수 몸체가 여러 줄이면 반드시 중괄호로 감싸줌
const add = x => x + x;
console.log(add(3)); // 6
this
의 기본값, 서버에서는 global 객체...this
에 바인딩 될 객체가 동적으로 결정this
는 전역객체에 바인딩 됨function ex1() {
console.log(this); // window
function ex2() {
console.log(this); // window
}
ex2();
}
ex1();
this
가 전역객체를 바인딩this
는 해당 메소드를 호출한 객체에 바인딩 됨const obj1 = {
name: 'MK',
sayName: function () {
console.log(this.name);
}
}
const obj2 = {
name: 'Lee',
}
obj2.sayName = obj1.sayName;
obj1.sayName(); // MK
obj.sayName(); // Lee
this
는 함수가 선언되기 직전에 유효한 this
값에 바인딩const printThis = () => {
console.log(this);
}
const obj = {
name: 'MK',
age: 25,
printThis: printThis,
}
obj.printThis(); // window
let x;
x = 3;
for (let i = 0; i < 3; i++) {
console.log(i);
}
5 // 하나의 값을 작성하는 것이든
5 + 5 // 연산자를 이용한 연산식이든
const name = 'MK';
name // MK
// 변수를 호출하거나 객체의 프로퍼티에 접근하는 것 등등 모두
// 할당 연산자는 값을 할당하는 동작도 하지만, 할당한 값을 그대로 가지는 표현식이다.
title = 'JavaScript'; // JavaScript
// 함수 호출은 함수를 실행하는 동작도 하지만, 실행한 함수의 리턴 값을 가지는 표현식이다.
sayHi(); // sayHi 함수의 리턴 값
// console.log 메소드는 콘솔에 아규먼트를 출력하는 동작도 하지만, undefined 값을 가지는 표현식이다.
console.log('hi'); // undefined
조건 ? truthy 할 때 표현식 : falsy 할 때 표현식
...
사용, 동작은 전혀 다름let arr = [1, 3, 5];
console.log(...arr); // 1 3 5
let arrCopy = [...arr] // 배열 복사도 가능
let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let merged = [...arr1, ...arr2];
console.log(merged); // [1, 3, 5, 2, 4, 6]
let names = ['MK', 'SW', 'YG'];
let obj = {...names};
console.log(obj);
// {0: 'MK', 1:'SW', 2:'YG'}
// 배열의 인덱스가 속성이름인 객체가 만들어짐
객체의 프로퍼티를 간결하고 다양하게 만들 수 있는 방법들이 있음
const name = 'MK';
const age = 25;
const me = {
name,
age,
}
:
없이 하나만 작성 가능const me = {
name: 'MK',
age: 25,
about() {
return `${this.name} is ${this.age}years old.`
}
}
:
과 function
키워드 생략이 가능const obj = {
[표현식]: 값,
}
구조화 된 배열 또는 객체를 분해하여 개별적인 변수에 할당하는 것
const arr = [1, 3, 5];
// 할당 연산자 왼쪽의 값은 변수 리스트 형태
const [one, three, five] = arr;
// 이 때 arr를 초기화자(initializer)라고 한다
// 구조 분해를 할 때 반드시 초기화자를 할당해야 한다
console.log(one, three, five); // 1 3 5
...
를 붙이면 할당되고 남은 요소를 배열로 할당[a, b, ...c] = arr;
[a, b, c = 'none'] = arr;
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10
const obj = {
name: 'MK',
age: 25,
education: 'none'.
}
// 할당 연산자 왼쪽의 값은 객체 형태의 변수 리스트
const {name, age, education} = obj;
const {name: firstName, age, education} = obj;
console.log(firstName); // MK
name
과 구체적인 에러 내용을 담고 있는 message
속성으로 구성const error = new name(message);
e.g. const error = new TypeError('타입 에러');
// 의도적으로 에러를 발생시키기 위해서는 throw 키워드 사용
throw error;
try {
동작시킬 코드
} catch (error) {
에러가 발생했을 때 동작할 코드
}
catch
문 내의 코드가 동작try
블록 내 에러가 발생한 부분 이후 코드는 동작하지 않음++ fially 문
try {
try {
코드
} catch {
코드
} finally {
코드
}
} catch {
finally에서 에러 발생시 실행할 코드
}
arr.forEach(function(item, index, array) {
// 각 요소에 할 무언가
});
index
로 요소의 인덱스 관리 가능array
에는 반복적인 배열 자체가 전달pop
메소드 사용) 반복 횟수도 함께 줄어듦let result = arr.map(function(item, index, array) {
// 요소 대신 새로운 값 반환
});
undefined
=> 가장 큰 차이점const results = arr.filter(function(item, index, array) {
// 조건을 충족하는 요소가 results에 순차적으로 추가
// 조건을 충족하는 요소가 없다면 빈 배열 반환
});
filter
메소드와 다르게 함수가 true
를 반환하면 탐색이 중단되고 해당 요소가 반환const result = arr.find(function(item, index, array) {
// true 반환 시 반복이 중단, 해당 요소 반환
// 조건을 충족하는 요소가 없으면 undefined 반환
});
find
메소드와 동일하게 동작//some: 조건을 만족하는 요소가 1개 이상 있는지
const result = arr.some(function(item, index, array) {
// 조건
});
// every: 모든 요소가 조건을 만족하는지
const result = arr.every(function(item, index, array) {
// 조건
});
some
메소드는 조건에 맞는 요소를 만나는 순간 true
반환 후 반복 종료every
메소드는 조건에 맞지 않는 요소를 만나는 순간 false
반환 후 반복 종료some
은 false
를, every
는 true
를 반환let value = arr.redce(function(accumulator, item, index, array) {
// ...
}, [initial]);
accumulator
: 이전 함수의 호출 결과initial
: 함수 최초 호출 시 사용되는 초깃값 (옵션)reduce
메소드의reduceRight
메소드는 reduce
메소드와 동일한 기능을 하지만 배열의 오른쪽부터 연산을 수행함sort
는 배열을 정렬할 수 있는 메소드arr.sort(argument)
reverse
는 배열의 순서를 뒤집어 주는 메소드arr.reverse()
sort
와 마찬가지로 원본 배열의 순서를 뒤집어 버림type
속성을 module로 지정<script type='module' src='example.js'></script>
export
키워드를 붙여줌export const num = 10;
export function ex() {
console.log('JS');
}
export
된 변수나 함수를 다른 파일에서 불러 오려면 import
키워드 사용import { 불러올 변수, 불러올 함수, ... } from '모듈 파일 상대 경로';
as
키워드를 붙이고 이름을 바꿔줄 수 있음import { sayHi as printHi } from '모듈 파일 상대 경로';
모듈 파일에서 export
하는 모든 대상을 불러올 수도 있음
*
: 와일드카드 문자 (Wildcard Character)
import * as 불러 올 이름 from '모듈 파일 상대 경로';
이 때 불러온 대상을 사용할 때는 불러올 이름.변수(함수)
와 같이 객체 형식으로
export
할 때도 코드를 한꺼번에 다룰 수 있음
export { 내보낼 대상 [as ~ : 옵션], ... } ;
위와 같이 작성하면 일일이 export
키워드를 붙이지 않아도 됨
Default Export vs. Named Export
내일의 나는 무엇을 해야할까?