You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[JS] 📚 Call by Value & Call by Reference (+ Call by Sharing)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbj4l78%2FbtrfoutGyqX%2FUNSV2aGmKwCEAjkWox2APk%2Fimg.jpg)
[JS] 📚 Call by Value & Call by Reference (+ Call by Sharing)
Call By Value 먼저 값에 의한 전달에 대한 특징부터 살펴보자. argument로 값이 넘어온다. 값이 넘어올 때 복사된 값이 넘어온다. caller(호출하는 녀석)가 인자를 복사해서 넘겨줬으므로 callee(호출당한 녀석)에서 해당 인자를 지지고 볶아도 caller는 영향을 받지 않는다. 예시) let a = 1; function addOne(b) { //callee b = b + 1; } addOne(a); //caller console.log(a); // 1 a라는 변수를 인수로 넘겨주었다. 이때 1이라는 값은 복사되어 인자b에게 할당된다. a와 b의 값은 같지만 둘 다 다른 메모리 공간을 차지하게 되어 별개의 존재이기 때문에 함수 내부에서 b를 지지고 볶아도 a한테는 아무런 영향이 없다..
![[JS] 📚 전개 연산자(Spread 문법) 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbq94bp%2FbtrfqCRv5on%2FW1hGE9ckrwKe27ljmGh0B0%2Fimg.jpg)
[JS] 📚 전개 연산자(Spread 문법) 정리
전개 구문(Spread Syntax) 전개 구문(Spread Syntax)는 ECMAScript6(2015)에서 새로 추가된 문법으로, 간단하게 이 문법은 문법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다. // 펼칠 대상이 객체인 경우 {...obj} // 펼칠 대상이 배열인 경우 [...arr] // 혹은 {...arr} 전개 구문의 문법 자체는 정말 간단하다. 그저 배열이나 객체 앞에 점 세 개를 붙여주면 된다. 단, 위 코드에서 확인할 수 있는 것처럼 펼쳐진 객체나 배열을 담을 바구니가 필요하다. 객체는 객체로, 배열은 객체나 배열로 담아낼 수 있다. ES5 vs ES6 배열 문법 [ ES5 배열 내용 조합 ] ES5 에서는 배열의 내용을 합쳐 새로운 배열을 만들기 위해서 concat..
![[JS] 📚 프로토타입(Prototype) 개념 완전 정복 ❗](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbTXrX4%2Fbtrfo5NEGf8%2FRO4oQcF1iA0SyCtw9zkjW1%2Fimg.jpg)
[JS] 📚 프로토타입(Prototype) 개념 완전 정복 ❗
프로토타입 기반 언어 자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵고 개념도 복잡합니다. 자바스크립트에 클래스는 없지만 함수(function)와 new를 통해 클래스를 비스무리하게 흉내낼 수 있습니다. function Person() { this.eyes = 2; this.nose = 1; } var kim = new Person(); var park = new Person(); console.log(kim.eyes); // => 2 console.log(kim.nose); // => 1 console.log(park.eyes); // => 2 console.log(p..
📚 자바스크립트 화살표 함수 사용법 총정리
화살표 함수 (Arrow function) 자바스크립트에서 함수를 만들 때는 function 키워드를 사용하여 정의할 수 있다. 예를들어 두 수의 합을 구하는 함수는 다음과 같이 작성할 수 있다. function sum(a, b) { return a + b; } ES6부터는 화살표 함수(arrow function)라는 새로운 문법 방식으로 함수를 만들 수 있게 되었다. 화살표 함수는 => 기호를 사용하여 function 키워드를 생략할 수 있다. 그래서 위의 함수를 화살표 함수로 바꾸면 아래와 같이 구성할 수 있다. let sum = (a, b) => { return a + b; } // 만일 함수가 단순한 리턴문만 있다면 한줄로 더 심플하게 줄일 수 있다 const sum = (a, b) => a +..
📚 콜백 함수(Callback) 개념 & 응용 - 완벽 정리
자바스크립트 콜백 함수 란? 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 예를 들어 아래 코드와 같이 sayHello() 함수를 호출할때 입력 매개변수로 문자열과 printing 함수 자체를 전달하는 것을 볼 수 있다. 그리고 sayHello() 함수가 실행되면 실행문 안에서 함수가 들은 두번째 매개변수인 callback 을 괄호 () 를 붙여 호출한다. function sayHello(name, callback) { const words = '안녕하세요 내 이름은 ' + name + ' 입니다.'; callback(words); // 매개변수의 함수(콜백 함수) 호출 } sayHello("인파", function ..
📚 자바스크립트 in 연산자 활용 정리
프로그래밍 언어에서의 in 연산자 파이썬 프로그래밍을 하다가 자바스크립트 프로그래밍을 하다 보면 은근히 햇깔리는 부분이 바로 in 연산자 사용처이다. 예를들어 파이썬의 in 연산자는 멤버십 연산자로서, 문자열이나 리스트나 튜플과 같이 연속적인 자료구조에 속한 멤버를 확인하기 위한 연산자이다. 그래서 아래와 같이 리스트를 순회할 일이 있다면 for in문을 통해 가능하다. fruits = ["apple", "banana", "orange"] for fruit in fruits: print(fruit) 그런데 똑같이 자바스크립트로 배열에 in 연산자를 사용하면 다음과 같이 출력된다. const fruits = ["apple", "banana", "orange"]; for (fruit in fruits) { ..
📚 자바스크립트의 예외 처리(Exception)
예외 (exception) 프로그래밍에서 예외(exception)란 실행 중인 프로그램에서 예기치 못한 상황이 발생하여 더 이상 진행할 수 없는 상황을 말한다. 예를 들어 문법적인 오류이거나 파일을 찾을 수 없거나, 메모리 부족 등의 상황에서 예외가 발생할 수 있다. 이러한 예외 상황은 프로그램의 실행을 중단시키거나, 비정상적인 결과를 초래할 수 있으므로, 프로그래머는 이러한 예외를 발생하지 않도록 미리 방지하는 것도 중요하지만, 발생한 예외를 처리할 수 있는 방법을 마련해야 한다. 예외 처리 (exception handling) 이를 위해 대부분의 프로그래밍 언어에서는 try-catch 구문을 제공하여 예외를 처리할 수 있도록 한다. 자바스크립트 역시 프로그램이 실행되는 도중 발생하는 예외를 처리하기 ..
![[JS] 📚 자바스크립트 this 💯 완전 정복](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbC2UUy%2FbtreTIElCLy%2FjSpsKwpcYiwk5TkQKrxo3K%2Fimg.jpg)
[JS] 📚 자바스크립트 this 💯 완전 정복
this 정의 let group = { title: "1모둠", students: ["보라", "호진", "지민"], title2 : this.title, title3() { console.log(this.title) } }; console.log(group.title2); //undefined group.title3(); // 1모둠 this는 함수의 블록 스코프 내에서 선언 되야 작동한다. 브라우저 콘솔(F12)을 켜고, this를 쳐보자 this; // Window {} 이번엔 변수와 함수 안에 넣어서 해보자. var ga = 'Global variable'; console.log(this.ga); // === window.ga function a() { console.log(this); }; a(..
![[JS] 📚 Call & Bind & Apply 함수 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAvKzB%2FbtreJYPAPE6%2FB97iV910oMDJGI9m3oR7Kk%2Fimg.jpg)
[JS] 📚 Call & Bind & Apply 함수 정리
call 원래 함수는 선언한 후 호출해야 실행되죠. 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과, call 그리고 apply하는 방법이 있습니다. var example = function (a, b, c) { return a + b + c; }; example(1, 2, 3); example.call(null, 1, 2, 3); example.apply(null, [1, 2, 3]); 보면 call은 보통 함수와 똑같이 인자를 넣고, apply는 인자를 하나로 묶어 배열로 만들어 넣는 것을 알 수 있습니다. 그렇다면 call과 apply가 공통적으로 가진 null 인자의 역할은 뭘까요? 바로 this를 대체하는 겁니다. var obj = { string: 'zero', yell: functio..
📚 자바스크립트 배열(Array) 완벽 정복 ❗
자바스크립트 배열 자바스크립트에서 배열은 여러개의 값을 저장하고 관리하는데 사용되는 아주 기본적인 자료구조이다. 자바스크립트 배열은 타입이 고정되어 있지 않아서, 서로 다른 타입의 원소들을 적재할 수가 있다. 그리고 배열은 동적으로 크기가 변할 수 있어 자바(Java)와는 달리 크기를 지정할 필요가 없다. 배열의 생성 자바스크립트에서 배열을 생성하는 방법은 여러가지가 있지만, 주로 대괄호 [] 안에 값을 넣어서 선언하는 문법을 사용한다. // 배열 리터럴을 이용하는 방법 (추천) var arrLit = [1, true, "JavaScript"]; // Array 객체의 생성자를 이용하는 방법 var arrObj = Array(1, true, "JavaScript"); // new 연산자를 이용한 Arra..
📚 호이스팅(Hoisting) 발생 원리를 알아보자
자바스크립트 호이스팅(Hoisting) 자바스크립트에서 호이스팅(Hoisting)은 변수 선언과 함수 선언을 코드의 맨 위로 끌어올려지는 현상을 일컫는다. 그래서 개발자가 어느 라인 위치에 코드를 선언해도, 실행 되기전 코드가 최상단으로 끌어올려지고 실행되게 된다. 이러한 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성(Instantiation)과 초기화(Initialization)의 작업이 분리돼서 진행되기 때문이다. console.log(a()); // 'a' console.log(b()); // Uncaught TypeError: b is not a function console.log(c()); // Uncaught TypeError: b is not a function function a()..
📚 var / let / const 차이점 정리 (변수 호이스팅)
자바스크립트 var / let / const 차이점 5가지 중복 선언 가능 여부 재할당 가능 여부 변수 스코프 유효범위 변수 호이스팅 방식 전역객체 프로퍼티 여부 1. 중복 선언 가능 여부 var : 중복해서 선언(+초기화)가 가능하다. 이 경우, 마지막에 할당된 값이 변수에 저장된다. 기존에 선언해둔 변수의 존재를 까먹고, 값을 재할당하게 되는 등의 실수가 발생하기 쉽다. const, let : 중복 선언 불가능 이미 선언한 변수를 다시 선언할 경우, 에러가 발생한다. var에 비해서 코드의 안정성을 높여줄 수 있는 방식으로, 다른 언어를 쓰던 사람들게도 익숙할 것이다. 2. 재할당 가능 여부 var, let : 값의 재할당이 가능한 변수다. 변수 선언 및 초기화 이후에 반복해서 다른 값을 재할당 ..
