원글 페이지 : 바로가기
자바스크립트의 2가지 문제 1. 중복 선언 문제 2. hoisting 문제 ==> 예측가능 어려움 var number = 10 console.log(number) //10 var number= 20 console.log(number) //20 number 변수가 2개 생기는 것이 아니라 다시 선언되는 것임. function test(){ console.log(“hello”) } test() function test() { console.log(“bye”) } test() 함수도 마찬가지 이다 호이스팅 문제로 인해서 bye 가 남게 되고 test 2번하게 되면 2번다 바이바이로 출력되게 됨. es5 까지는 이런 문제가 있었다가 보완으로 나온게 es6 문법 https://velog.io/@wlwl99/%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8-%EC%B4%88%EA%B8%B0%ED%99%94-%ED%95%A0%EB%8B%B9-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85 변수 선언, 초기화, 할당 & 호이스팅 (Hoisting) [변수 선언 키워드 let, const, var의 차이]( https://velog.io/@wlwl99/%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8-%ED%82%A4%EC%9B%8C%EB%93%9C-let-const-var%EC%9D%98-%EC velog.io 참고 하자.. console.log(number) let number = 10 //error function test(){ //함수 선언식 // 함수 표현식 let test2 = function(){ //es5 에서는 안돌아감 //함수 람다식 let test3 = () => { } // 함수 표현식 == 함수 람다식 다만 편할 뿐 ㅋㅋ 화살표 함수 VS 함수 표현식 1. Template Literals const name = ” stageus” console.log(“나는” + name) console.log(`내이름은 ${name} 입니다`) const power = num => num * num const number = 20 console.log(`넓이는 ${power(number)} 입니다`) 2. Object Literals const memberList = [ { “name”: “태준”, “age”: 23 } ] const key = “name” memberList[0][key] // == memberList[0].name 3. Default Prameter const area = (radius, pie = 3.14) => { return radius * radius * pie } console.log(area(3, 3.14)) console.log(area(4, 3.14)) console.log(area(1, 3.14)) console.log(area(2, 3.14)) console.log(area(10, 3.14)) console.log(area(1)) 4. Rest Parameter const test = (…numbers) => { //매개변수에 …을 붙여서 만들면 자동으로 list 가 됨 for (let index = 0; index < number.length; index++) { } } 5. spread const list = [1, 2, 3] console.log(list) console.log(...list) ...list 자체가 1, 2, 3, 4, 5... const tmp1 = [1, 2, 3] const tmp2 = [1, 2, 3] const tmp3 = [...tmp1, ...tmp2] //Pass by Value / Pass by Reference //원시타입 / 참조타입 // 원시타입 참조타입 메모리에 서로 다른 영역에 저장됨.. 힙 / 스택 //위 2개가, 매개변수로 전달될 때 다른 방식으로 전달됨 // 원시 ==> 밸류 // 참조 레퍼런스 const convert = (data) => { data += 1 } let num = 10 console.log(num) //10 convert(num) console.log(num) // 10 let num = [10] console.log(num) //10 convert(num) console.log(num) // 11 // 함수형 프로그래밍 원칙 // 모든 함수는 다른 값을 변조시키면 안된다. 해결방법 convertlist([…numlist]) // json 문법 6. Destructuring 참조타입 문법임 const shape = { “rect”: { “x”: 100, “y”: 50 } } const printshape = (data) => { const x = data.rectangle.x const y = data.rectangle.y const { x, y } = data.rectangle // 이게 destructuring 이라는 문법 console.log(`x길이는 ${data.rect.x}입니다`) console.log(`x길이는 ${x}입니다`) } printshape({ …shpae }) 7. list helper list 를 대상으로 반복문을 써야할 때 사용 할 수 있는 문법 const data = [1, 2, 3, 4, 5] for (let index = 0; index < data.length; index++) { console.log(data[index]) } data.forEach((elem) => { console.log(elem) }) // 위에 2개는 동일한 코드이다. data.forEach(elem => console.log(elem) ) const newData = data.map(() => { return }) // 이게 기본 문법이다. const newData = data.map((elem) => { return elem * elem }) console.log(newData) const newData = data.map(elem => elem * elem) const newData2 = data.filter((elem) => { return elem < 3 }) //이게 기본 문법 const result = data.reduce((acc, elem) => { return acc + elem }, 0)