diff --git "a/8\354\243\274\354\260\250/jaewoo/index.md" "b/8\354\243\274\354\260\250/jaewoo/index.md" new file mode 100644 index 0000000..03f2848 --- /dev/null +++ "b/8\354\243\274\354\260\250/jaewoo/index.md" @@ -0,0 +1,323 @@ +# 32장 String + +## String 메서드 + +### indexOf + +문자열에서 인수로 전달받은 문자열을 검색하여 첫 번째 인덱스를 반환한다. + +검색에 실패하면 -1을 반환한다. + +```jsx +const str = 'Hello world' + +str.indexOf('l') // 2 +// 인덱스 3부터 'l'을 검색하여 첫번째 인덱스를 반환한다. +str.indexOf('l', 3) // 3 +``` + +### search + +인수로 전달받은 정규 표현식과 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스를 반환한다. + +```jsx +const str = 'Hello world' + +str.search(/0/) // 4 +``` + +### includes + +es6에 도입된 메서드로 인수로 전달받은 문자열이 포함되어 있는지 확인하여 boolean값으로 반환한다. + +```jsx +const str = 'Hello world' + +str.includes('Hello') // true +// 인덱스 3부터 'l'이 포함되어 있는지 확인 +str.includes('l', 3) // true +``` + +### startsWith + +es6에 도입된 메서드로 인수로 전달받은 문자열로 시작하는지 확인하여 boolean값으로 반환한다. + +```jsx +const str = 'Hello world' + +str.startsWith('He') // true +// 인덱스 5부터 시작하는 문지열이 ' '로 시작하는지 확인 +str.startsWith(' ', 5) // true +``` + +### endsWith + +es6에 도입된 메서드로 인수로 전달받은 문자열로 끝나는지 확인하여 boolean값으로 반환한다. + +```jsx +const str = 'Hello world' + +str.endsWith('ld') // true +// str의 처음부터 5자리까지가 'lo'로 끝나는지 확인 +str.endsWith('lo', 5) // true +``` + +### substring + +첫 번째 인수의 인덱스부터 두 번째 인수의 인덱스에 위치하는 문자의 바로 이전 문자까지 부분 문자열을 반환한다. + +```jsx +const str = 'Hello World' + +str.substring(1, 4) // ell +str.substring(1) // ello World +// 첫 번째 인수 > 두 번째 인수인 경우 두 인수는 교환된다. +str.substring(4, 1) // ell +// 인수 < 0 또는 NaN인 경우 0으로 취급된다. +str.substring(-3) // Hello World +``` + +### slice + +substring메서드와 동일하게 동작한다. + +slice 메서드에는 음수인 인수를 전달할 수 있다. + +음수인 인수를 전달하면 문자열의 가장 뒤에서부터 시작하여 문자열을 잘라내어 반환한다. + +```jsx +const str = 'hello world' + +str.substring(0, 5) // hello +str.slice(0, 5) // hello + +str.substring(2) // llo world +str.slice(2) // llo world + +str.substring(-5) // hello world +str.slice(-5) // wolrd +``` + +### replace + +첫 번째 인수로 전달받은 문자열 또는 정규표현식을 검색하여 두 번째 인수로 전달한 문자열로 치환한 문자열을 반환한다. + +```jsx +const str = 'hello world' + +str.replace('world', 'Hi') // Hello Hi + +const str = 'Hello Hello' +str.replace(/hello/gi, 'Hi') // Hi Hi +``` +--- +# 33장 데이터 타입 Symbol + +## 심벌이란? + +ES6에 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. + +**심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다.** + +```jsx +const mySymbol = Symbol() +console.log(typeof mySymbol) // symbol + +// 심벌 값에 대한 설명이 같더라도 유일무이한 심벌 값을 생성한다. +const mySymbol1 = Symbol('mySymbol') +const mySymbol2 = Symbol('mySymbol') +console.log(mySymbol1 === mySymbol2) // false +``` + +### Symbol.for / Symbol.keyFor 메서드 + +Symbol.for 메서드는 인수로 전달받은 문자열을 키로 키와 심벌값의 쌍들이 저장되어 있는 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌 값을 검색한다. + +- 검색에 성공하면 새로운 심벌 값을 생성하지 않고 검색된 심벌 값을 반환한다. +- 검색에 실패하면 새로운 심벌 값을 생성하여 전역 심벌 레지스트리에 저장한 후 생성된 심벌 값을 반환한다. + +```jsx +const s1 = Symbol.for('mySymbol') +const s2 = Symbol.for('mySymbol') + +console.log(s1 === s2) // true +``` + +Symbol.keyFor 메서드는 전역 레지스트리에 저장된 심벌 값의 키를 추출 할 수 있다. + +```jsx +const s1 = Symbol.for('mySymbol') +Symbol.keyFor(s1) // mySymbol + +const s2 = Symbol('foo') +Symbol.keyFor(s2) // undefined +``` + +## 심벌과 프로퍼티 + +**심벌 값은 유일무이한 값이므로 심벌 값으로 프로퍼티 키를 만들면 다른 프로퍼티 키와 절대 충돌하지 않는다.** + +```jsx +const obj = { + // 심벌 값으로 프로퍼티 키를 생성 + [Symbol.for('mySymbol')]: 1 +} + +obj[Symbol.for('mySymbol') // 1 +``` +--- +# 34장 이터러블 + +## 이터레이션 프로토콜 + +ES6에 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위해 정의한 규칙이다. + +이터러블 프로토콜과 이터레이터 프로토콜이 있다. + +### 이터러블 + +이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 말한다. + +```jsx +const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function' + +isIterable([]) // true +isIterable('') // true +isIterable(new Map()) // true +isIterable(new Set()) // true +isIterable({}) // false +``` + +### 이터레이터 + +이터러블의 Symbol.iterator 메서드가 반환한 이터레이너틑 next 메서드를 갖는다. + +```jsx +// 배열은 이터러블 프로토콜을 준수한 이터러블이다. +const array = [1, 2, 3] + +// Symbol.iterator 메서드는 이터레이터를 반환한다. +Symbol.iterator = array[Symbol.iterator]() + +// next 메서드를 호출하면 이터레이터 result 객체를 반환한다. +console.log(iterator.next()) // {value:1, done:false} +console.log(iterator.next()) // {value:1, done:false} +console.log(iterator.next()) // {value:1, done:false} +console.log(iterator.next()) // {value:undefined, true} +``` + +## 이터러블과 유사 배열 객체 + +유사 배열 객체는 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다. + +```jsx +const arrayLike = { + 0:1, + 1:2, + 2:3, + length:3 +} +// for문으로 순회가능 +for (let i = 0; i < arrayLike.length; i++) { + console.log(arrayLike[i]) // 1 2 3 +} +``` + +유사 배열 객체는 이터러블이 아닌 일반 객체다. + +Symbol.iteraotr 메서드가 없기 때문에 for...of 문으로 순회할 수 없다. + +arguments, NodeList, HTMLCollection은 유사 배열 객체이면서 이터러블이다. +--- +# 35장 스프레드 문법 + +es6에서 도입된 스프레드 문법은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. + +## 함수 호출문의 인수 목록에서 사용하는 경우 + +```jsx +// rest 파라미터는 인수들의 목록을 배열로 전달받는다. +function foo(...rest) { + console.log(rest) // 1, 2, 3 -> [1, 2, 3] +} + +// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다. +foo(...[1,2,3]) +``` + +## 배열 리터럴 태부에서 사용하는 경우 + +### concat + +```jsx +// es5 +var arr = [1,2].concat([3,4]) +console.log(arr) // [1, 2, 3, 4] + +// es6 +const arr = [...[1, 2], ...[3, 4] +console.log(arr) // [1, 2, 3, 4] +``` + +### splice + +어떤 배열의 중간에 다른 배열의 요소들을 추가하거나 제거할때 사용한다. + +```jsx +// es5 +var arr1 = [1, 4] +var arr2 = [2, 3] + +// 세번째 인수에 arr2를 해체해서 전달해야 한다. +// 그렇지 않으면 arr1에 arr2 배열 자체가 추가된다. +arr1.splice(1, 0, arr2) +console.log(arr1) // [1, [2, 3], 4] + +// +Array.prototype.slice.apply(arr1, [1, 0].concat(arr2)) +console.log(arr1) // [1, 2, 3, 4] + +// es6 +arr1.splice(1, 0, ...arr2) +console.log(arr1) // [1, 2, 3, 4] +``` + +### 배열 복사 + +```jsx +// es5 +var origin = [1, 2] +var copy = origin.slice() + +console.log(copy) // [1, 2] +console.log(origin === copy) // false + +// es6 +const copy = [...origin] +console.log(copy) // [1, 2] +console.log(origin === copy) // false +``` + +### 이터러블을 배열로 변환 + +```jsx +// es5 +function sum() { + // 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환 + var args = Array.prototype.slice.call(arguments) + return args.reduce(function (pre, cur){ + return pre + cur + }, 0) +} + +console.log(sum(1,2,3)) // 6 + +// es6 +function sum(){ + // 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환 + return [...arguments].reduce((pre, cur)=>pre+cur, 0) +} + +// rest 파라미터 +const sum = (...args) => args.reduce((pre, cur)=> pre+cur, 0) +``` \ No newline at end of file