728x90
반응형
JavaScript [6] - this와 배열 메서드 기초
this
- 어떠한 object를 가리키는 키워드
- JavaScript의 함수는 호출될 때 this를 암묵적으로 전달받음
- JavaScript에서의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작
- JavaScript는 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라짐
- 즉, 함수를 선언할 때 this에 객체가 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정됨
전역 문맥에서의 this
- 브라우저의 전역 객체인 window를 가리킴
- 전역객체는 모든 객체의 유일한 최상위 객체를 의미
console.log(this) // window
함수 문맥에서의 this
함수의 this 키워드는 다른 언어와 조금 다르게 동작
- 단순 호출
- 전역 객체를 가리킴, (브라우저에서 전역은 window를 의미)
const myFunc = function () {
console.log(this)
}
// 브라우저
myFunc() // window
- Method (Function in object, 객체의 메서드로서)
- 메서드로 선언하고 호출한다면, 객체의 메서드이므로 해당 객체가 바인딩
const myObj = {
data: 1,
myFunc() {
console.log(this) // myObj
console.log(this.data) // 1
}
}
myObj.myFunc() // myObj
- Nested (Function 키워드)
- forEach의 콜백 함수에서의 this가 메서드의 객체를 가리키지 못하고 전역 객체 window를 가리킴
- 단순 호출 방식으로 사용되었기 때문
- 이를 해결하기 위해 등장한 함수 표현식이 바로 화살표 함수
const myObj = {
numbers: [1],
myFunc() {
console.log(this) // myObj
this.numbers.forEach(functon (num) {
console.log(num) // 1
console.log(this) // window
})
}
}
myObj.myFunc()
- Nested (화살표 함수)
- 이전에 일반 function 키워드와 달리 메서드의 객체를 잘 가리킴
- 화살표 함수에서 this는 자신을 감싼 정적 범위
- 자동으로 한 단계 상위의 scope의 context를 바인딩
const myObj = {
numbers: [1],
myFunc() {
console.log(this) // myObj
this.number.forEach(number) => {
console.log(number) // 1
console.log(this) // myObj
})
}
}
myObj.myFunc()
화살표 함수
- 화살표 함수는 호출의 위치와 상관없이 상위 스코프를 가리킴(Lexical Scope this)
- Lexical Scope
- 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정
- Static Scope라고도 하며 대부분의 프로그래밍 언어에서 따르는 방식
- 따라서 함수 내의 함수 상황에서 화살표 함수를 쓰는 것을 권장
let x = 1 // global
function first() {
let x = 10
second()
}
function second() {
console.log(x)
}
first() // 1
second() // 1
Array(배열)
- 키와 속성들을 담고 있는 참조 타입의 객체
- 순서를 보장함
- 주로 대괄호([])를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
- 배열의 길이는 array.length 형태로 접근 가능
let array = [1, 2, 3, 4, 5]
console.log(array[0]) // 1
console.log(array[-1]) // undefined
console.log(array.length) // 5
console.log(array[array.length-1]) // 5
console.log(array[array.length-2]) // 4
console.log(array[array.length-3]) // 3
console.log(array[array.length-4]) // 2
console.log(array[array.length-5]) // 1
배열 메서드 기초
- array.reverse()
- 원본 배열 요소들의 순서를 반대로 정렬
const numbers = [1, 2, 3, 4, 5]
numbers.reverse()
console.log(numbers) // [5, 4, 3, 2, 1]
- array.push()
- 배열의 가장 뒤에 요소 추가
- array.pop()
- 배열의 마지막 요소 제거
const numbers = [1, 2, 3, 4, 5]
numbers.push(100)
console.log(numbers) // [1, 2, 3, 4, 5, 100]
console.log(numbers.pop()) // 100
console.log(numbers) // [1, 2, 3, 4, 5]
- array.includes(value)
- 배열에 특정 값(value)이 존재하는지 판별 후 true 또는 false 반환
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.includes(1)) // true
console.log(numbers.includes(100)) // false
- array.indexOf(value)
- 배열에 특정 값이 존재하는지 확인 후 가장 첫 번째로 찾은 요소의 인덱스 반환
- 만약 해당 값이 없을 경우 -1 반환
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.indexOf(3)) // 2
console.log(numbers.indexOf(100)) // -1
728x90
반응형
'Front-end > JavaScript' 카테고리의 다른 글
JavaScript[8] - 객체 (0) | 2023.04.25 |
---|---|
JavaScript[7] - 배열 메서드 심화 (2) | 2023.04.24 |
JavaScript[5] - 함수와 Arrow Function (0) | 2023.04.20 |
JavaScript[4] - 조건문과 반복문 (0) | 2023.04.20 |
JavaScript[3] - 데이터 타입과 연산자 (0) | 2023.04.20 |