JavaScript

[JS기초] 프로그래밍 기초 | 자료형 | 추상화

염두리안 2024. 11. 7. 22:48
728x90
반응형

자바스크립트 프로그래밍 기초

  • 자료형
    • 숫자 : 정수형, 실수형 | 사칙연산 가능
    • 문자형(string) : 따옴표로 표현하는 것 | + 를 통해 문자열 이어붙이기 가능
    • 불린(boolean) : T/F로 표현
  • 추상화란? 구체적인 정보를 숨기고, 필요한 정보만 표현하는 것 | 복잡한 것들을 목적에 맞게 단순화 하는 것
  • 변수
    • 규칙 : a-z, A-Z, _, $ 로 시작 | 두번째 글자부턴 숫자도 가능 | 대소문자 구별 | 예약어 사용 X
    • 지키면 좋은 것 : 의미 없는 이름 X | 너무 추상적인 이름 X | 모든 변수 이름은 카멜케이스로 사용하는 것이 좋음(ex. my_name → myName)
// let 키워드를 사용해 변수 선언
let coffee = 3000;
console.log(coffee);
>> 3000
  • 함수 : 명령들을 저장하는 것 | 함수에도 추상화 개념이 녹아있다!
// 함수 선언
function 함수이름() {
	명령;
};
  • 파라미터 : 매개변수 → 함수 내에서 변수처럼 사용 가능
function welcome(name) {
	console.log('안녕하세요 ' + name + '님!');
};
welcome('메롱');
>> 안녕하세요 메롱님!

// 여러 개의 파라미터
function 함수이름(파라미터, 파라미터) {
	// 명령;
};
  • return문 : output을 반환하는 것 | 함수 내에서 사용
function getTwo() {
	return 2;
};
console.log(getTwo());
>> 2
  • 주석
// 한줄 주석

/*
여러 줄 주석
*/

자료형

  • 숫자형 : 덧셈(+) | 뺄셈(-) | 곱셈(*) | 나눗셈(/) | 나머지(%) | 거듭제곱(**)
  • 문자열
console.log('두리안');

// 역슬래시 활용
console.log("He said \"I'm fine\"");
>> He said "I'm fine"
// ` ` 사용
console.log(`He said "I'm fine"`);
>> He said "I'm fine"

// 문자열 연산
console.log('3' + '5');
>> 35
  • 불대수 : 일상적인 논리를 수학적으로 표현한 것
    • AND연산 : X, Y가 모두 참
    • OR연산 : 둘 중 하나라도 참이면 참
    • NOT연산 : 거짓 → 참 | 참 → 거짓으로 바꿔주는 연산
  • 불린형
    • >= 또는 <= 기재 시 등호를 뒤에 써야 함! (앞에 쓰면 오류 발생)
    • === : 값이 서로 일치하는지
      • ==과 차이점은 3개 사용시 엄격한 비교, 2개 사용시엔 덜 엄격한 비교를 함
        • console.log(2 == ‘2’) → true
        • console.log(2 === ‘2’) → false
    • !== : 값이 서로 불일치 하는지
    • && : AND 연산자
    • || : OR 연산자
    • ! : NOT연산자 | !! : NOT의 NOT
  • typeof연산자 : 해당 자료형을 문자형으로 반환
typeof 값;
console.log(typeof 314);
>> number
console.log(typeof '314');
>> string

console.log(typeof 'hello'+'dog');
>> hellodog
console.log(typeof 8 - 3);
>> NaN  /* 사칙연산보다 typeof 연산을 더 빨리하기 때문에
8을 number라는 string으로 반환하고 3을 빼려고 해서 에러 발생 */
  • 형변환
    • 불린값은 형 변환시 true → 1, false → 0으로 반환
    • 비문자(` `), 0, NaN은 0으로 반환
console.log('10' + '5');
console.log(10 + 5);
>> 105
>> 15
console.log(number('10') + number('5'));
console.log(stirng(10) + string(5));
>> 15
>> 105
  • 각종 연산
// 산술연산
console.log(4 + '2'); // 42 -> 문자열이 더 강함
console.log(4 + 2);  // 6
console.log(4 - true);  // 3
console.log(4 * false);  // 0
console.log(4 / '2');  // 2
console.log('4' ** true);  // 4 
console.log(4 % 'two');  // NaN

// 관계 비교 연산
console.log(2 < '3');  // true
console.log(2 > true);  // true
console.log('2' <= false);  // false
console.log('two' >= 1);  // false (비교가 불가능할때도 false)

// 같음 비교 연산
// 일치&불일치(!==)
console.log(1 === '1');  // false
console.log(1 === true);  // false
// 동등&부등(!=)
console.log(1 == '1');  // true
console.log(1 == true);  // true
  • 템플릿 문자열 : 작은따옴표가 아니라 백틱(`)을 사용해야 함
console.log('생년월일은 '+year+'년'+month+'월 '+day+'일 입니다.');
console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`);
>> 두 개의 출력은 같음

let myNumber = 3;
function getTwice(x) {
	return x * 2;
}
console.log(`${myNumber}의 두 배는 ${getTwice(myNumber)}입니다.`);
>> 3의 두 배는 6입니다.
  • null과 undefined : 값이 없음
    • null : (의도적으로) 값이 없다
    • undefined : 값이 없다는 것을 확인하는 값
console.log(null == undefined);  // true
console.log(null === undefined);  // false

추상화

  • (복합) 할당 연산자(assignment operators)
// 세 줄은 같은 의미
x = x + 1;
x += 1;
x++
  • return과 console.log의 차이 : return은 함수값을 리턴하는 것이고, console.log는 출력해주는 함수
    • 함수 선언 시 return문을 작성하지 않으면 undefined 값을 리턴함.
  • 옵셔널 파라미터 : 파라미터에 기본값을 설정함(선택적 전달)
// 옵셔널 파라미터는 생성 후 가장 뒷쪽으로...
function introduce(name, nationality = '한국')
  • 변수의 scope : 변수는 유효범위를 넘으면 오류 발생
let y = 3;  // 글로벌변수, 전역변수

// x는 myFunction 안에서만 유효함
// y는 어느 곳이든 사용 가능
function myFunction() {  // 블록문
	let x = 3;  // 로컬변수, 지역변수
}

let y = 3;
function myFunction() {  // 블록문
	let y = 5;
	console.log(y); // 5 출력
}
console.log(y); // 3 출력

 

자바스크립트 스터디 1주차 (1)

728x90
반응형