본문 바로가기

JS skills

 (15)
15. return vs. break * return : 함수 실행을 종료하고, 함수를 빠져 나온다. * break : 현재 루프 즉, switch나 for, while 등을 종료하고 루프에서 빠져나온다. 💫 return 과 break 의 차이 함수 안에 작성된 루프 안에서 break 가 쓰였다면, break 를 감싸고 있는 루프를 빠져나가고 함수 밖으로는 나가지 않는다. return 은 함수 실행을 종료하고 함수를 호출한 곳으로 실행 흐름을 옮긴다. ex ) // 다음 함수는 i가 3일 때, break문을 만나서, while loop를 종료합니다. // 그 후에 while문을 빠져나와서 실행 흐름이 return i * x;로 가서 // 3 * x 값을 반환합니다. function text(x) { let i = 0; while (i < 6..
14. set 💫 구문 new Set ( [iterable] ); iterable : 반복 가능한 객체가 전달된 경우, 그 요소는 모두 새로운 Set에 추가된다. 만약 매개변수를 명시하지 않거나 null을 전달하면, 새로운 set 은 비어 있는 상태가 된다 . 반환값 : 새로운 Set 객체 설명 : 삽입 순서대로 요소를 순회한다. 하나의 Set 내 값은 한 번만 나타날 수 있다. 즉, 어떤 값은 그 Set 콜렉션 내에서 유일하다. 💫 특징 1. set 객체는 중복되지 않는 유일한 값들의 집합이다. 2. 인덱스로 요소에 접근할 수 없다. 3. 교집합, 합집합 같은 수학적 집합을 구현하기 위한 자료구조이다. 💫 객체 생성 set 생성자 함수는 iterable 을 인수로 받아 set 객체를 생성한다. 이러한 특징은 배열의 ..
13. 재귀함수 💫재귀함수란? 프로그래밍에서 재귀(Recursion)란 자신을 정의할 때 자기 자신을 재참조하는 것을 말한다. 따라서 재귀 함수란 함수가 호출되어 실행할 때, 함수 내부에서 자기 자신을 다시 호출하는 재귀 호출(Recursive Call)의 형태를 말한다. 💫스택(Stack) 재귀 호출을 이해하는 것에 앞서 스택(Stack)이라는 자료 구조를 이해해야 한다. Stack : 자료의 입출력이 한 방향에서만 이루어지는 자료구조. 프링글스를 중간부터 먹을 수는 없다. 맨 아래 있는 프링글스를 먹으려면 맨 위에서부터 차근차근 먹어야한다. 즉, 한 쪽 끝에서만 넣거나 뺄 수 있는 선형 구조이며 가장 나중에 들어간 자료가 가장 먼저 나온다. 이 것을 LIFO(Last In First Out) 으로 부르기도 한다. 💫..
12. return 여지껏 return 에 대해 너무 모호하게 알고 있어서 정리 한 번 하고자 한다. function sum(num1, num2) { num1+num2 } sum(1,2); 위와 같이 코드를 작성하면, 당연하게도 아무것도 출력되지 않는다. sum 함수가 실행은 되었으나 출력 시키는 명령어가 없기 때문이다. function sum(num1, num2) { num1+num2 } console.log(sum(1,2)); 이렇게하면 출력이 될 것 같지만, 아쉽게도 undefined 가 출력된다. sum(1,2); 실행문으로 함수를 전달해주는 구문이 없기 때문이다. 그 . 러 . 나 function sum(num1, num2) { return num1+num2; } console.log(sum(1,2)); // 3 ..
11. 팩토리 함수 ◼ Factory Function ? 팩토리 함수는 클래스나 생성자 함수에는 속하지 않는 함수이자, 새로운 객체를 리턴하는 함수이다. new 키워드가 없으면 팩토리 함수일 확률이 높다. const name = "mung"; const age = 28; const user = { name, age, setUserName(name) { this.userName = name; return this; }, }; console.log(user.setUserName("choi").userName); // "choi" user.setUserName("choi") 는 .setUserName() 을 user 에게 적용한다. 이 때, this 는 user 가 되며 .setUserName() 내부의 this 를 통해 use..
10. for...in / 기명 함수 표현식 💨 for...in for...in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자여려로 키각 지정된 모든 열거 가능한 속성에 대해 반복한다. 문법 : for (variable in object) { ... } 파라미터 : variable => 매번 반복마다 다른 속성이름이 변수(variable) 로 지정된다. object => 반복 작업을 수행할 객체로 열거형 속성을 가지고 있는 객체. const object = { name: "mung", age: 28 }; for (const property in object) { console.log(`${property}: ${object[property]}`); } ✅ for...in 을 사용하는 이유 for...in 구문은 객체의 반복을 위해 사용하..
9. HTML templating HTML 요소는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 javascript를 사용해 인스턴스를 생성할 우 있는 HTML 코드를 담을 방법을 제공한다. template === 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너. 💨 templating HTML이 반복되는 부분은 template로 만들고, 서버에서 받은 데이터(JSON 포멧) 을 결합해 화면에 추가하는 작업이다. HTML과 데이터를 섞어서 웹 화면에 보여주는 작업으로써 서버에서 데이터를 조회 후 그 내용들을 동적으로 HTML로 만들어서 보내주는 식으로 진행된다. 💨 templating을 하는 방법 #1. 서버에서 file 로 보관 후 Ajax로 요청해서 받아오기. 대규모 프로젝트에서 사용. server1.template 이런 ..
8. method chaining ✅ method chaining 이란? 객체를 이용할 때 여러 method를 편하게 사용하게끔 만든 것이다. let Person = function () { this.age; this.height; }; Person.prototype.setAge = function (a) { this.age = a; return this; }; Person.prototype.setHeight = function (h) { this.height = h; return this; }; let mung = new Person(); console.log(mung.setAge(28).setHeight(181)); 만약에, return this; 를 해주지 않는다면 mung.setAge(28).setHeight(181); 이 아니라..

티스토리툴바