전체 글 195

거슬러 올라가는 루프, 루프안에 루프

1. 한 배열을 거슬러 올라가 루프를 만든다. 2. 다른 루프 안에 또 다른 루프를 만든다. const jonas = [ "Jonas", "Schmedtmann", 2037 - 1991, "teacher", [("Michael", "Peter", "Steve")] ]; 0 → Jonas . . . 4 → [("Michael", "Peter", "Steve")] 이번에는 4번부터 0번까지 갈 예정이다. 새로운 정보를 따라 for문을 만들어야 한다. counter, 조건, counter 업데이트 for (let i = jonas.length - 1; i >= 0; i--) { console.log(jonas[i]); } let i = jonas.length -1; counter로 다시 시작해보겠다. 그런다음..

카테고리 없음 2023.03.20

루프의 배열, 지속, 중단

const jonas = [ "Jonas", //0번째 요소 "Schmedtmann", //1번째 요소 2037 - 1991, //2번째 요소 "teacher", //3번째 요소 [("Michael", "Peter", "Steve")], //4번째 요소 ]; 이 코드를 이용해서 for루프를 이용해 이 배열을 통과시킬 수 있다. 5가지 요소만 기록하면 된다. 일단 for문을 작성해보겠다. 일단 시작은 카운터부터 시작한다. for (let i = 0; 전통적인 counter 변수 이름은 오랫동안 i였다. 여기서도 i를 사용한다. 이번에는 0부터 시작한다. 왜? 배열은 0에 기반을 두고 있기 때문이다. 배열의 요소를 읽을 때 루프 코드를 작성하면 이해가 될것이다. for (let i = 0; ; i++) 모든..

🦎 JavaScript 2023.03.16

[JS] the for loop

if else문에서 컨트롤 구조가 있다고 언급했었다. 다른 통제 구조 중 하나가 고리(the for loop)이다. JS에서 기본 사항 섹션의 마지막 주제는 Loop이다. Loop는 모든 프로그래밍 언어의 근본적인 측면이다. 기본적으로 반복적인 작업을 자동화하게 해주기 때문이다. 즉 반복해서 수행해야 하는 작업들인것이다. 체육관에 가면 웨이트 트레이닝을 한다고 가정해보자. 특정 역도 운동 10번을 반복한다고 치자 어떻게 표현해야 할까? console.log("Lifting weights repetition 1 🏋"); console.log("Lifting weights repetition 2 🏋"); console.log("Lifting weights repetition 3 🏋"); console.log..

🦎 JavaScript 2023.03.09

[JS] 객체 방식

함수는 값의 또 다른 유형이다. 함수가 그냥 값이라면 그 값이 함수인 키 값 쌍을 만들 수 있다. 이 말은 즉 개체에 함수를 추가할 수 있다. calcAge: function(birthYear) { return 2037 - birthYear } }; const calcAge: function(birthYear) { return 2037 - birthYear } }; 첫번째 구문과 두번째 구문의 차이점이 있다. 첫번째 구문의 calcAge는 두번째 구문의 calcAge와 같은 정규 변수가 아니다. jonas의 객체의 속성이다. 따라서 위에서는 콜론을 사용하지만 나머지는 완전히 똑같다. 개체에 부착된 모든 기능은 메서드이다. function calcAge(birthYear) { return 2037 - bi..

🦎 JavaScript 2023.03.09

[JS]개체에서 데이터를 가져오는 법과 개체 안의 데이터를 바꾸는 법

공통된 특징으로는 점과 괄호 표기법을 활용한다. 1. 개체로부터 속성을 얻는 첫번째 방법: .표기법을 사용한다. 만일 성을 얻고 싶다고 가정하면? const jonas = { firstName: "Jonas", lastName: "Schmedtmann", age: 2037 - 1991, job: "teacher", friends: [("Michael", "Peter", "Steve")], }; console.log(jonas); console.log(jonas.lastName); jonas.lastName을 입력하면 된다. 그러면 저 성이 jonas객체에서 바로 나왔다. 저기에서 .은 연산자이다. .lastName에 있는 연산자가 jonas(지정한 이름)으로 속성을 검색하는 거다. 괄호를 이용해 똑같은 ..

🦎 JavaScript 2023.03.09

[Vue] 뷰 요약

데이터 바인딩 binding은 묶는다라는 의미를 갖고있다. 즉 데이터를 묶는다라고 이해하면 편한다. {{ htmlString }} ● 문자열 바인딩은 {{}} ← 중괄호 2개를 넣어줘야 한다. 그 사이에 데이터의 키명을 넣어주면 된다. ● html바인딩은 디렉티브를 통해 넣는다. v-html이 html 바인딩에서 추가되는 속성이다. {{ htmlString }} 구현하는 함수는 무조건 method에 적는다. funtion키를 굳이 안적어도 된다. myfunction이 key이다. function뒤에 전달할 매개변수가 없으면 (); 생략가능하다. myfunction함수는 어디에 등록하냐? data라는 것은 화면상에 쓸 데이터를 모두 정리한다고 했다. this 키워드가 오브젝트 안에 정리된 함수에서 특정 키..

Vue 2023.03.06

[JS] 개체(Objects)

개체(Objects) 또 다른 데이터 구조이다. 배열을 데이터 구조로 사용해왔다. 배열은 같은 변수에 다수의 관련 값을 저장하기 위해서이다. const jonasArray = [ "Jonas", //이름 "Schmedtmann", //성 2037 - 1991, //나이 "teacher", //직업 [("Michael", "Peter", "Steve")], //배열안에 배열 ]; [("Michael", "Peter", "Steve")] ← 배열안에 배열이 있다. 여러 값을 결합한 데이터 구조이다. 배열에서는 이 요소들에 이름을 줄 방법이 없다. 그래서 이름으로 참조가 안되고 배열에 있는 주문 번호로만 참조할 수 있다. 그 문제를 해결하기 위해서는?? 그래서 개체가 있는 것이다. (놀랍도다..) ● 개체에서..

🦎 JavaScript 2023.02.27

[JS] 배열 매서드(Array methods)

배열 매서드(Array methods) → 연산이라고 생각하면 쉽다. Js에서 기본 제공 함수들이 있는데 기본적으로 배열에 직접 적용할 수 있다. 그것들을 배열 매서드라고 부른다. const friends = ["Michael", "Steve", "Peter"]; push push 매서드는 배열의 끝에 요소들을 추가한다. const friends = ["Michael", "Steve", "Peter"]; friends.push("Jay"); 친구를 입력하고 .push를 하면 배열 끝에 요소들을 추가한다. push는 본질적으로 함수이다. 옆에 괄호가 있다. 괄호는 우리가 호출하는 함수이다. push앞에 있는 .은 friends배열 자체에 연결되는 함수인걸 의미한다. ● push는 메서드이다. ● 기술적으로..

🦎 JavaScript 2023.02.27

[JS] 배열(Array)

데이터 구조 → array(배열) const friend1 = "Michael"; const friend2 = "Steve"; const friend3 = "Peter"; 친구 3명을 적기 위해 변수를 3번 적었다. 만일 친구 10명을 적기 원하면 변수를 총 10변을 적어야 할까? 그렇다. 그렇다면 이것을 더욱 간단하게 할 수 없을까? 간단하게 작성할 수 있다. 어떻게? 이 모든 값을 한데 묶어서 더 큰 컨테이너에 넣는것이다. 위와 같은 과정을 하기 위해 JS에는 데이터 구조가 있는 거다. Array(배열)은 데이터 구조이다. Array는 큰 컨테이너같다. 거기에 변수를 입력했다가 나중에 참조할 수 있다. 과연 중요할까? 중요하다. 프로그래밍은 대부분의 시간 데이터 위주이니까 저장하고 처리하는 어딘가에서..

🦎 JavaScript 2023.02.22

[JS] 중첩 함수(Nested Function)

function fruitProcessor(apples, oranges) { console.log(apples, oranges); const juice = `juice with ${apples} apples and ${oranges} oranges.`; return juice; } 일정한 개수의 사과와 오렌지를 받아 그걸 바탕으로 주스를 생성하고 값을 반환했다. 중첩 함수 함수안에서 다른 함수 호출해보기 그러나 이번에는 frunitProcessor를 통해 작은 과일 조각만으로 주스를 만들 수 있는 시나리오로 해보겠다. function cutFruitPieces(fruit) { return fruit * 4; } 과일주스를 만들기 전 다른 기계가 필요하다. 1. function cutFruitPieces(..

🦎 JavaScript 2023.02.13
728x90