본문 바로가기

분류 전체보기307

JavaScript 기초 : 제어문 2. switch문 2. switch문 switch문은 if문과 비슷해보이지만 다르다. switch문은 어떤 값을 입력했는지에 따라 다르게 동작하는 문법이라고 볼 수 있다. if문과 비슷하지만 동작하는 방식이 조금 다르다. 비교할 값과 조건값이 서로 일치할 때 : (콜론 쓰기!) 동작할 내용을 적는다. 그리고 break를 적어서 switch문을 빠져나오게 적어주면 된다. default: 다음에 동작 부분은 비교할 값이 모든 조건 값과도 일치하지 않을 경우의 코드를 작성해주면된다. 비교할 값이 조건값1과 조건값2와 일치 하지 않을 경우 어떤 동작을 할 건지 적어주면 된다. 필요에 따라 생략도 가능하다. 2-2. switch문으로 심리 테스트 만들기! myChoice가 2라고 선언했다. myChoice가 1과 같다면 '토끼~'.. 2020. 9. 7.
JavaScript 기초 : 제어문 1. if문 사용법(if문 중첩) 1. if문(if statement) 사용하기 if문은 어떤 특별한 조건에 따라서 코드를 실행할 지 말 지를 결정하는 '조건문'이다. if문은 기본적으로 조건과 동작으로 구성되어 있다. if (조건부분) { 동작부분 } 예시를 살펴보자. 온도가 100도 이상이면 물이 끓는다라는 if문을 작성해보았다. //온도가 100도 이상이면 물이 끓는다. let temperature = 0; if (temerature >= 100) { console.log('물이 끓는다.) } 1-1. if - else문 사용하기 그럼 온도가 100도 이상이면 물이 끓고 아니면 안끓는다는 if-else 문을 작성해보자! //온도가 100도 이상이면 물이 끓는다. 아니면 안 끓는다. let temperature = 0; if (tem.. 2020. 9. 7.
JavaScript 기초: 추상화 6. 상수 6. 상수 변한다는 의미의 변수와는 달리 상수는 변하지 않는다! 상수를 선언할 때에는 const 라고 써주고 상수의 이름은 대문자와 _ 로 연결한다. 위의 그림에서 원주율을 상수로 선언하고 반지름은 글로벌 변수로 선언했다. 일단 변수 값은 0으로 선언하고 원하는 값이 있을 때 radius = 3으로 바꿔주면 된다. 원의 넓이를 계산하는 함수를 만들고 원의 넓이를 출력하는 함수도 만들었다. 이 두 함수를 한 개로 합쳐볼까? 위의 내용을 그냥 printcircleArea라는 함수 하나로 합쳐보았다. 그리고 radius를 파라미터로 받고 함수를 호출할 때 파라미터에 반지름 2를 넣어 보았다. 상수는 딱 두 가지 규칙만 지키면 코드를 작성하고 읽는데 어려움이 없다. 1. const로 선언할 것 2. 대문자와 _.. 2020. 9. 7.
JavaScript 기초 : 추상화 5. 로컬변수와 글로벌변수 5. 로컬변수와 글로벌변수 변수에는 Scope 즉 범위, 영역이 있다. 변수에는 즉! 유효한 범위가 있다는 말이다. 이 말이 더 어려운데;;; 변수는 로컬 변수(지역 변수)가 있고 글로벌 변수(전역 변수) 가 있다. 로컬 변수는 정해진 범위에서만 사용할 수 있고 글로벌 변수에서는 코드를 작성하고 있는 어느 곳에서나 사용할 수 있다. 먼저 글로벌 변수의 예시를 보자. 아래 그림처럼 변수 x를 선언해주고 x값을 콘솔에 출력하라는 명령을 내렸다. let x = 3 console.log(x); 결과는 어떻게 나올까? 당연히 3이 출력된다. 그렇다면 만약 글로벌 변수를 선언하고 똑같은 x를 함수 내에서 다르게 선언하면 어떻게 될까? //글로벌 변수(Global Variable) let x = 1 //블록문(Blo.. 2020. 9. 7.
JavaScript 기초 : 추상화 4. 함수 옵셔널 파라미터 4. 함수 파라미터 파라미터가 있는 부분에 아무 값도 쓰지 않고 함수를 호출하는 경우에는 undefined 값이 나온다. 아래 그림처럼 t라는 변수에 아무것도 쓰지 않고 t변수를 출력할 때에도 undefined 값이 나오고 Hello라는 함수에 return 문이 없어서 이 함수를 출력하니 undefined 값이 나왔다. 하지만 파라미터에 기본 값을 정하는 방법이 있다. 바로 옵셔널 파라미터이다. 4-2. 함수 옵셔널 파라미터 함수를 호출 할 때 파라미터 값을 전달해도 되고 생략해도 되니까 선택적으로 전달을 받는다고 해서 이런 파라미터를 옵셔널 파라미터라고 부른다. nationality 에 한국이 기본적으로 들어 있기 때문에 introduction('James', 20);으로 함수를 호출 했을 경우 따로 .. 2020. 9. 7.
JavaScript 기초 : 추상화 3. return문 이해하기 3. return문 이해하기 return문의 역할 2가지 1. return문은 어떤 값을 되돌려주는 output의 역할을 한다. (함수 호출 부분을 return문 뒤에 오는 값으로 대체한다.) 2. return문은 함수의 실행을 중단한다. (현재 함수 실행을 멈추고 함수가 호출된 지점으로 돌아가서 진행한다.) ???? 세상에 무슨 말이지? 내가 이해한 바로 풀어써보자. return은 함수를 실행해서 얻은 어떤 값을 당장 콘솔에 출력하는 것이 아니다. 보통 console.log()와 헷갈리는데 return은 단순히 return 다음 값으로 대체! 하는 것이다. 그래서 return 뒤의 값은 다른 연산이나 함수 실행을 위해 사용하고 싶을 때 사용할 수 있다. ??? 그래도 어렵고 헷갈리니 예시를 살펴보자. .. 2020. 9. 7.
JavaScript 기초 : 추상화 2. 함수 정의와 호출 2. 함수(Function) 정의와 호출 기본적으로 코드는 왼쪽에서 오른쪽, 위에서 아래로 읽고 쓴다. 그래서 함수를 정의하고 호출 할 때도 위에서 아래로 왼쪽에서 오른쪽으로 순서대로 정의하고 순서대로 호출한다고 생각하면 된다. 함수를 정의하는 것과 함수를 호출하는 것은 다르다. 함수를 정의할 때는 function 함수이름(파라미터){ 함수 내용 } 이렇게 정의하면 된다. 그리고 함수를 호출할 때는 함수 이름(파라미터) 이렇게 써주면 된다. 함수를 정의한 뒤 함수를 호출하면 함수 내에 있는 모든 내용들을 호출한다. 함수를 호출한 뒤에는 다음 줄로 이동한다. 예시를 살펴보자. fucntion square(x){ return x * x; } console.log('함수 호출 전'); square(5) con.. 2020. 9. 7.
JavsScript 기초 : 추상화 1. 할당 연산자(Assignment operators) 1. 할당 연산자(Assignment operators) '할당' 했다는 것은 지정했다, 정했다, 대입했다라는 의미이다. 수학에서 등호는 왼쪽과 오른쪽이 같다는 의미이지만 프로그래밍에서는 오른쪽에 있는 피연산자(연산이 되어 지는 대상)를 왼쪽에 있는 피연산자에 할당한다는 의미이다. 예시를 살펴보자. let name = 'yunju'; let x = 5; x = x - 2; console.log(x); 일단 오른쪽부터 계산을 해준다. x 가 현재 5이기 때문에 x -2 는 5 - 2, 즉 3이 된다. 그 다음 왼쪽 x에 3을 할당해준다. 결과적으로 이 코드는 x의 값을 2만큼 줄여주는 코드라고 볼 수 있다. 2. 복합 할당 연산자(Compound assignment operators)) 복합 할당 연산자는.. 2020. 9. 7.
JavaScript 기초 : 자료형 7. null과 undefined JavaScript 자료형 마지막! JavaScript자료형에는 숫자형, 문자형, 불린 등이 있다. 값을 저장할 때 아무것도 저장을 안하는 경우도 있고 의도적으로 null값을 저장하기도 한다. 두 경우가 콘솔에 다르게 표시되는데 이번 글에서는 null과 undefined에 대해 알아보려 한다. 7. null과 undefined 둘 다 값이 없다는 의미이다! 하지만 완전히 다르다. ??? 무엇이 다른지 살펴보자! null은 값이 없다는 것을 의도적으로 표현할 때 사용한다. undefined는 코드를 실행할 때 값이 없다는 것을 확인할 수 있는 것이다. 둘을 명확하게 이해하지 못한다면 코드를 작성할 때 실수가 생긴다. 이해 필수!!! 1) 변수 지정을 할 때 아무 값을 안 넣은 경우 자바스크립트에서는 값이 .. 2020. 9. 4.
JavaScript 기초 : 자료형 6. 템플릿 문자열 JavaScript 자료형 JavaScript자료형에는 숫자형, 문자형, 불린 등이 있다. 특히 문자열을 작성할 때 편리하게 작성하는 방법이 있는데 그 방법이 바료 템플릿 문자열이다. 이번 글에서는 템플릿 문자열 사용 방법에 대해 알아보자! 6. 템플릿 문자열 템플릿 문자열은 특정한 형식을 가진 문자열을 말한다. 문자열을 연결할 때 + 기호를 사용하면 된다. 하지만 +를 매 번 써줘야 하는 번거로움이 있기 때문에 좀 더 빠르고 쉽게 문자열과 변수, 숫자 등을 연결하는 방법이 바로 템플릿 문자열을 사용하는 방법이다. ${}을 사용하면 +를 사용하지 않아도 문자를 쭉 이어서 작성할 수 있다. line7과 line8을 비교해보면 ${}을 사용하는게 얼마나 편한지 알 수 있다. ${}을 사용할 때에는 문장의 처.. 2020. 9. 4.

티스토리툴바