[개발] Practice/JavaScript ES610 [JavaScript / ES6] Rest parameter 💡 실습 포인트! 💜 arguments vs rest parameter arguments 는 parameter 를 다루기 위해 나온 옛날 문법이고, 이와 유사하지만 훨씬 나은 신문법인 rest parameter 등장! arguments 는 모든 파라미터를 [] 안에 넣어주는 반면, rest parameter 는 파라미터 자리에 오는 파라미터 중 일부를 특정하는 것이 가능하다. 💜 rest parameter vs spread operator Spread Operator 를 파라미터에 사용하면 rest parameter 가 된다. 함수 파라미터 자리에 ... 이 붙으면 rest parameter 이고, 나머지는 spread operator 라고 생각하면 된다. 💜 rest parameter 🤍 특성 및 주의.. 2022. 4. 22. [JavaScript / ES6] default parameter / arguments 💡 실습 포인트! 💜 default parameter 🤍 기본 함수 스타일 function add(a, b) { console.log(a + b); } add(1, 2); // 3 🤍 JavaScript 함수의 특성 function add1(a, b) { console.log(a); } add1(1); // 1 파라미터가 2개여도 함수 내에서 사용한 파라미터가 a 하나라면, 실제로 함수를 사용할 때 파라미터 하나만 넣어도 에러가 발생하지 않는다. 🤍 default parameter 알아보기 function add2(a, b = 10) { console.log(a + b); } add2(); // NaN add2(1); // 11 add2(1, 2); // 3 파라미터에 값을 입력하지 않았을 때 기본으로 .. 2022. 4. 22. [JavaScript / ES6] Spread Operator 💡 실습 포인트! 💜 Spread Operator 연달아서 마침표를 3개 찍으면 그것이 spread operator! spread operator 는 항상 대괄호 안, 중괄호 안, 함수 안의 소괄호에서만 사용이 가능 💜 Spread Operator 의 역할 알아보기 🤍 Array 에 붙이면 대괄호 제거 let arr = ["hello", "world"]; console.log(arr); // ['hello', 'world'] console.log(...arr); // hello world console.log("hello", "world"); // hello world 🤍 String 에 붙이면 String 을 하나씩 분리 let str = "hello"; console.log(str); // hello.. 2022. 4. 21. [JavaScript / ES6] Template literals 알아보기 💡 실습 포인트! 💜 들어가기 전에 Template literals 는 JavaScript 에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법이다. 따옴표 대신에 backquote, backtick ( ` )이라는 기호를 사용해서 문자를 만들면 된다. (키보드 상의 물결 기호 아래에 있다.) 💜 Template literals 🤍 문자 중간에 엔터키 입력 가능 var 문자 = ` 안녕하세요. 프론트엔드 개발자를 꿈꾸는 박서윤입니다. `; JavaScript 문자열은 문자 중간에 엔터키를 사용해서는 안된다. 하지만 backtick 으로 문자를 만든다면 엔터키를 자유롭게 사용하는 것이 가능하다. 🤍 문자 중간에 변수 넣을 때 편리 var 변수1 = '박서윤'; var 변수2 = '프론트엔드 개발자'.. 2022. 4. 12. [JavaScript / ES6] 변수 연습문제 풀기 💡 실습 포인트! 💜 문제 1. func1(); // 에러 function func1() { console.log(hello); let hello = 'Hello!'; } hello 라는 변수가 var 키워드로 선언이 되었다면 hoisting 후에 undefined 를 할당(이를 initialization 이라고 함)하므로 콘솔창에 undefined 를 출력한다. 하지만 hello 라는 변수가 let 키워드로 선언되는 경우에는 hoisting 은 되지만 undefined 가 할당되지는 않기 때문에 콘솔창에 에러가 발생한다. 💜 문제 2. func2(); // 에러 var func2 = function() { console.log(hello); var hello = 'Hello!'; } func2() 선언.. 2022. 4. 11. [JavaScript / ES6] 변수 신문법 총정리하기_2 💡 실습 포인트! 💜 JavaScript 에서의 변수, 함수 Hoisting 현상 알아보기 JavaScript 는 변수나 함수를 선언하면, Hoisting 이라는 현상이 발생한다. Hoisting 이란 변수나 함수의 선언 부분만 변수의 범위 맨 위로 강제로 끌고 올라가서 가장 먼저 해석하는 것을 말한다. function func(){ console.log('hello'); var name = 'Seoyun'; } 예를 들어, 위와 같은 func() 함수가 있고, 그 함수 안에 name 이라는 변수를 만들었다고 가정하자. function func(){ var name; console.log('hello'); name = 'Seoyun'; } 그럼 JavaScript 가 func() 함수의 코드를 해석하는 .. 2022. 4. 11. [JavaScript / ES6] 변수 신문법 총정리하기 💡 실습 포인트! 📌 JavaScript 에서 변수 사용하기 var name = 'Seoyun'; 변수는 자료를 임시로 저장하는 공간이다. var 라는 키워드의 오른쪽에 변수 이름을 짓고, 변수에 저장할 자료를 등호를 이용하여 넣어주면 된다. 변수에는 object, array, function 등 모든 자료를 담을 수 있다. var name 이라는 부분은 선언, name='Seoyun' 이라는 부분은 값 할당이라고 표현하며, 일반적으로 변수를 만들 때에는 선언과 할당을 동시에 사용한다. 변수를 만들 때에는 var 외에도 let, const 라는 키워드를 사용가능한데, 다만 키워드마다 선언, 할당, 범위에서 차이가 있다. 💜 var 🤍 재선언 O var name1 = 'name1-1'; var name1 .. 2022. 4. 11. [JavaScript / ES6] this & arrow function 연습문제 풀기 💡 실습 포인트! 💜 문제 1 🤍 간단한 메소드 만들기 var person = { name: 'Seoyun', } person.sayHi(); // Hi! I'm Seoyun. person 이라는 object 가 하나 있는데, 이 object 에 sayHi 라는 함수(메소드)를 하나 추가하고자 한다. 위의 코드처럼 person.sayHi() 라고 코드를 작성하면 콘솔창에 'Hi! I'm Seoyun.' 이라는 글자가 나와야 한다. 'Seoyun' 이라고 이름을 하드코딩하는 게 아니라 실제 object 내에 있는 name 에 해당하는 값이 출력되도록 해보자. Q. sayHi() 라는 함수를 어디서 어떻게 만들면 될까? 더보기 var person = { name: 'Seoyun', sayHi: functio.. 2022. 4. 11. [JavaScript / ES6] Arrow function 알아보기 💡 실습 포인트! 💜 함수를 만드는 이유 살펴보기 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때, 나중에 재사용하기 위해서 사용한다. 입출력 기능을 만들고 싶을 때 사용한다. 📌 입출력 기능이란 입출력 기능을 살펴보기 전에 함수부터 살펴보자면, 함수는 수학에서 온 개념으로 input 을 넣었을 때 뭔가 새로운 output 을 출력해주는 박스같은 것이다. 예를 들어, f(x) = x + 2 라는 식이 있을 때 f(2) 는 4가 되는데, 이 때 f(x) 가 x 에 2를 더해주는 박스, 즉 함수에 해당하는 것이다. function add2(x){ return x + 2 } 그리고 프로그래밍에서는 위와 같은 문법으로 함수를 표현할 수 있다. 함수의 소괄호 안에는 input 역할을 하는 파라미터 x 가 있.. 2022. 4. 10. [JavaScript / ES6] this 알아보기 💡 실습 포인트! 이전에 강사님의 수업을 들으면서, 일반적인 형태의 function 과 arrow function 이 완전히 같은 것인 줄 알고 무작정 arrow function 으로 만들어서 this 를 사용하려다가 원하는 기능이 제대로 작동하지 않은 적이 있었다. 그래서 원인은 잘 모른 채 일단 일반적인 형태의 function 으로 수정해주었는데 이번 수업을 통해 this 에 대해 좀 더 심도있게 공부할 수 있었다. 💜 this 1 this 를 그냥 사용하거나, 일반 함수 안에서 사용하면 window 를 의미한다. 하지만, 사실상 전역 공간에서 만들면 this 가 있는 함수를 포함하는 object 가 window 인 것이므로, 2번과 동일하다고 봐도 무방하다. 🤍 ex1. console.log(thi.. 2022. 4. 10. 이전 1 다음
