분류 전체보기 64

[JavaScript] 함수 - Function

함수는 프로그램을 구성하는 주요 '구성요소 (building block)'입니다. 함수 선언 함수 선언 (function declaration) 방식을 이용하면 함수를 만들 수 있다. function showMessage() { alert( '안녕하세요!' ); } showMessage(); 펑션 키워드, 함수이름, 괄호 안 매개변수(parameter) 써주면 선언할 수 있고 이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'를 중괄호로 감싸 붙여준다 함수이름 옆 괄호를 붙여 호출하기. 지역 변수 함수 내에서 선언한 변수인 지역 변수 (local variable)는 함수 안에서만 접근할 수 있습니다. 예시: function showMessage() { let message = "안녕하세요!";..

JavaScript/Basics 2022.03.10

[JavaScript] switch문

여러개의 if문은 switch문으로 바꿀 수 있는데 이러한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게하여 비교 상황을 잘 설명한다는 장점 있음 문법 switch문은 하나 이상의 case가 존재. 대개는 default 도 있지만 필수는 아니다 switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] } 윗쪽 케이스부터 x와 케이스의 값을 비교하면서 내려오고 해당하는게 있다면 본문을 실행시켜주고 break를 만나면 실행이 종료 일치하는 케이스가 없다면 default문 아래의 코드가 실행 (디폴트가 있다면) 여러 개의 '..

JavaScript/Basics 2022.03.10

[JavaScript] nullish coalescing opertor (null 병합 연산자)

여러 피연산자 중에 그 값이 '확정되어있는' 변수를 찾을 수 있다 a ?? b 의 결과는 다음과 같음 a가 null도 아니고 undefined도 아니면 a 이외엔 b 이를 ??없이 나타낸다고 하면 x = (a !== null && a !== undefined) ? a : b; 이를 활용해서 세 변수 중 실제 값이 있는 변수의 값을 출력하는데 세 변수 모두 값이 없다면 '익명의 사용자'가 출력되도록 해보죠 이럴 때 ?? 를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ??..

JavaScript/Basics 2022.03.10

[JavaScript] 논리 연산자

|| (or) 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다요 or 연산자는 이항 연산자 이므로 예시처럼 조합이 가능 alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 피연산자가 둘다 false인 경우 제외 전부 true가 반환된다 거기다 피연산자가 불린 타입이 아니면 변환시켜주는데 예시로 1은 true로 0은 false로 바뀝니다. if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다. alert( 'truthy!' ); } 첫번째 truthy를 찾..

JavaScript/Basics 2022.03.10

[JavaScript] if와 '?'를 사용한 조건 처리

'if'문 알다시피 괄호 안 조건을 평가하고 결과가 true이면 코드 블록이 실행. 불린 타입으로의 변환 괄호 안의 표현식을 평가하고 그 결과를 불린 값으로 변환 숫자 ㅇ, 빈 문자열 "", null, undefined, NaN은 변환 시 모두 false가 되고 이들을 falsy값이라고 부름 이 외에는 변환시 true로 변환하여 truthy 값이라고 한다. 'else'절 if문엔 else절을 붙일 수 있습니다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행 예시: let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', ''); if (year == 2015) { alert( '정답입니다!' ); } else { alert( '오답입니다!' ); /..

JavaScript/Basics 2022.03.09

[JavaScript] 비교 연산자

기본적인 연산 (더 밑에 추가로 설명할 것) 큼 작음: a>b, a=b, a 1 ); // true alert( 2 == 1 ); // false alert( 2 != 1 ); // true let result = 5>4; alert(result); // true, 불린값도 다른 값처럼 변수 할당 가능 문자열 비교 JS는 사전 순으로 문자열을 비교. (정확히는 사전순이 아니라 유니코드 순) alert( 'Z' > 'A' ); // true alert( 'Glow' > 'Glee' ); // true alert( 'Bee' > 'Be' ); // true 문자열 비교 시 알고리즘 두 스트링의 첫 글자 비교 첫 글자가 같으면 두번째 글자를 같은 방식으로 비교 끝날 때까지 비교 비교가 종료되었는데 길이가 다르..

JavaScript/Basics 2022.03.09

[JavaScript] 기본 연산자와 수학

피연산자 는 연산자가 연산을 수행하는 대상. 5*2 에는 왼쪽 피연산자 5와 오늘쪽 피연산자 2, '피연산자'는 '인수(argument)'라는 용어로 불리기도 함 피연산자를 하나만 받는 연산자는 단항(unary). 피연산자의 부호를 뒤집는 단항 마이너스 연산자 -는 단항 연산자의 대표적인 예입니다. 두개의 피연산자를 받는 연산자는 이항(binary) 연산자(operator). 수학 연산자는 다음과 같음 덧셈 연산자 + 뺄셈 연산자 - 곱셈 연산자 * 나눗셈 연산자 / 나머지 연산자 % 거듭제곱 연산자 ** 특별한 점은 거듭제곱 연산자는 정수가 아닌 숫자에 대해서도 동작 alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근) alert( 8 ** (1/3) ); // 2 (1/3 거듭제..

JavaScript/Basics 2022.03.09

[JavaScript] 형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되는데 이런 과정을 "형 변환 (type conversion)"이라고 함 문자형으로 변환 이는 문자형의 값이 필요할 때 일어나는데 alert 메서드는 변수로 문자형을 받기에 alert(value)에서 밸류는 문자형이어야한다. 다른 타입의 값을 받으면 자동으로 값을 문자형으로 바꿔준다. let value = true; alert(typeof value); // boolean value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다. alert(typeof value); // string 숫자형으로 변환 이는 수학과 관련된 함수와 표현식에서 자동으로 일어나는데 넘버 타입이 아닌 값에 나누기 / 를 적용하면..

JavaScript/Basics 2022.03.09

[JavaScript] 브라우저에서 유저와 상호작용이 가능한 함수 (alert, prompt, confirm)

alert 이 함수가 실행되면 확인을 누를 때까지 떠있는 모달창이 나옴 prompt 두개의 인수를 받는 이 함수는 result = prompt(title, [default]); let age = prompt('나이를 입력해주세요.', 100); alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다. 이 함수가 실행되면 유저가 대화상자의 필드에 원하는 값을 입력하고 확인을 누를 수 있습니다. 입력을 원하지 않으면 취소를 눌러 나올 수 있음 이 함수는 유저가 필드에 기재한 문자열을 반환하고 취소한다면 null이 반환 confirm 이 함수는 변수로 받은 question과 확인 및 취소버튼이 있는 모달이 뜸 당연히 확인을 누르면 true 와 그 외에는 false 를 반환 l..

JavaScript/Basics 2022.03.09

[JavaScript] 자료형 - Data Types

JS에는 여덟가지 기본 자료형이 있다. 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. 따라서 어느 순간에는 문자열, 어느 순간엔 숫자가 될 수 있음 let message = "hello"; message = 123456; 이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있는 언어를 '동적 타입' (dynamically typed)' 언어 숫자형 숫자형은 정수 및 부동소수점 숫자(floating point number)를 나타냅니다 이와 관련된 연산 또한 다양한데 덧셈 뺄셈 나눗셈 곱셈 등이 대표적이지요 또 일반적인 숫자 외에 Infinity, -Infinity, NaN 같은 '특수 숫자 값(specail numeri value)이 포함 Infinity는 어떤 숫자보다 더..

JavaScript/Basics 2022.03.09