js 기초정리

FS29 2024. 9. 28. 09:44

2024. 9. 28. 09:44

[목차]

1. var금지, let사용하기
2. this가 뭘까?
3.화살표 함수
4.
5.

1. var는 사용 금지, let사용하기

호이스팅 과정에서 변수의 선언이 맨 위로 올라간다.

var키워드는 자동으로 undefined로 초기화된다.

없는 값에 접근한다는 자체가 될 수 없다.

console.log(num);
let num=10;
console.log(num);

위처럼 오류가 나야 정상인데, var을 하면 오류가 안나오고 10이 출력된다.

그러므로 사용을 금한다.

왜 오류가 날까?

* TDZ: 일시적 사각지대

let으로 선언된 변수는 호이스팅이 되어서 맨 위로 끌어올라가지만 코드상 선언문의 닿기까지는 일시적 사각지대에 들어가게된다. 그래서 오류가 발생된다.

목차로 돌아아기

2. this가 뭘까?

함수를 호출한 객체이다.

//예시
console.log(this);

이때 아래 사진과 같이 windows객체를 가르킨다.

//전통적인 함수 문법.
function main(){
    console.log(this);
}

몇가지 더 설명해보자면,

function main(){
    console.log(this);
    // this는 this를 포함하고있는 함수를 호출한 객체가 된다.
}
main();
// 정의한 main이라는 함수가 window객체 안에 정의된 걸 console창에서 알 수 있다.
// window.main();와 같다는 걸 알 수 있다.
// this값은 함수를 호출한 객체이기 때문이다.

//출력: Window {window: Window, self: Window, document: document, name: '', location: Location, …}

[예외, 엄격모드]

'use strict'
// 엄격모드, 함수 내부에 선언해줘도 똑같다.

function main(){
    console.log(this);
   
}
// main();하면 엄격모드에 의해 undefined가 된다
window.main();

//출력: Window {window: Window, self: Window, document: document, name: '', location: Location, …}

[데이터를 넣으면]

const object={
    name:'kim',
    main:function(){
        console.log(this);
        // 함수 안에 있는 this는 함수를 호출한 객체가 된다.

        console.log(name);
        // name을 직접 호출할 수 있다.
    },
};
object.main();
// object라는 객체가 main함수를 호출한다.
//출력: {name: 'kim', main: ƒ}


const main2=object.main;
main2();
// 이때는 window를 호출한다.

//출력: Window {window: Window, self: Window, document: document, name: '', location: Location, …}

function main(){
    console.log(this);
}

const object={
    name:'kim',
    main,
    };
object.main();
// 똑같이 this는 object객체를 말함.

//출력: {name: 'kim', main: ƒ}

[번외]

function main() {
    console.log(this);
}

const object = {
    name: 'kim',
    smallobject: {
        name: 'choi',
        main,
    },
};
object.smallobject.main();

//출력:  {name: 'choi', main: ƒ}

[함수를 도움요소에 이벤트처리기로 사용 시]

1. html에 버튼 추가하여 id값 주기

2. js연결코드에 defer 넣기

3. 잘 가져왔는지 확인하기

[이벤트처리기 설정]

html

const button=document.getElementById('btn');

console.log(button);

const button=document.getElementById('btn');
button.addEventListener("click", function(){
    console.log(this);
});

//출력: <button id="btn">버튼</button>

버튼을 클릭하면 this 값으로 버튼 요소가 나오는 걸 볼 수있다.

이벤트로 가져온게 맞는지 확인해보면 true가 나온다.

const button=document.getElementById('btn');
button.addEventListener("click", function(event){
    console.log(event.target===this);
});

// true

this는 event.target인 button요소가 맞다고 나온다.

[마무리]

function키워드를 사용하여 만든 함수는 this(동적)때문에 이리저리 바인딩하느라 번거롭다
이때 화살표 함수 문법을 사용하면 편하다.

목차로 돌아아기

3.화살표 함수

더 간결하 함수 선언할 수 있다.
this에 대한 번거로움을 해소할 수 있다.
this 호출에 따라 바뀌지 않는다
this를 외부에서 가져온다.

[일반함수: 함수선언식과 함수표현식의 차이점]

호이스팅: 함수선언을 코드의 최상단으로 끌어올리는 것

//일반함수
function main(){
    return 'hi';
}


//화살표함수
const main=()=>'hi'

일반함수(function): 함수선언식, 함수표현

//함수선언식 기본적인 방법
function main(){
    // 함수의 이름을 무족건적으로 선언해야 함
    console.log('hi');
}
main();


//익명함수=함수표현식
const main=function(){
    console.log('hi')
}
main();

함수표현식은 함수선언식과는 다르게 호이스팅이 되지않는다.

[화살표 함수 문법 총정리]

// ()=>{}
const main=()=>{
    console.log('hi');
}
main();
//몇가지 기호를 생략하여 간결하게 표현가능함.

//a,b매개변수를 받고 리턴하는 함수
function add(a,b){
    return a+b;
}
add();

// 위 코드를 화살표함수로 표현함
const add=(a,b)=>a+b

const main=()=>console.log('hi');
main();

function print(text){
    console.log(text);
}
print('hi');

//화살표함수로 표현.
const print=(text)=>console.log(text)
print('hi')

소괄호 생략은 매개변수가 하나만 있을 경우에만 가능하다.

const print=()=>console.log('hi')
print('hi')

const getOb=()=>({name:'choi'})
//객체를 리턴할때는 소괄호를 써줘야 함.
console.log(getOb());

[arguments와 가변인자의 차이점]

function main(){
    console.log(arguments)
    console.log(arguments[2])
    //function로 정의한 일반함수 경우에는 
    //매개변수로 따로 명시안해줘도 
    //arguments변수를 암묵적으로 전달받음. 
}
main(1,2,3)
//배열형태로 123이 들어가있음.
//arguments배열형태의 객체.

const main=(...args)=>{
    console.log(args);
    console.log(args[2]);
}
main(1,2,3);
//출력: (3) [1, 2, 3]
//3

[화살표 함수의 this], 함수의 위치 관여함.

const obj={
    name:'choi',
    //main메소드, 메서드: 객체의 속성으로 넣어진 함수.
    //function키워드를 사용한 일반함수.
    main:function(){
        //this는 함수를 호출한 객체.
        console.log(this);
    },
}
obj.main();
//출력: {name: 'choi', main: ƒ}

const obj={
    name:'choi',
    //main메소드, 메서드: 객체의 속성으로 넣어진 함수.
    //function키워드를 사용한 일반함수.
    main:function(){
        //this는 함수를 호출한 객체.
        console.log(this);
    },
}
const obj2={
    name:'other',
    main:obj.main,
};
obj2.main();
//출력: {name: 'other', main: ƒ}

function main(){
    console.log(this);
}
const obj={
    name:'choi',
    main:main
}
const obj2={
    name:'other',
    main:main

};

obj.main();//obj
obj2.main();//obj2
//출력: {name: 'choi', main: ƒ}
// {name: 'other', main: ƒ}

일반함수가 가지는 this값은 함수가 선언된 위치와 관련이 없다.

다이나닝바인딩, 런타임바인딩이라고 한다.

const obj={
    name:'choi',
    main:function(){
        console.log(this.name+'입니다.');
    },
}
const obj2={
    name:'other',
    main:obj.main,

};

obj.main();
obj2.main();
//출력:choi입니다.
//other입니다.

//화살표함수의 this
//화살표함수는 this를 가지지 않아서 외부로부터 불러옴.
//일반함수 this와 화살표함수의 this 차이.

const obj = {
    name: 'choi',
    main: function () {
        console.log(this);
    },
    mainArrow: () => {
        console.log(this)
    },
};
const obj2={
    name:'kim',
    mainArrow:obj.mainArrow,
};
console.log(obj.mainArrow);
console.log(obj2.mainArrow);

//출력: Window {window: Window, self: Window, document: document, name: '', location: Location, …}

똑같이 윈도우 객체를 출력하는 걸 알 수 있다.

화살표함수의 this 함수가 선언된 위치에 의해서 결정이된다.

함수가 호출된 방법과는 무관하다.

그러나 객체의 메소드로는 화살표함수보다 일반함수가 더 적합하다.

바인드는 화살표함수에서 쓸 수 없다. 일반함수에서 써야 한다.

const obj = {
    name: 'choi',
    main: function () {
        const innerFunction = function() {
            console.log(this);
        }.bind({hi:'hi'});
        innerFunction();
    },
};
obj.main();

//출력: {hi: 'hi'}

[마무리]

일반함수 this=함수를 호출한 객체를 가르킴.
일반함수의 this는 함수위치 무관함, 함수호출 방법에 따라 달라짐.

화살표함수 this=함수를 감싸는 상위 스코프의 this를 그대로 가져와서 사용함.
함수의 호출방법에 상관없이 함수위치에 결정됨.

목차로 돌아아기

4. 콜백함수

function main(x){
            console.log(x);
        }
        
        main(function say(){
            console.log("안녕")
        });
        
        //화살표함수로 변형.
        main(()=>{
            console.log("안녕")
        });

저작자표시 변경금지 (새창열림)

FS_hansol

js 기초정리

+ Recent posts

티스토리툴바