자바스크립트 (JavaScript)33 [ 함수 ] this // this 키워드 // 일반 함수의 this 키워드는 호출 위치에서 정의 된다. // 화살표 함수의 this 키워드는 자신이 선언된 함수 (렉시컬) 범위에서 정의 된다. // 렉시컬 == Lexical 이란 ? // 함수가 동작할 수 있는 유효한 범위. const user = { firstName: 'hwanii', lastName: 'kim', age: 96, getFullName: function () { return `${this.firstName} ${this.lastName}` } } console.log(user.getFullName()) // hwanii kim // 즉, user 객체 내부에서 사용된 this 키워드는 user 객체 자신을 의미한다. // this.firstName ==.. 2023. 12. 10. [ 함수 ] 호출 스케줄링 // 호출 스케줄링 (Scheduling a function call) setTimeout(() => { console.log('Hello') }, 2000) // setTimeout() 이라는 함수를 호출한 상황. // 2초 후에 익명으로 작성된 콜백 함수의 내용이 console 창에 Hello로 출력 된다. // 위의 코드를 아래와 같이 작성해도 동일 하다. const hello = () => { // 화살표 함수로 생성한 함수 데이터를 hello라는 변수에 저장. console.log('Hello') } setTimeout(hello, 2000) // 즉, 함수를 하나 만들고 그 함수를 변수에 저장해서 변수를 사용한 상황. // 위와 같이 setTimeout() 함수를 사용 해서, n초 후에 결과가.. 2023. 12. 10. [ 함수 ] 재귀 (Recursive) // 재귀 (Recursive) // 하나의 함수에서 그 함수 자기 자신을 다시 내부에서 호출해서 사용 하는 방법 => 재귀 함수 const a = () => { console.log('A') } a() // 일반적으로는 함수를 선언하고, 함수를 호출 할 때, 위와 같이 코드를 작성 하면 된다. // 위와 같이 a() 를 작성 해서 함수를 호출하면서, // 함수 자기 자신 내부에서 호출이 되도록 코드를 작성해보자. const b = () => { console.log('B') b() } // b() // 위와 같이 코드를 작성 하면, 함수 b를 호출 했으니, 함수 b의 선언부를 가서, // console.log('B') 를 출력 하고, // 다시 함수 b가 호출되므로, console.log('B') 가 .. 2023. 12. 10. [ 함수 ] 콜백 (Callback) 예제 // 이미지 링크 주소 const url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAADSCAMAAAAIR25wAAABlVBMVEX/////6cT/4KvK5P8AAACz2P9MTEwuLi7//9b//9j/58JAQEAQEBA9PT1VVVXc7f/C4P/R0dH/9s7/8MmAgIBHR0dra2vv7+8zMzP/+8DIyMhOTk7/8suqvtLZ9v/W8v9hYWH/7bWUlJS/v7+IgXS0p5H/460eHh7f39//970nJyeqqqr0372/qIDJ8v9VSzl2f4iGor+4uLgeGhTy+P8VGR6ev+HC6v/SwqZ3kKqMjIyXjn/fza6fn5///8uUgmNscnm70urk8f/R/P9rXkji//+VpLTRuIxoaGjv0q.. 2023. 12. 10. [ 함수 ] 콜백 (Callback) // 콜백 (Callback) => 함수 이다. const a = () => { console.log('A') } const b = () => { console.log('B') } // a() // b() // 위와 같이 작성 하면, a() 함수가 호출 되고, 함수 호출이 종료 되고, b() 함수가 호출 된다. A B const a = () => { console.log('A') } const b = () => { console.log('B') } a(b) // A // a() 함수에 b 라는 함수 데이터를 인자로 넣은 모습 이다. // 이때, b 라는 함수를 콜백 함수 라고 한다. => 줄여서 '콜백' 이라고 한다. // 즉, 어떤 함수가 실행될 때, 해당 함수의 인자로 들어가는 또 하나의 함수를 콜백.. 2023. 12. 9. [ 함수 ] 즉시실행함수 (IIFE) // 즉시 실행 함수 (IIFE, Immediately-Invoked Function Expression) const a = 7 const double = () => { console.log(a * 2) } double() // 14 // 위와 같이 double 이라는 변수에 화살표 함수를 대입 했을 때, // 이 함수를 사용 하기 위해서는, 함수를 9번 째 라인 처럼 호출 해야 한다. // 그런데, 함수의 이름을 작성 해서 호출 할 필요 없이, // 함수를 만들자마자 바로 사용을 할 수 있는 방법이 존재 한다. // 문법은 아래와 같다. /* ()() 이렇게 소괄호 2개를 작성 한다. 근데, 이렇게 작성 하면 에러가 발생 하는데, 그 이유는 9번 째 라인의 double() 이 작성 되고, ; (세미 콜.. 2023. 11. 6. [ 함수 ] 화살표 함수 // 화살표 함수 (Arrow function) /* function sum() { // 함수 선언문 // pass } const sum2 = function () { // 함수 표현식 // pass } // 이렇게 함수 선언문과 함수 표현식 두가지 방법을 통해 함수를 정의 할 수 있다. // 이때 또 다른 방법으로 함수를 만드는 방법이 있다. => 화살표 함수 // 함수 표현식과 유사 하게 어떤 변수를 만들고, 그 변수에 화살표 기호를 사용 해서 함수를 만들 수 있다. const sum3 = () => { // 화살표 함수 // pass } */ // 이러한 화살표 함수 문법은, JS ES6 버전에서 새롭게 나온 문법 이다. // 훨씬 간단 하게 함수를 생성 할 수 있기 때문에, 화살표 함수를 많이 사.. 2023. 11. 6. [ 함수 ] 매개변수 패턴 // 매개변수 패턴 (Parameter pattern) // 기본값 (Default value) function sum(a, b) { // parameter == 매개변수 return a + b } console.log(sum(1, 2)) // argument == 인자 == 인수 // 3 console.log(sum(7)) // a = 7, b = undefined => 7 + undefined == NaN (Not a Number) // 인자값이 들어 오지 않는 경우를 대비 해서 기본 값을 지정 할 수 있다. function sum2(a, b = 1) { return a + b } console.log(sum2(7)) // 8 // 인자값이 다 들어오면 기본값 설정 값은 작동 하지 않는다. const.. 2023. 11. 6. [ 함수 ] 반환 및 종료 // 반환 및 종료 function hello() { return 'Hello ~' } console.log(hello()) // Hello ~ console.log(hello) // 소괄호 () 를 붙히지 않으면, 함수 자체가 데이터로 출력 된다. // ======================================================== // return 키워드 // 함수 내부에서 데이터를 반환 하는 역할을 한다. // 함수를 종료하는 역할도 한다. => return 키워드 밑에 작성된 코드는 실행 되지도 않고, 읽지도 않는다. // 만약에 return 키워드에 아무런 데이터를 작성 하지 않으면 어떻게 될까 ? function hi() { return } console.log(hi()).. 2023. 11. 5. 이전 1 2 3 4 다음
