diff --git "a/Part2-1\355\214\200 /4\354\243\274\354\260\250-1/\354\265\234\354\232\260\354\204\235.md" "b/Part2-1\355\214\200 /4\354\243\274\354\260\250-1/\354\265\234\354\232\260\354\204\235.md" new file mode 100644 index 0000000..c1608b8 --- /dev/null +++ "b/Part2-1\355\214\200 /4\354\243\274\354\260\250-1/\354\265\234\354\232\260\354\204\235.md" @@ -0,0 +1,136 @@ +> 생소한 개념은 ✨로 표시 + +## 구조분해할당 +### 배열 분해하기 +- 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 객체나 배열을 변수로 '분해'할 수 있는 **구조 분해 할당(destructuring assignment)** 사용 가능
+ ✨다양한 활용방법✨ + - `split()`과 함께 사용하면 한 따옴표로 감싸진 여러 문자열을 쪼개서 활용할 수도 있음 + - 쉼표를 사용하여 빈칸으로 놔두면 필요하지 않은 배열 요소를 무시할 수 있음 + - 할당 연산자(`=`) 좌측에는 할당할 수 있는 모든 요소가 올 수 있고 우측에는 배열 말고도 이터러블(반복 가능한 객체)가 올 수 있음 + - 두 변수에 저장된 값을 교활할 때 활용 가능 + ```javascript + let myJob = 'Police'; + let yourJob = 'Singer'; + + [myJob, youtJob] = [yourJob, myJob]; + console.log(`${myJob} ${yourJob}`); // Singer Police 출력 + ``` + - `...`로 '몇 개만 쓰고 그 나머지' 요소를 다룰 수 있음(rest parameter를 사용한 변수는 맨 마지막에 위치해야함!) + - ✨ 할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러 발생하지 않음 ➡️ WHY? 할당할 값이 없으면 undefined로 취급하기 때문! (기본값을 설정하자) + +### 객체 분해하기 +- 할당 연산자 우측에는 분해하고자 하는 객체, 좌측에는 상응하는 객체 프로퍼티의 '패턴' 작성 +```javascript +// 기본형태 +// ✨ 패턴을 작성할 때 콜론`:`을 사용하여 다른 이름으로 할당할 수도 있음 +let {var1, var2} = {var1:..., var2:...} +``` + - 기본값을 설정할 수 있음. 함수 호출도 기본값으로 할당할 수 있음!! + - 프로퍼티가 여러 개일 때 원하는 값만 뽑아오는 것도 가능 + ```javascript + let tableInfo = { + type: 'wood', + width: 200, + height: 10, + } + let {height} = tableInfo; + console.log(height); // 10 출력 + ``` + - rest parameter`...`도 사용 가능 + - ✨ `let`으로 새로운 변수를 선언하지 않고 기존에 있던 변수에 할당할 수도 있지만 주의할 부분이 있음. + ```javascript + let type, width, height; + + // 에러 발생 ➡️ 자바스크립트가 `{...}`를 코드 불럭으로 해석하기 때문 + {type, width, height} = {type:'wood', width: 200, height: 10}; + // 위의 코드를 소괄호`()`로 감싸서 코드 블럭이 아닌 표현식으로 해석하게 하면 에러 안남 + ({type, width, height} = {type:'wood', width: 200, height: 10}); + + console.log(width); // 200 출력 + ``` + +### 중첩 구조 분해 +- 중첩된 객체로 이루어진 구조도 같은 형태로 할당할 수 있고 그 과정에서 분해하려는 객체에 없는 프로퍼티를 추가할 수도 있음! + +### 똑똑한 매개변수 +- 파라미터를 너무 많이 받아야해서 순서에 유의해야 하는 함수, 함수에서 설정한 기본값을 사용해도 괜찮은 경우 넘겨주는 인자에 `undefined`를 여러 개 넘겨주는 함수 ➡️ BAD 함수 +- ✨ BAD 함수의 매개변수를 모두 모아 함수가 전달받은 객체를 분해 -> 변수에 할당 -> 작업을 수행하게 하는 함수 ➡️ NICE 함수 +- ✨ 함수 매개변수를 구조 분해할 때, 반드시 인수가 전달된다고 가정하고 사용된다는 점 유의하기! + - 예방하기 위해서 빈 객체`{}`를 인수 전체의 기본값으로 만들면 됨! + ```javascript + BadExample(); // 에러 발생 가능성 있음 + NiceExample({}); // 모든 인수에 기본값이 할당됨 + ``` + +## 나머지 매개변수와 전개 구문 +### 나머지 매개변수 `...` +- 함수는 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수에는 제한이 없음 + - 함수를 호출할 때 정의할 때 작성한 인수의 개수보다 많은 인수를 전달하면 작성한 인수의 개수만 가지고 실행. + - 여분의 매개변수를 담을 배열 이름을 `...` 뒤에 붙이면 함수 선언부에 포함시킬 수 있음 + - 이때의 `...`는 '남아있는 매개변수들을 한 곳에 모아 배열에 넣어라'는 의미 + - 나머지 매개변수는 모든 남아있는 인수를 모으는 역할이라 맨 마지막에 작성해야함 + ```javascript + function foodName(first, second, ...others) { + console.log(`${first} ${second}`); // banana apple + console.log(others[0]); // noodle + console.log(others.length); // 3 + } + foodName('banana', 'apple', 'noodle', 'egg', 'cheese'); + ``` + +### arguments 객체 +- `arguments`를 사용하면 인덱스를 사용하여 인수에 접근할 수 있음 +- ✨ **유사 배열 객체**이기 때문에 `map()`사용할 수 없음.. +- ✨ `arguments`는 **인수 전체**를 담음 ➡️ 나머지 매개변수처럼 인수의 일부만 사용할 수 없음.. +- ✨ 화살표 함수는 `arguments`객체 지원하지 않음! + +### 스프레드 문법 +- 함수를 호출할 때 `...`를 사용하면 이터러블 객체가 인수 목록으로 확장됨 + ```javascript + let arr1 = [1, 3, 5, 7]; + let arr2 = [2, 4, 6, 8]; + console.log(Math.max(...arr1, ...arr2)); // 8 + ``` +- 배열을 합칠 때도 활용 가능! +- 꼭 배열이 대상이 아니라도 **이터러블 객체라면** 스프레드 문법 사용 가능 + ```javascript + let str = 'wooseok'; + console.log([...str]); // w,o,o,s,e,o,k + + // Array.from은 이터러블을 배열로 바꿔줌 + console.log(Array.from(str)); // w,o,o,s,e,o,k + ``` + +### 배열과 객체의 복사본 만들기 +```javascript +let arr = [1, 2, 3]; +let arrCopy = [...arr]; // 배열을 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에 + // 매개변수 목록을 새로운 배열에 할당함 + +// 배열 복사본의 요소가 기존 배열 요소와 진짜 같을까요? +alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true + +// 두 배열은 같을까요? +alert(arr === arrCopy); // false (참조가 다름) + +// 참조가 다르므로 기존 배열을 수정해도 복사본은 영향을 받지 않습니다. +arr.push(4); +alert(arr); // 1, 2, 3, 4 +alert(arrCopy); // 1, 2, 3 +``` +```javascript +let obj = { a: 1, b: 2, c: 3 }; +let objCopy = { ...obj }; // 객체를 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에 + // 매개변수 목록을 새로운 객체에 할당함 + +// 객체 복사본의 프로퍼티들이 기존 객체의 프로퍼티들과 진짜 같을까요? +alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true + +// 두 객체는 같을까요? +alert(obj === objCopy); // false (참조가 다름) + +// 참조가 다르므로 기존 객체를 수정해도 복사본은 영향을 받지 않습니다. +obj.d = 4; +alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4} +alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3} +``` diff --git "a/Part2-1\355\214\200 /4\354\243\274\354\260\250-2/\354\265\234\354\232\260\354\204\235.md" "b/Part2-1\355\214\200 /4\354\243\274\354\260\250-2/\354\265\234\354\232\260\354\204\235.md" new file mode 100644 index 0000000..ac7b915 --- /dev/null +++ "b/Part2-1\355\214\200 /4\354\243\274\354\260\250-2/\354\265\234\354\232\260\354\204\235.md" @@ -0,0 +1,74 @@ +> 생소한 개념은 ✨로 표시 + +## 메서드와 this +### 메서드 만들기 +- 자바스크립트에서는 객체의 프로퍼티에 함수를 할당하여 **객체에게 행동할 수 있는 능력을 부여함** +- **메서드**란? + - 객체 프로퍼티에 할당된 함수 + ```javascript + let dog = { + name: 'Charlie', + age: 13 + } + dog.vite = function() { + console.log('물어뜯기!'); + }; + + dog.vite(); // 물어뜯기! + ``` +- 객체를 사용하여 개체를 표현하는 방식 ➡️ **객체 지향 프로그래밍(object-oriented programming, OOP)** + +#### 메서드 단축 구문 +- 위의 예시코드를 `function`키워드 없이 정의하는 코드는 다음과 같다. + ```javascript + let dog = { + name: 'Charlie', + age: 13, + vite() { + console.log('물어뜯기!'); + }, + }; + ``` + +### 메서드와 this +- ✨ 메서드 내부에서 `this`키워드를 사용해 객체에 접근할 수 있음 + - ✨ 이때 '점 앞'의 `this`는 **메서드를 호출할 때 사용된 객체**를 나타냄 + ```javascript + let dog = { + name: 'Charlie', + age: 13, + call() { + console.log(this.name); // 여기에서 'this'는 '현재 객체'(dog 객체). this 대신에 user 써도 됨 + }, + }; + ``` + - user처럼 외부 변수를 사용해 객체를 참조하면 그 변수를 복사한 뒤 다른 값으로 덮어씌웠다는 특수한 상황에 대응하기 어려움 + +### 자유로운 this +- ✨ 자바스크립트에서는 다른 프로그래밍 언어의 `this`와 달리 **모든 함수에서 사용 가능** +```javascript +function call() { + console.log(this.name); // 이 코드는 문법 에러가 일어나지 않는다. +} +``` + - ✨ 이 코드에서 문법 에러가 나지 않는 이유? ➡️ `this`값은 **런타임에 결정**. 동일한 함수라도 다른 객체에서 호출했다면 `this`가 참조하는 값이 달라짐 +- 객체 없이 호출할 때의 `this` + - 엄격 모드라면? ➡️ `this`는 `undefined` 할당 + - 엄격 모드가 아니라면? ➡️ `this`는 전역 객체 참조(`window`객체) + +### this가 없는 화살표 함수 +- 화살표 함수는 **'고유한'** `this`를 갖지 않음 +- 화살표 함수에서 `this`를 참조하면 **화살표 함수가 아닌 '평범한' 외부 함수에서 `this`값 가져옴** + - 별개의 `this`가 만들어지지 않고 외부 컨텍스트에 있는 `this`를 이용하고 싶은 경우에 화살표 함수가 유용 + ```javascript + let dog = { + name: 'Charlie', + age: 13, + call() { + let arrowFunction = () => console.log(this.name); // arrowFunction()의 this는 call()의 this가 됨 + arrowFunction(); + }, + }; + + dog.call(); // Charlie + ```