카테고리 없음
12주차 스테이지어스 내용정리(2)
jjon-jonny
2024. 6. 24. 18:08
자바스크립트의 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 문법
변수 선언, 초기화, 할당 & 호이스팅 (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)