Buang

1. 생성자 함수 등장 배경 2. 생성자 함수 생성 과정 * 코딩앙마님의 '자바스크립트 기초' 강의를 필기한 글입니다. 1. 생성자 함수 등장 배경 생성자 함수는 자바스크립트에서 사용되는 일반 함수와 비슷하다. 다만 생성자 함수는 첫 글자를 대문자로 하고, new 연산자를 사용한다는 게 특징이다. 생성자 함수를 알아보기 전에 왜 이 생성자 함수를 사용하는지 알면 생성자 함수에 대해 보다 쉽게 이해할 수 있어 생성자 함수 등장 배경에 대해 소개하고자 한다. let user1 = { name: 'Mike', age: 30, } 쇼핑몰 사이트를 운영하고 있다고 해보자. 쇼핑몰 사이트를 운영할 땐 회원의 이름(name)과 나이(age)를 저장해 놔야 할 것이다. 그래서 나는 위의 코드처럼 회원의 이름과 나이를 ..

1. 배열 등장 배경 2. 배열 정의 3. 배열의 수정 4. 배열의 특징 4-1. 많은 요소 포함 4-2. push 4-3. pop 4-4. unshift와 shift 5. 배열과 for문 6. for of문 코딩앙마님의 '자바스크립트 기초 강좌' 영상을 필기한 글입니다. 1. 배열 등장 배경 한 반에 30명의 학생이 있다고 해보자. const Mike = "Mike"; const Jane = "Jane"; .... const Tom = "Tom"; 이를 자바스크립트로 나타내면 위와같이 나타낼 수 있다. 그런데 학생 이름 하나에 변수 하나를 생성해서 만드는 건 시간이 너무 오래 걸리고 코드 길이도 길어진다. 코드 길이를 줄이면서 더 빠르게 30명의 학생 이름을 정리하기 위해 '배열'이란 걸 사용하고자 한..

이전 시간에 객체에 대해서 알아봤다. 아직 객체에 대해 잘 모르시는 분께선 객체 '자바스크립트 '객체'가 뭘까?' 글을 읽고 이 글을 읽는 걸 추천드리다. 이번 시간엔 객체의 method와 this에 대해서 알아보고자 한다. *코딩앙마님의 자바스크립트 기초 강좌를 보고 필기한 글입니다. 1. 메서드 정의 2. 단축구문 3. 객체와 method의 관계 4. 객체에서의 this 사용법 1. 메서드의 정의 const superman = { name:'clark', age: 33, } 위와같은 superman 객체가 있다고 해보자. superman은 이름도 있고, 나이도 있겠지만 superman의 능력 중 하나인 '날아다니기' 능력도 있을 것이다. const superman = { name:'clark', ag..

'코딩앙마' 님의 '자바스크립트 기초 강좌' 필기를 정리한 글입니다. 1. 객체 정의 2. 객체 접근 3. 객체 함수 4. 객체 축약 5. in을 이용해서 true와 false 반환하기 ex) 나이가 20이상이면 true를 반환하시오 1. 객체 정의 객체(Object)란 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신과 다른 것을 식별가능한 것을 말한다. 예를 들어 물리적으로 존재하는 사람, 책, 자동차, 컴퓨터 등 과 추상적으로 생각할 수 있는 학과, 강의, 주문 등이 모두 객체가 될 수 있다. 객체의 가장 좋은 예시로 슈퍼맨을 들 수 있을 거 같다. 슈퍼맨 또한 물리적으로 존재할 수 있기에 객체다. 그 슈퍼맨의 이름은 clark고, 나이는 33이다. 이걸 정리해서 표현하면 아래와 같을..

'코딩앙마'님 자바스크립트 기초 강좌 필기록입니다. 함수 표현식: 화살표 함수 사용법 let add = function(num1, num2){ return num1 + num2; } 위와같은 함수 표현식을 화살표 함수로 나타내면 아래와 같이 나타낼 수 있다. let add = (num1, num2) => { return num1 + num2; } function이란 단어가 사라지고 (num1, num2) 뒤에 =>가 생겼다. 함수 표현식은 이렇게 바꿀 수 있다. 함수 선언문은 아래처럼 바꿀 수 있다. 함수 선언문: 화살표 함수 function add(num1, num2){ return num1 + num2 } 맨 처음에 소개한 함수 표현식과 다르게 위의 코드는 함수 선언문이다. add = (num1, n..

1. 함수 선언문과 함수 표현식 정의 자바스크립트에선 함수를 몇 가지 형태로 표현할 수 있다. function sing(){ //sing이란 함수 선언 console.log("LaLaLa~"); } sing(); //함수 호출. LaLaLa가 console 창에 출력된다. 가장 일반적으로 위의 코드처럼 함수이름(sing) 앞에 function 을 써서 함수를 만들어 줄 수 있다. 위와같은 형태를 함수 선언문이라고 한다. let sing = function(){ console.log("LaLaLa~"); } sing(); //함수 호출. LaLaLa가 console 창에 출력된다. 두 번째 방법으론 변수 = function() 형태로 sing이란 이름의 변수를 선언(let sing)하고 그 뒤에 funct..

1. 형변환 등장 배경 10+20의 값은 30이다. 그런데 자바스크립트에선 10 + 20의 값이 1020으로 나올 수도 있다. 이러한 문제는 문자를 숫자로, 숫자를 문자로 바꾸는 형변환에 대해 알면 쉽게 해결할 수 있다. 2. 문자를 숫자로 바꾸기 위의 코드는 내가 두 개의 숫자를 입력했을 때 그 두 개의 숫자의 합을 출력하는 코드다. 예시로 내가 숫자 10과 숫자 20을 입력하면 10 + 20의 결과값인 30이 출력되게 하는 코드인 것이다. 그런데 결과로 30이 아닌 1020이 나와버렸다. 이런 현상이 나타나는 이유는 prompt 때문이다. 코드 첫 줄을 보면 prompt가 보일텐데 prompt는 입력을 받게 해주는 것으로 숫자가 아닌 문자 형태로 입력을 받는다. 예시로 내가 키보드를 통해 숫자 10을..

1. 함수를 왜 쓸까? 2. 함수의 개념 3. 함수의 형태 4. 다향한 함수 예문 1. 함수를 왜 쓸까? 우리가 '함수'에 대해서 배우기 전에 이 '함수'를 쓰는 이유에 대해 알면 함수를 이해하는 데 많은 도움이 된다. 그래서 먼저 함수가 왜 쓰는지에 대해 설명하고자 한다. //5+10의 값을 구하는 코드 var num1 = 5; var num2 = 10; var sum = num1 + num2; console.log(sum); //결과값: 15 위의 코드는 5와 10이라는 두 개의 숫자를 더하는 코드다. 지금은 더하기 작업을 한 번만 하면 되는데 만약 여러 번의 더하기 작업을 해줘야 한다면 어떻게 될까? //5 + 10의 값을 구하는 부분 var num1 = 5; var num2 = 10; var su..

문제상황 내 문제상황이 조금 별나서 문제상황에 대한 배경에 대해 간략히 언급하고 넘어가려고 한다. 위의 이미지에서 아이디란에 'samuel'을 입력하고 비밀번호란에 'wjsansrk'를 입력한 뒤 LOGIN 버튼을 눌렀을 때 portfoilo.html로 넘어갔으면 했었다. 그래서 Log in LOGIN 이렇게 입력했고(css는 위에 나와있지 않았으며, 슬래시를 넣어준 건 해당 부분이 눈에 잘 보이게 하기 위해서이다.) 여기서 중요한 건 location.href = "portfolio.html"; 이다. 이렇게 입력하면 portfolio.html로 넘어가야 하는데 넘어가질 않았다. 해결방법은 무척 간단했다. 문제해결 방법 button 부분에 type이 생략된 탓에 이런 문제가 발생하고 있던 거였다. typ..

자바스크립트를 실행시키고 name = "Andrew"; 라고 적었다니 name = "Andrew" 이렇게 변수 name에 밑줄이 그어졌다. VS Code에서 작업하고 있는데 이런 현상이 나타난다. 코드팬에서 작업하면 name에 밑줄이 그어지는 일은 나타나지 않는다. 도대체 왜지. 일단 가정 하나를 생각해서 정리해봤는데 name은 변수로 예초에 사용할 수 없는 예약어이기 때문이다. 예약어는 printf, class, while처럼 이미 특정 기능을 가지고 있는 걸 예약어라고 한다. 조금 더 쉽게 설명하자면 char printf = "Andrew"; 를 c++ 상에서 작성했다고 하자. c++에서 위에처럼 작성하면 에러가 뜬다. printf에는 이미 출력하는 기능이 담겨져 있는 즉 어떤 기능이 담긴 예약어이기..