(18) JavaScript - 제어문 / switch문
·
JS
switch문 (switch statement)switch문은 어떤 값을 입력했는지에 따라 다르게 동작하는 문법이다.if문과 비슷하지만 동작하는 방식은 조금 다른데, 기본 구조는 다음과 같다.  switch (비교할_값) { case 조건값_1: ▲ switch라는 키워드를 작성한 다음에 소괄호를 열어서 비교할 값을 작성해주고중괄호를 열어서 그 안에 case라는 키워드 다음에 조건값을 쓰고 콜론(:)을 입력한다.  switch (비교할_값) { case 조건값_1: 동작부분 break;▲ 그리고 비교할 값과 조건값이 서로 일치할 때 동작할 코드를 작성한 다음 break 라는 키워드를 입력해준다.(이 break는조건값에 대한 동작을 마쳤..
(17) JavaScript - 제어문 / if문 (if statement)
·
JS
https://purrfect-gargoyle-935.notion.site/if-10be9530b3e1801692aad8da430a405f?pvs=25if문 (if statement)if문은 어떤 특별한 조건에 따라서 코드를 실행할지 말지 결정할 수 있는 문법이다.즉 조건을 충족하지 못하면 실행 하지 않을 수도 있다는 뜻. if (조건부분) { 동작 부분 } 자바 스크립트에서 if문은 문자 그대로 if라는 키워드를 사용하며 뒤에 소괄호를 열고 조건 부분을 작성한 다음중괄호를 또 열어서 동작 부분을 작성한다.if는 만약이라는 뜻을 가지고 있으며 풀어서 해석하면 '만약 조건 부분이 충족되면 동작 부분을 수행하라' 이다. 물이 어는 점을 0도라고 하고 'temperature' 변수를..
2024.09.24 (Day 13) - JavaScript OOP / 생성자 함수
·
BootCamp Review
생성자란? • 객체지향 프로그래밍에서 중요한 용어이다.한마디로 정의하면 어떤 객체의 모형이 있고 그 모형으로 객체를 만들어주는 역할자를 생성자라고 한다.소프트웨어 언어마다 객체의 모형을 정의하고 이 모형을 통해 객체를 만드는 방법에는 차이가 있지만모든언어에서 이 객체를 만드는 작업을 “객체를 생성한다” 라는 표현을 하고그 객체 생성 역할을 하는 것을 “생성자”라고 한다. 생성자 함수▼ 객체 모형을 이용한 객체 생성• 동일한 멤버로 구성되는 객체를 여러 개 만드는 경우에는 객체를 만드는 모형이 하나 선언하고 그 모형을이용해 여러 개의 객체를 쉽게 만드는 방법이 있으면 쉬울 것 이다.객체를 만드는 모형을 선언하고 그 모형을 이용해 객체를 생성하는 방법은 2가지가 있으며 생성자 함수를 이용해 객체 생성 하거나..
2024.09.23 (Day 12) - JavaScript OOP / Object Literal
·
BootCamp Review
객체 리터럴• 객체를 만드는 방법은 여러가지가 있는데 가장 간단한 방법이 객체 리터럴(Object Literal)을 이용하는 방법이다. • 객체 리터럴은 객체의 내용을 중괄호( { } ) 로 묶고 그 안에 객체의 내용을 프로퍼티로 등록한다.객체의 프로퍼티는 키:값 형태를 띄며 여러 프로퍼티를 콤마( , ) 로 구분해서 등록하는 방식이 객체 리터럴이다. • 객체내에 선언된 것을 객체의 멤버라 표현하며 객체의 멤버 접근은 DOT( . ) 을 이용하고형태는“객체명.프로퍼티명”이며 user 객체의 name 프로퍼티에 접근하는 코드는 user.name 이다.또한 user 객체의 order 프로퍼티가 객체이고 이 order 객체의 productId 에접근하려면user.order.productId를 쓴다.   • 함..
(16) JavaScript - 추상화 / 상수(constant)
·
JS
상수(constant)상수(constant) - 변한다는 의미의 변수와는 반대로 절대 변하지 않고 항상 일정한 값을 상수라고 한다. // 상수 (constant) let pi = 3.14 //원주율 let radius // 반지름 //원의 넓이를 게산하는 함수 function calculateArea() { return pi * radius * radius } //반지름에 따른 원의 넓이를 출력하는 함수 function printArea() { return `반지름이 ${radius}일 때, 원의 넓이는 ${calculateArea()}` } radius = 4; console.log(printArea()); ..
(15) JavaScript - 추상화 / 스코프(Scope)
·
JS
스코프는 한국말로 범위,영역 이라는 뜻을 가지고있는데변수를 만들고 값을 할당하면 어디서든 그 변수이름으로 할당된 값을 가져올 수있었다.그런데 변수에는 유효한 범위가 있어서 그 범위를 벗어나면 오류가 발생한다.예를 들어보자면..console.log(x);▲ 위 코드가 제대로 작동할까? x라는 변수를 선언하지 않아서 오류가 생긴 것이지만, 상황에 따라서는 변수를 선언했는데도이런 오류가 생길 수 도 있다. 변수가 어디까지 유효한지 , 즉 변수의 유효 범위에 대해 한번 살펴보자.위 코드에 변수를 만들어주자 let x = 3 console.log(x);▲ 3이라는 값을 할당해 줘서 실행했을때 3이 잘 출력되는 것을 볼 수있다. 한번 function 함수에 담아보자면.. //Scope: 범위,영역 ..
(14) JavaScript - 추상화 / 옵셔널 파라미터(optional parameter)
·
JS
함수의 파라미터를 활용하면 전달되는 값에 따라 다양한 결과값을 얻을 수 있다. function sayHello(name) { console.log('Hello ${name}님!'); } sayHello('SeopE') sayHello('행섭') 이렇게 함수를 호출 할 때 소괄호 안에 어떤 값을 넣어주게 되면값이 파라미터로 전달이되고 함수 내부에서는 이 파라미터를 활용해서 서로 다른 결과값을 출력하는 것을 확인할 수 있다. 그런데 파라미터가 있는 함수에 아무런 값도 전달해 주지 않으면?sayHello() 당연히 undefined 값이 나온다.그동안 undefined 값을 확인 할 수 있는 상황이 몇 번 있었는데복습해보면 변수를 선언하고 아무런 값도 할당하지 않았을 때와 함..
(13) JavaScript - 추상화 / return 과 console.log 차이
·
JS
처음 자바스크립트를 접할 때 리턴문이랑 console.log를 헷갈려 하는 경우가 있다.몇 가지 상황을 보면서 둘 차이를 명확히 체크해보자 return 과 console.log 차이아래 코드에 두 개의 함수가 정의되어 있는데printSquare 함수는 파라미터 x의 제곱을 콘솔에 출력하는 함수이고getSquare 함수는 파라미터x를 제곱해서 리턴해주는 함수이다. function printSquare(x) { console.log(x * x); } function getSquare(x) { return x * x } 각 함수들을 호출해보자printSquare(3)▲ printSquare 함수의 숫자 3이 파라미터 x에 전달하여 x * x 는 3 * 3이 ..
2024.09.20-23 (Day 11, 12) - JavaScript Implicit Object 3
·
BootCamp Review
Implicit Object DOM Node• document 는 브라우저에서 실행되는 프런트 웹 애플리케이션에서 이용할 수 있는 내장 객체로 브라우저에 출력 되는 HTML 문서 자체를 지칭하는 객체• document 에 HTML 문서가 파싱되어 만들어진 다양한 DOM 노드 객체가 만들어지며 코드에서는document 객체를 이용해 이 노드에 접근해 다양한 작업을 한다.요소 노드 : 태그를 지칭하는 노드속성 노드 : 태그의 속성을 지칭하는 노드텍스트 노드 : 태그의 바디에 작성된 글을 지칭하는 노드주석 노드 : 문서의 주석을 지칭하는 노드 Node Selector▼ getElementById()• HTML 문서의 태그를 지칭하는 DOM 노드를 선택하여 그 노드에 있는 값을 획득하거나 그 노드에 값을 출력한..
(12) JavaScript - 추상화 / return문의 함수 실행 중단
·
JS
자료형에서 배웠던 함수에서 return 문은 어떤 값을 되돌려주는 output의 역할을 한다. function square(x) { return x * x } console.log(square(3)); 위 코드를 보면 square 함수를 호출하면서 숫자 값 3을 파라미터로 전달하고 있다.그러면 파라미터 x에 3이 전달되고 리턴 3 * 3이 되면서 함수 호출 부분은 9를 되돌려 받는다.결국 최종 출력 결과는 9이다.  이렇게 보면 생각보다 간단한데, 사실 리턴문에는 이렇게 결과값을 돌려주는 역할 뿐만아니라하나의 역할이 더있다. return문의 함수 실행 중단말 그대로 함수 내부에서 리턴 키워드가 나오면 함수의 실행은 그 지점에서 중단이 된다. // 함수 실행 중단 하는 r..