상세 컨텐츠

본문 제목

[자바스크립트] 문자열, 배열, 조건문, 반복문, 에러 처리, 함수

자바스크립트

by front-hyun 2023. 4. 9. 21:16

본문

문자열

문자열 선언

  • 큰 따옴표("")보다는 작음 따옴표('')를 주로 사용합니다.
  • 문자열에 따옴표가 포함된 경우 문자 연결 연산자(+)나 이스케이프 문자를 사용합니다.
let greeting = "Hello";
let farewell = 'bye';
let sentence = greeting+'\n'+ farewell;
console.log(sentence);
//숫자->문자열로 변환되어서 병합
//피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환(연산자가 +인 경우만)
console.log(farewell+2);

 

이스케이프 문자

  • 백슬래시(\)로 시작되는, 컴퓨터를 제어하는 목적으로 사용되는 특수한 문자입니다.
  • \n, \t, \b, \', \", \\

 

템플릿 리터럴

  • ES6에서 추가되었으며, 백틱(`)으로 문자열을 정의하는 방법입니다.
  • 엔터를 눌렀을 때 줄 바꿈이 적용됩니다.
  • ${} 문법을 이용해서 문자열에 변수 또는 식을 넣을 수 있습니다.

 

문자열 함수

  • 문자열은 불변합니다.
  • indexOf(), slice(a, b), toUpperCase(), toLowerCase(), includes(), startsWith(), endWith()

 

배열

배열 선언

  • 배열의 인덱스는 0부터 시작합니다.
  • 배열 요소의 자료형에는 제약이 없습니다.
  • 배열의 본질은 객체입니다.
  • 자바스크립트 엔진은 배열의 요소를 인접한 메모리 공간에 차례로 저장해서 연산 속도를 높입니다.

 

조건문

  • Truthy: True 같은 것, Falsy: False 같은 것입니다.
  • Falsy의 종류로는 0, NaN(Not a Number), false, null, undefined, ' '(빈 문자열)이 있습니다. 
  • 위의 값을 variable이라고 가정한다면, if(variable) -> if(false)
  • Truehy != True, Falsy != False
  • switch문: 특정 변수를 다양한 상황에서 비교할 때 용이합니다.

 

반복문

for

  for ([초기문]; [조건문]; [증감문])
      문장

 

while

  while (조건문)
      문장

 

do~ while

 do
      문장
    while (조건문);

 

무한 반복

for(;;){}

while(ture){}

 

break-반복문 빠져나오기

 

continue-다음 반복으로 넘어가기

 

에러 처리

에러 던지기-throw

  • throw는 예외를 발생시키는 것입니다.
  • 자바스크립트에서는 에러라고 인식하지 않아도, 개발자가 임의로 에러 처리를 하고 싶은 경우 사용합니다.
/ 에러(예외발생)를 던지는 목표는 에러를 막는것이 아니라  에러가 발생하면 더욱 편하게 디버깅하는데 있다.
// 에러(예외발생)가 발생한 함수명과 이유를 넣을것을 권장한다.
// 모든 브라우저에서 확실히 에러메러 메세지를 보여주기위해 Error객체를 사용한다.
function func(param) {
	if(!param) {
		throw new Error("func(): ~~이유로  에러발생")
	}
	// 로직수행...
}

 

함수

함수 선언문(함수 선언 방식)

function likeLion(name){
    console.log(`멋쟁이 사자처럼 11기 ${name}`)
}

likeLion("PHA");

 

함수 이름 짓는 법

  • 함수가 어떤 동작을 하는지 설명할 수 있어야 합니다.
  • 어떤 동작을 하는지 설명하는 동사를 접두어로 붙이는 것이 관습입니다.
  • show..-무언가를 보여주는 함수
  • get..-값을 반환하는 함수
  • create...-무언가를 생성하는 함수 등

 

함수 표현식

  • 자바스크립트만의 함수 정의 방식입니다.
  • 함수도 결국 값 => 할당, 복사, 선언할 수 있습니다.
  • 함수를 만들고, 그 함수를 변수에 할당합니다.
const Hello =function Like(name){
    console.log(`멋쟁이 사자처럼 11기 ${name}`)
}

Hello("PHA");
//Like("pha"); 오류

 

 

콜백 함수

  • 함수를 함수의 인수(값)로 전달하고, 인수로 전달한 함수를 나중에(필요할 때) 호출하는 것입니다.

 

화살표 함수

  • this를 가지지 않습니다.
  • arguments를 지원하지 않습니다.
  • new와 함께 호출할 수 없습니다.
  • super가 없습니다.
  • 자체 컨텍스트가 없는 짧은 코드를 담을 용도로 만들어졌습니다.
//함수 표현식
let sum=function(a,b){return a+b};
//화살표 함수(함수이름)=(매개변수)=>표현식
let sum1=(a,b)=>a+b;

 

[추가 학습]

Tagged templates

  • 템플릿 리터럴의 발전된 형태로써, 함수 형태로 사용할 수 있습니다.
  • template literal  ` ` 안에 ${} 문을 사용해 스크립트 변수를 바인딩할  있고 개행도 그냥 엔터로 (실제개행인식하기 때문에 편리합니다. ->  백틱 문법을 한층 더 고급스럽게 사용법하는방법이 Taggedtemplates 입니다.
function taggedTemplateLiterals(str, ...rest) {
    console.log(str);
    console.log(rest);

    return 0;
}

let value1 = 10;
let value2 = "ten";
let value3 = false;

const result = taggedTemplateLiterals`ABC${value1}EFG${value2}HIJ${value3}`;

console.log({ result });

 

자바스크립트의 Array vs 일반적인 배열

1) 일반 배열

  • 이처럼 배열은 인덱스를 통해 효율적으로 요소에 접근할 수 있다는 장점이 있습니다.
  • 정렬되지 않은 배열에서 특정한 값을 탐색하는 경우, 모든 배열 요소를 처음부터 값을 발견할 때까지 차례대로 탐색(선형 탐색(linear search), 시간 복잡도 O(n))해야 합니다.

2) 자바스크립트의 Array

  • 열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적으로 이어져 있지 않을 수도 있습니다.
  • 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열(sparse array)이라고 합니다.
  • 자바스크립트에서 사용할 수 있는 모든 값은 객체의 프로퍼티 값이 될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 될 수 있습니다.
const arr = [
  'string',
  10,
  true,
  null,
  undefined,
  NaN,
  Infinity,
  [ ],
  { },
  function () {}
];

 

에러를 직접 만들어서 던지는 방법

function divide(a, b) {
    if (b === 0) {
      throw new Error("0으로 나눌 수 없습니다."); // 에러 객체를 생성하여 예외를 던집니다.
    }
    return a / b;
  }
  
  try {
    var result = divide(10, 0); // 에러가 발생할 수 있는 코드
    console.log("결과:", result);
  } catch (error) {
    console.error("에러 발생:", error.message); // 예외 처리기에서 에러 메시지를 출력합니다.
  }

 

엄격 모드

  • JavaScript의 엄격 모드(strict mode)는 더 엄격한 문법 및 동작 규칙을 따르는 모드로, 오류를 더 빨리 감지하고, 몇 가지 묵시적인 동작을 방지하며, 보다 예측 가능하고 안전한 코드를 작성할 수 있도록 도와줍니다.
  • 엄격 모드를 활성화하려면 다음과 같이 "use strict"; 를 스크립트 파일이나 함수의 맨 위에 추가하면 됩니다.
"use strict"; // 스크립트 파일이나 함수의 맨 위에 엄격 모드 선언

// 엄격 모드에서의 JavaScript 코드 작성

관련글 더보기