안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 javascript 5편입니다.
요즘은 책으로 공부를 하고 있는데요.
공부했던 내용 중 어려웠던 내용 위주로 작성해볼까 해요.
즉시호출 함수
익명함수를 생성하고, 곧바로 호출하는 패턴의 함수입니다.
(function () {}) ()즉시호출 함수는 충돌 문제를 회피하기 위해 사용되기도 하는데요.
다만, 식별자가 겹치면 충돌하게 됩니다.
외부에서 코드를 가져오는 경우 주로 발생하는데요.
예시를 볼게요.
// 외부에서 가져온 함수
let pi = 3.14
console.log(`파이 값은 ${pi}입니다.`)
// 내가 작성한 함수
let pi = 3.141592
console.log(`파이 값은 ${pi}입니다.`)pi라는 식별자가 두개네요.
그럼 제가 작성한 함수는 작동하지 않는데요.
*스코프가 같은 단계에 있을 땐 무조건! 충돌이 일어납니다.
(*스코프는 변수가 존재하는 범위를 뜻합니다.
위 예시에서는 동일선상에 let의 변수로 pi가 할당되었어요.)
그래서
1) {}를 이용해 블록을 만들거나
2) 함수를 생성해 블록을 만들거나
해야합니다.
// 외부에서 가져온 함수
let pi = 3.14
console.log(`파이 값은 ${pi}입니다.`)
// 1) 블록을 사용한 새로운 스코프 생성
{
let pi = 3.141592
console.log(`파이 값은 ${pi}입니다.`)
}
// 2) 함수를 생성해 새로운 스코프 생성
function sample() {
let pi = 3.141592
console.log(`파이 값은 ${pi}입니다.`)
}
sample()
console.log(`파이 값은 ${pi}입니다.`)블록 내부와 외부의 pi의 값이 다른데요.
실행시키면 어떻게 나올까요?
블록 내부에서 변수 pi는 3.141592가 출력되고,
블록 외부에서 변수 pi는 3.14가 출력됩니다.
이렇게 내부 블록에서는 내부 블록의 선언 변수만 보이는데요.
이를 섀도잉이라고 부릅니다.
블록이 다를 경우 내부 변수가 외부 변수보다 우선되어 출력되는 현상이에요.
객체
기본 개념
객체란, 이름과 값으로 구성된 속성을 가진 자바스크립트의 데이터 타입입니다.
배열을 typeof로 출력하면, object라는 값이 나오는데요.
이 object가 오늘의 주인공입니다.
생성과 접근
객체는 { }로 생성합니다.
예시를 볼게요.
const product = {
name: 'mango',
made: 'Indonesia',
type: 'fruits',
sugarContent: '50%'
}망고의 원산지는 인도네시아, 유형은 과일이며 당도는 50%입니다.
망고의 원산지만 알아보겠습니다.
객체에 접근하는 방법은 두 가지가 있습니다.
하나는 [ ]로 접근하는 방법이 있고,
하나는 .을 활용하는 방법입니다.
두 가지 다 알아보죠.
product['made']
product.made콘솔로 출력을 해볼까요?
const product = {
name: 'mango',
made: 'Indonesia',
type: 'fruits',
sugarContent: '50%'
}
console.log(product['made'])
console.log(product.made)
속성과 메소드
배열 내부 값을 요소라고 부르는 건 다들 아시죠.
객체 내부에 있는 값은 속성이라고 부릅니다.
그렇다면 메소드는 무엇일까요?
바로 매개변수로 쓰이는 함수를 메소드라 합니다.
그리고 메소드 내부에서 this 키워드를 사용할 수도 있는데요.
예시를 먼저 볼게요.
const pet = {
name: 'Bow',
eat: function (food) {
alert(this.name + '은/는' + food + '을/를 먹습니다.')
}
}
pet.eat('밥')this 키워드를 사용하면서, 자신이 가진 속성으로 접근이 가능합니다.
결과를 볼까요?
알람이 떴네요.
객체 선언하기
number, string, boolean을 객체로 선언하려면 어떻게 해야할까요?
const 객체 = new 객체 자료형 이름()아래와 같이 사용하면, 각기 객체를 생성할 수 있습니다.
new Numeber(20)
new String('hello')
new Boolean(true)prototype
원래 기본 자료형 데이터는 속성과 메소드를 가질 수 없습니다.
(물론, 문장 내에서 일시적인 사용은 가능합니다!)
하지만, prototype을 사용하게 되면 이야기가 달라집니다.
prototype은 모든 객체(기본 자료형도!)에서 해당 속성과 메소드를 사용할 수 있게 됩니다.
객체 자료형 이름.prototype.메소드 이름 = function () {
함수 내용
}prototype으로 제곱연산 메소드를 추가해볼게요.
Number.prototype.power = function (n = 2) {
return this.valueOf() ** n
}
const a = 12
console.log('a.power():', a.power())
console.log('a.power(3):', a.power(3))
console.log('a.power(4):', a.power(4))결과가 어떻게 나올까요?
indexOf()
indexOf()메소드는 배열 내부에 어떤 자료가 있나 없나 확인할 때 사용합니다.
예시를 볼게요.
const i = 'hello world'
console.log(i.indexOf('ell'))
console.log(i.indexOf('world'))
console.log(i.indexOf('hi'))문자열 내에 있는 문자라면, 해당 index 번호를 출력합니다.
만약 없는 문자열이라면, -1을 출력합니다.
결과는..?
contain()
indexOf()와 비슷한 메소드이지만, index number가 아닌 true와 false를 반환합니다.
객체 내부에 해당하는 값이 있다면 true를, 없다면 false를 반환하죠.
예시를 볼게요.
String.prototype.contain = function (data) {
return this.indexOf(data) >=0
}
Array.prototype.contain = function (data) {
return this.indexOf(data) >=0
}
const a = 'hello world'
console.log('el in hello world', a.contain('el'))
console.log('hi in hello world', a.contain('hi'))
const b = [2, 12, 241, 2124, 723, 45]
console.log('2 in [2, 12, 241, 2124, 723, 45]:', b.contain(2))
console.log('0 in [2, 12, 241, 2124, 723, 45]:', b.contain(0))contain 메소드를 맨 위에서 추가해준 후,
객체별로 contain()메소드를 사용했습니다.
결과는 어떻게 나올까요?
